Javascript读取服务器文件

当我们需要从服务器获取文件时，Javascript提供了下面这些方法:

XMLHttpRequest对象

XMLHttpRequest对象是纯粹的Javascript实现的最基本的异步HTTP请求的API。它的一个主要特点是，发送和接收数据都是异步的。异步模式不会阻塞用户界面，并且可通过回调函数来获取响应数据。代码片段如下:

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/file.txt', true);
xhr.send();
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.log('Error: ' + xhr.status);
    }
  }
};

其中，xhr.readyState表示请求的状态，xhr.status表示响应状态码，xhr.responseText表示响应内容。具体可参考MDN的API文档。

fetch

fetch是Javascript新的网络请求API，它使用Promise实现异步请求，具有更好的语义化和可读性，同时可用于获取JSON数据和二进制文件。代码片段如下:

fetch('http://example.com/file.txt')
  .then(response => response.text())
  .then(data => console.log(data))
  .catch(error => console.log('Error: ' + error));

其中，fetch返回Promise对象，response.text()方法返回响应内容，then()和catch()用于处理Promise的状态。

jQuery

在jQuery中，$.ajax()方法常用于异步请求，支持各种类型的HTTP请求，同时也支持JSONP和XMLP(跨域)。代码片段如下:

$.ajax({
  url: 'http://example.com/file.txt',
  type: 'GET'
}).done(function(data) {
  console.log(data);
}).fail(function(xhr, status, error) {
  console.log('Error: ' + error);
});

其中，done()方法处理成功的回调函数，fail()方法处理错误的回调函数。

参考文献

1. XMLHttpRequest
2. Fetch API
3. jQuery.ajax()