AJAX，全称Asynchronous JavaScript and XML，即异步的JavaScript和XML。它可以使Web应用程序实现异步通信，避免页面刷新，提升用户体验。

XMLHttpRequest对象是实现AJAX的核心，它是一个在JavaScript中被预定义的对象，用于与服务器异步交换数据。下面我们来详细讲解XMLHttpRequest对象的创建和使用。

XMLHttpRequest对象创建

创建XMLHttpRequest对象，可以使用以下代码：

var xhr = new XMLHttpRequest();

XMLHttpRequest对象方法

XMLHttpRequest对象提供了多个有用的方法，以下是其中一部分：

open()

open()方法用于指定请求的类型（GET、POST等）、URL地址和是否异步处理请求。示例代码如下：

xhr.open('GET', 'http://example.com/test', true);

send()

send()方法用于发送请求。如果是POST请求，需要发送数据，send()方法需要传入数据参数。示例代码如下：

xhr.send('data=' + encodeURIComponent('hello world'));

abort()

abort()方法用于停止当前请求。示例代码如下：

xhr.abort();

XMLHttpRequest对象属性

XMLHttpRequest对象还提供了多个属性，以下是其中一部分：

onreadystatechange

onreadystatechange属性用于指定处理状态变化的回调函数。示例代码如下：

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};

readyState

readyState属性表示请求的当前状态，它有以下几个取值：

• 0：未初始化，尚未调用open()方法
• 1：已打开，已经调用open()方法，但尚未调用send()方法
• 2：已发送，已经调用send()方法，但尚未接收到响应
• 3：正在接收，已经接收到部分响应数据
• 4：已完成，已经接收到全部响应数据

status

status属性表示响应的HTTP状态码，它有以下几个取值：

• 200：OK
• 404：未找到页面
• 500：服务器内部错误

示例说明

下面提供两个XMLHttpRequest对象的使用示例。

GET请求示例

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.open('GET', 'http://example.com/test', true);
xhr.send();

说明：上面的代码创建一个XMLHttpRequest对象，指定请求类型为GET，请求URL为http://example.com/test，并且设置为异步处理。当请求状态变化时，打印响应结果。

POST请求示例

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.open('POST', 'http://example.com/test', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('data=' + encodeURIComponent('hello world'));

说明：上面的代码创建一个XMLHttpRequest对象，指定请求类型为POST，请求URL为http://example.com/test，并且设置为异步处理。同时，设置请求头Content-Type为application/x-www-form-urlencoded，传入数据参数data=hello%20world。当请求状态变化时，打印响应结果。

以上就是对XMLHttpRequest对象创建使用详解的完整攻略。

本文链接：http://task.lmcjl.com/news/8812.html