JavaScript中的XMLHttpRequest|极客笔记

JavaScript中的XMLHttpRequest

XMLHttpRequest是JavaScript中用来发起HTTP请求和接收服务器响应的对象。它能够在不刷新页面的情况下，通过JavaScript发送请求和接收响应，实现页面的动态局部刷新和与服务器的数据交互。在本文中，我们将详细介绍XMLHttpRequest的基本用法，以及一些常见的应用场景和技巧。

基本用法

首先，我们需要创建一个XMLHttpRequest对象，并使用open()方法指定请求的方法和URL，如下所示：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);

在这个示例中，我们创建了一个GET类型的请求，请求的URL是’/api/data’。第三个参数指示请求是异步的，即在发送请求的同时，JavaScript代码会继续执行，而不会阻塞等待响应。

接下来，我们需要定义一个回调函数来处理服务器响应。可以通过设置onload、onerror等属性来指定回调函数，如下所示：

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.responseText);
  } else {
    console.error('请求失败：' + xhr.status);
  }
};

xhr.onerror = function() {
  console.error('请求失败');
};

在上面的示例中，当接收到服务器的响应时，会首先检查响应的状态码是否在200到299之间，如果是，则说明请求成功，可以通过responseText属性获取响应内容；如果不是，则说明请求失败，会打印错误信息。

最后，我们需要调用send()方法来发送请求：

xhr.send();

上面的代码片段展示了XMLHttpRequest的基本用法。虽然简单，但已经能够满足大部分的需求。接下来，我们将介绍一些XMLHttpRequest的高级应用场景和技巧。

高级应用

发送POST请求

除了GET请求外，我们还可以发送POST请求。使用open()方法时，需要将第二个参数设置为’POST’，并在send()方法中传入要发送的数据：

var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/user', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ name: 'Alice', age: 25 }));

在这个示例中，我们向服务器发送了一个包含用户信息的JSON对象。

设置超时

可以通过调用setTimeout()方法来设置请求的超时时间，以防止请求时间过长导致页面卡死：

xhr.timeout = 5000; // 设置超时时间为5秒

xhr.ontimeout = function() {
  console.error('请求超时');
};

在上面的示例中，如果请求超过5秒没有响应，会触发一个请求超时的事件。

监听上传进度

如果需要上传文件或其他大数据时，可以利用xhr对象的upload属性来监听上传进度：

xhr.upload.onprogress = function(event) {
  if (event.lengthComputable) {
    var percent = event.loaded / event.total * 100;
    console.log('上传进度：' + percent.toFixed(0) + '%');
  }
};

在这个示例中，我们通过计算已上传字节数和总字节数的比例，实时显示上传的百分比。

设定请求头

可以使用setRequestHeader()方法来设置请求头信息，例如设置Authorization头用于身份验证：

xhr.setRequestHeader('Authorization', 'Bearer token123');

以上就是一些XMLHttpRequest的高级应用场景和技巧，通过灵活运用这些功能，可以满足更加复杂的需求。

示例代码

最后，我们来看一个完整的示例代码，演示了如何使用XMLHttpRequest从服务器获取数据并动态更新页面：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    var data = JSON.parse(xhr.responseText);

    var list = document.getElementById('list');
    list.innerHTML = '';

    data.forEach(function(item) {
      var li = document.createElement('li');
      li.textContent = item.name + ' - ' + item.age;
      list.appendChild(li);
    });
  } else {
    console.error('请求失败：' + xhr.status);
  }
};

xhr.onerror = function() {
  console.error('请求失败');
};

xhr.send();

在上面的示例中，我们向服务器请求数据，将响应的JSON数据动态地渲染到页面的列表中。这个示例展示了XMLHttpRequest在页面开发中的实际应用。