ฉันมีไฟล์ข้อความในรูทของเว็บแอปของฉันhttp: //localhost/foo.txtและฉันต้องการที่จะโหลดมันลงในตัวแปรใน javascript .. ใน groovy ฉันจะทำสิ่งนี้:

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

ฉันจะรับผลลัพธ์ที่คล้ายกันใน javascript ได้อย่างไร

XMLHttpRequest คือ AJAX โดยไม่มี XML

ลักษณะที่แม่นยำที่คุณทำขึ้นอยู่กับกรอบ JavaScript ที่คุณใช้ แต่ถ้าเราไม่สนใจปัญหาการทำงานร่วมกันโค้ดของคุณจะมีลักษณะดังนี้:

ลูกค้า var = XMLHttpRequest ใหม่ ();
client.open ('GET', '/foo.txt');
client.onreadystatechange = function () {
  การแจ้งเตือน (client.responseText);
}
client.send ();

แม้ว่าโดยทั่วไปแล้ว XMLHttpRequest จะไม่พร้อมใช้งานในทุกแพลตฟอร์มดังนั้นบางครั้งอาจมีการทำ fudgery อีกครั้งทางออกที่ดีที่สุดของคุณคือการใช้กรอบ AJAX เช่น jQuery

ข้อควรพิจารณาเพิ่มเติมหนึ่งข้อ: สิ่งนี้จะใช้ได้ตราบใดที่ 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 จะไม่อนุญาตให้ AJAX ใช้ URL ในfile://รูปแบบนี้

สิ่งหนึ่งที่ต้องจำไว้คือ Javascript ทำงานบนไคลเอ็นต์ไม่ใช่ในเซิร์ฟเวอร์ คุณไม่สามารถ "โหลดไฟล์" จากเซิร์ฟเวอร์ใน Javascript ได้จริงๆ สิ่งที่เกิดขึ้นคือ Javascript ส่งคำขอไปยังเซิร์ฟเวอร์และเซิร์ฟเวอร์ส่งคืนเนื้อหาของไฟล์ที่ร้องขอ Javascript ได้รับเนื้อหาอย่างไร นั่นคือสิ่งที่ฟังก์ชั่นการโทรกลับมีไว้สำหรับ ในกรณีของเอ็ดเวิร์ดนั่นคือ

    client.onreadystatechange = function() {

และในกรณีของ Danb ก็คือ

 function(data) {

ฟังก์ชั่นนี้เรียกว่าเมื่อใดก็ตามที่ข้อมูลมาถึง รุ่น jQuery ใช้ Ajax โดยปริยายเพียงทำให้การเข้ารหัสง่ายขึ้นโดยการห่อหุ้มโค้ดนั้นในไลบรารี

อัปเดต 2020: การใช้การดึงข้อมูลด้วย async / รอ

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 ที่ซ่อนอยู่จากนั้นอ่านเนื้อหาจากที่นั่น