XMLHttpRequest对象

XMLHttpReques对象是Ajax实现的一种方案,几乎所有浏览器都提供了这个对象(除IE7以下版本)。

XMLHttpRequest对象是一个构造函数,用于创建XMLHttpRequest实例。

XMLHttpRequest实例提供了一些方法,可以异步地创建、发送、接收、处理HTTP请求。

如何创建XMLHttpRequest实例

创建XMLHttpRequest实例非常简单:

let xhr = new XMLHttpRequest();

如果你希望兼容IE7以下版本,可以这么做:

// 封装一个函数用于创建XMLHttpRequest实例
function creatXHR(){
    let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    return xhr;
}

const xhr = createXHR();
注意:IE7以下版本浏览器使用了ActiveXObject对象。

XMLHttpRequest实现Ajax的完整示例

// 创建XMLHttpRequest实例
let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
// 创建一个HTTP请求
xhr.open('GET', 'http://www.example.org/some.file', true);
// 指定一个状态监听函数
xhr.onreadystatechange = function () { // 状态发生变化时,函数被回调
    if (xhr.readyState === 4) { // xhr.readyState等于4表示请求接收完成
        // 判断HTTP响应状态:
        if (xhr.status === 200) {
            // 成功,输出响应的文本
            console.log(xhr.responseText);
        } else {
            // 失败,输出请求失败的HTTP状态码
            console.log(xhr.status, xhr.statusText);
        }
    } else {
        // HTTP请求还在继续...
    }
};
// 发送HTTP请求
xhr.send();

XMLHttpRequest实例属性

以下是XMLHttpRequest实例的属性列表:

属性名 描述
abort() 如果请求已经发送,调用该方法将立即中止请求。
getAllResponseHeaders() 以字符串的形式返回所有响应头,多个响应头之间用CRLF(回车换行符)隔开。如果没有收到响应,则返回null
getResponseHeader() 以字符串形式返回指定响应头,如果响应尚未收到或响应中不存在该报头,则返回null
open() 初始化一个Ajax请求。
overrideMimeType() 重写由服务器返回的MIME type。
send() 发送请求。如果请求是异步的(默认),那么该方法将在请求发送后立即返回。
setRequestHeader() 设置指定HTTP请求头的值。必须在open()之后、send()之前调用setRequestHeader()这个方法。
onreadystatechange 绑定一个回调函数,当readyState属性发生变化时触发。
onabort 绑定一个回调函数,请求中止时触发。该事件仅被IE支持。
onload 绑定一个回调函数,当请求成功时触发。
onloadend 绑定一个回调函数,在请求成功或者失败时触发;在load、abort、error、timeout事件发生之后触发。
onloadstart 绑定一个回调函数,当请求开始时触发。
ontimeout 绑定一个回调函数,当timeout属性指定的时间已经过去但响应依旧没有完成时触发。
onerror 绑定一个回调函数,当请求因错误失败时触发。注意404等状态码不是error,因为此时响应仍然是成功完成的。
onprogress 绑定一个回调函数,当响应主体正在下载。该函数将重复触发,应注意性能问题。
readyState 只读。一个表示当前请求状态的整数。
response 返回ArrayBuffer、Blob、Document、JavaScript Object、DOMString,具体是哪种类型取决于XMLHttpRequest.responseType的值。其中包含响应体body。
responseText 返回一个DOMString,该DOMString包含对请求的响应,如果请求未成功或尚未发送,则返回null。
responseType 定义响应类型的枚举值。
responseURL 返回响应的序列化URL,如果URL为空,则返回空字符串。
responseXML 返回一个Document,其中包含该请求的响应,如果请求未成功、尚未发送或不能解析为XML或HTML,则返回null。
status 只读。表示当前请求响应状态码。
statusText 只读。表示一个包含响应状态码、状态描述的文本(例如,“200 OK”)。
timeout 表示该请求的最大请求时间(毫秒),超过该时间请求中止。
upload 表示上传过程。
withCredentials 用来指定跨域的请求是否应该使用证书(例如cookie或授权header头)。
channel 对象在执行请求时使用的通道。