XMLHttpRequest对象使用详解

XMLHttpRequest（XHR）是一种浏览器提供的JavaScript API，用于在后台与服务器进行数据交换。XHR可以发送HTTP请求和接收HTTP响应，并通过异步方式处理响应，从而实现无需重新加载整个页面的局部页面更新，这是Ajax技术的核心。

下面是XMLHttpRequest的详细介绍：

1.创建XHR对象

在JavaScript中，可以通过创建XMLHttpRequest对象来与服务器进行通信。创建XHR对象的方式有两种：

// 创建XHR对象方式一：使用构造函数
let xhr = new XMLHttpRequest();

// 创建XHR对象方式二：使用ActiveXObject（兼容旧版本IE）
let xhr;
if (window.ActiveXObject) {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
} else {
  xhr = new XMLHttpRequest();
}

2.发送请求

使用XHR对象的open()方法指定请求的方法、URL和是否异步处理，然后使用send()方法发送请求。send()方法可以接收一个可选参数，用于传递请求数据。如果请求方式为POST，则需要将请求数据作为参数传递给send()方法。

1 2	xhr.open(method, url, async); xhr.send([data]);

method：请求方法，通常为GET或POST。
url：请求的URL地址。
async：是否异步处理请求，通常为true。
data：要发送的请求数据，仅对POST请求有效。

3.处理响应

使用XHR对象的onreadystatechange事件或者addEventListener()方法注册事件监听器，当响应数据返回时，XHR对象将触发readystatechange事件，事件处理函数可以使用XHR对象的以下属性和方法来处理响应：

readyState：XHR对象的状态，有以下值：
- 0：未初始化。表示XHR对象已创建但未调用open()方法。
- 1：已打开。表示已调用open()方法，但未调用send()方法。
- 2：已发送。表示已调用send()方法，但未接收到响应。
- 3：正在接收。表示正在接收响应数据，但未完成。
- 4：已完成。表示已完成接收响应数据。
status：HTTP响应状态码，通常为200表示成功。
responseText：HTTP响应数据，通常为字符串。
responseXML：HTTP响应数据，通常为XML DOM对象。
getAllResponseHeaders()：获取所有响应头。
getResponseHeader(header)：获取指定的响应头。

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 处理响应数据
    console.log(xhr.responseText);
  }
};

4.取消请求

使用XHR对象的abort()方法可以取消正在处理的请求。取消请求后，XHR对象将触发readystatechange事件，并将readyState属性设置为4和status属性设置为0。

1	xhr.abort();

需要注意的是，XHR对象只能与同域的服务器进行通信，如果需要与其他域的服务器进行通信，可以使用CORS（跨域资源共享）或JSONP（JSON with Padding）等技术。

5.CORS

CORS是一种允许跨域访问的标准。通过在服务器设置响应头，可以允许指定的域名访问服务器资源。在客户端使用XHR对象发送跨域请求时，需要将withCredentials属性设置为true，表示允许发送身份验证信息和cookie。

1	xhr.withCredentials = true;

6.JSONP

JSONP是一种利用<script>标签可以跨域加载资源的技术。在客户端使用XHR对象发送JSONP请求时，需要将请求地址包装成一个回调函数的调用，并将回调函数名作为查询参数发送到服务器。服务器返回的数据将作为回调函数的参数传递回来，从而实现跨域数据传输。

function jsonp(url, callback) {
  let script = document.createElement("script");
  script.src = url + "?callback=" + callback;
  document.body.appendChild(script);
}

function handleResponse(data) {
  // 处理响应数据
  console.log(data);
}

jsonp("http://example.com/data", "handleResponse");

以上就是XMLHttpRequest的详细介绍，它是实现Ajax技术的重要组成部分。

编外计划 - 日志

To be or not to be,--that is question.

XMLHttpRequest对象使用详解