내 웹 응용 프로그램 http : //localhost/foo.txt 의 루트에 텍스트 파일이 있으며 javascript ..의 변수에 파일을로드하고 싶습니다.

def fileContents = 'http://localhost/foo.txt'.toURL().text;
println fileContents;

자바 스크립트에서 비슷한 결과를 얻으려면 어떻게해야합니까?

XML이없는 XMLHttpRequest, 즉 AJAX

이 작업을 수행하는 정확한 방법은 사용중인 JavaScript 프레임 워크에 따라 다르지만 상호 운용성 문제를 무시하면 코드는 다음과 같습니다.

var client = new XMLHttpRequest ();
client.open ( 'GET', '/foo.txt');
client.onreadystatechange = 함수 () {
  경고 (client.responseText);
}
client.send ();

그러나 일반적으로 모든 플랫폼에서 XMLHttpRequest를 사용할 수있는 것은 아니므로 약간의 퍼지가 수행됩니다. 다시 한 번, 가장 좋은 방법은 jQuery와 같은 AJAX 프레임 워크를 사용하는 것입니다.

한 가지 추가 고려 사항 : foo.txt가 동일한 도메인에있는 경우에만 작동합니다. 다른 도메인에있는 경우 동일한 원본 보안 정책으로 인해 결과를 읽을 수 없습니다.

다음은 jquery에서 어떻게했는지입니다.

jQuery.get('http://localhost/foo.txt', function(data) {
    alert(data);
});

업데이트 2019 : 가져 오기 사용 :

fetch('http://localhost/foo.txt')
  .then(response => response.text())
  .then((data) => {
    console.log(data)
  })

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

텍스트 파일에서 상수 문자열 만 원하는 경우 JavaScript로 포함 할 수 있습니다.

// This becomes the content of your foo.txt file
let text = `
My test text goes here!
`;

<script src="foo.txt"></script>
<script>
  console.log(text);
</script>

파일에서로드 된 문자열은로드 된 후 JavaScript에 액세스 할 수있게됩니다. `(backtick) 문자는 템플릿 리터럴을 시작하고 종료 하여 텍스트 블록에 "및"문자를 모두 허용합니다.

Chrome에서는 file://구성표 가있는 URL에서 AJAX를 허용하지 않으므로이 방법은 파일을 로컬로로드하려고 할 때 효과적 입니다.

명심해야 할 것은 자바 스크립트가 서버가 아닌 클라이언트에서 실행된다는 것입니다. 자바 스크립트로 서버에서 실제로 "파일을로드"할 수 없습니다. Javascript는 서버에 요청을 보내고 서버는 요청 된 파일의 내용을 다시 보냅니다. Javascript는 내용을 어떻게 받습니까? 이것이 바로 콜백 함수입니다. 에드워드의 경우

    client.onreadystatechange = function() {

danb의 경우에는

 function(data) {

이 함수는 데이터가 도착할 때마다 호출됩니다. jQuery 버전은 암묵적으로 Ajax를 사용하며, 라이브러리에 해당 코드를 캡슐화하여 코딩을 더 쉽게 만듭니다.

업데이트 2020 : 비동기 / 대기 상태에서 페치 사용

const response = await fetch('http://localhost/foo.txt');
const data = await response.text();
console.log(data);

참고 await만 사용할 수 있습니다 async기능. 더 긴 예는

async function loadFileAndPrintToConsole(url) {
  try {
    const response = await fetch(url);
    const data = await response.text();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

loadFileAndPrintToConsole('https://threejsfundamentals.org/LICENSE');

이것은 거의 모든 브라우저에서 작동합니다.

var xhr=new XMLHttpRequest();
xhr.open("GET","https://12Me21.github.io/test.txt");
xhr.onload=function(){
    console.log(xhr.responseText);
}
xhr.send();

또한 새로운 FetchAPI가 있습니다.

fetch("https://12Me21.github.io/test.txt")
.then( response => response.text() )
.then( text => console.log(text) )

jQuery를 사용하는 경우 jQuery.get, 예를 들어

jQuery.get("foo.txt", undefined, function(data) {
    alert(data);
}, "html").done(function() {
    alert("second success");
}).fail(function(jqXHR, textStatus) {
    alert(textStatus);
}).always(function() {
    alert("finished");
});

당신은 .load훨씬 더 응축 된 형태를 제공 할 수 있습니다 :

$("#myelement").load("foo.txt");

.load편리한 부분 페이지를로드하는 옵션도 제공합니다 ( api.jquery.com/load/ 참조) .

입력이 XML로 구조화 된 경우 importXML함수를 사용할 수 있습니다 . ( quirksmode에 자세한 정보가 있습니다 ).

XML이 아니며 일반 텍스트를 가져 오는 동등한 기능이 없다면 숨겨진 iframe에서 열어서 내용을 읽을 수 있습니다.