텍스트 파일의 내용을 자바 스크립트 변수에 어떻게로드합니까?

텍스트 파일의 내용을 자바 스크립트 변수에 어떻게로드합니까?

---

내 웹 응용 프로그램 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를 사용하며, 라이브러리에 해당 코드를 캡슐화하여 코딩을 쉽게 만듭니다.

---

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

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");
});

you could use .load which gives you a much more condensed form:

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

.load gives you also the option to load partial pages which can come in handy, see api.jquery.com/load/.

---

If your input was structured as XML, you could use the importXML function. (More info here at quirksmode).

If it isn't XML, and there isn't an equivalent function for importing plain text, then you could open it in a hidden iframe and then read the contents from there.

참고URL : https://stackoverflow.com/questions/196498/how-do-i-load-the-contents-of-a-text-file-into-a-javascript-variable