JavaScript 复习之 XMLHttpRequest 对象

XMLHttpRequest自己是一个构造函数

let xhr = new XMLHttpRequest();
复制代码

一旦创建实例就可使用open()方法发出 HTTP 请求。

xhr.open('GET','http://www.example.com/page.php', true);
复制代码

而后指定回调函数，监听通讯状态（readyState属性）的变化。

xhr.onreadyStatechange = handleStateChange;
function handleStateChange(){
    
    //...
}
复制代码

注意，AJAX 只能向同源网址（协议、域名、端口都相同）发出 HTTP 请求，若是发出跨域请求，就会报错.

下面是 XMLHttpRequest对象的简单用法的完整例子

let xhr = new XMLHttpRequest();

xhr.onreadyStatechange = function(){
    //通讯成功时，状态值为4
    if(xhr.readyState === 4){
        if(xhr.status === 200){
            console.log(xhr.responseText);
        }else{
            console.error(xhr.statusText);
        }
    }
};

xhr.onerror = function(e){
    console.error(xhr.statusText);
};

xhr.open('GET','/endpoint',true);
xhr.send(null);
复制代码

1、XMLHttpRequest 的实例属性

XMLHttpRequest.readyState

XMLHttpRequest.readyState返回一个整数，表示实例对象的当前状态。该属性只读。它可能返回如下值。

• 0，表示 XMLHttpRequest 实例已经生成，可是实例的open()方法尚未被调用。

• 1，表示open()方法已经调用，可是实例的send()方法尚未调用，仍然可使用实例的setRequestHeader()方法，设定 HTTP 请求的头信息。

• 2，表示实例的send()方法已经调用，而且服务器返回的头信息和状态码已经收到。

• 3，表示正在接收服务器传来的数据体（body 部分）。这时，若是实例的responseType属性等于text或者空字符串，responseText属性就会包含已经收到的部分信息。

• 4，表示服务器返回的数据已经彻底接收，或者本次接收已经失败。

XMLHttpRequest.onreadystatechange

属性指向一个监听函数。readystatechange事件发生时（实例的readyState属性变化），就会执行这个属性。

XMLHttpRequest.response

表示服务器返回的数据体（即 HTTP 回应的 body 部分）。它多是任何数据类型，好比字符串、对象、二进制对象等等，具体的类型由XMLHttpRequest.responseType属性决定。该属性只读。

XMLHttpRequest.responseType

属性是一个字符串，表示服务器返回数据的类型

XMLHttpRequest.responseText

属性返回从服务器接收到的字符串，该属性为只读。

XMLHttpRequest.responseXML

属性返回从服务器接收到的 HTML 或 XML 文档对象，该属性为只读。

XMLHttpRequest.responseURL

属性是字符串，表示发送数据的服务器的网址。

XMLHttpRequest.status，XMLHttpRequest.statusText

XMLHttpRequest.status属性返回一个整数，表示服务器回应的 HTTP 状态码。通常来讲，若是通讯成功的话，这个状态码是200；若是服务器没有返回状态码，那么这个属性默认是200。请求发出以前，该属性为0。该属性只读。

• 200, OK，访问正常

• 301, Moved Permanently，永久移动

• 302, Moved temporarily，暂时移动

• 304, Not Modified，未修改

• 307, Temporary Redirect，暂时重定向

• 401, Unauthorized，未受权

• 403, Forbidden，禁止访问

• 404, Not Found，未发现指定网址

• 500, Internal Server Error，服务器发生错误

XMLHttpRequest.timeout，XMLHttpRequestEventTarget.ontimeout

XMLHttpRequest.timeout属性返回一个整数，表示多少毫秒后，若是请求仍然没有获得结果，就会自动终止。若是该属性等于0，就表示没有时间限制。

XMLHttpRequestEventTarget.ontimeout属性用于设置一个监听函数，若是发生 timeout 事件，就会执行这个监听函数。

XMLHttpRequest.withCredentials

XMLHttpRequest.withCredentials属性是一个布尔值，表示跨域请求时，用户信息（好比 Cookie 和认证的 HTTP 头信息）是否会包含在请求之中，默认为false，即向example.com发出跨域请求时，不会发送example.com设置在本机上的 Cookie（若是有的话）。

XMLHttpRequest.upload

不只能够发送请求，还能够发送文件，这就是 AJAX 文件上次。发送文件后，经过该属性能够获得一个对象，经过观察这个对象，能够得知上传的进展，主要方法就是监听这个对象的各类事件：loadstart、loadend、load、abort、error、progress、timeout。

2、XMLHttpRequest 的实例方法

XMLHttpRequest.open()

它一共能够接受五个参数。

void open(
   string method,
   string url,
   optional boolean async,
   optional string user,
   optional string password
);
复制代码

• method：表示 HTTP 动词方法，好比GET、POST、PUT、DELETE、HEAD等。

• url: 表示请求发送目标 URL。

• async: 布尔值，表示请求是否为异步，默认为true。若是设为false，则send()方法只有等到收到服务器返回告终果，才会进行下一步操做。该参数可选。因为同步 AJAX 请求会形成浏览器失去响应，许多浏览器已经禁止在主线程使用，只容许 Worker 里面使用。因此，这个参数轻易不该该设为false。

• user：表示用于认证的用户名，默认为空字符串。该参数可选。

• password：表示用于认证的密码，默认为空字符串。该参数可选。

XMLHttpRequest.send()

方法用于实际发出 HTTP 请求。它的参数是可选的，若是不带参数，就表示 HTTP 请求只有一个 URL，没有数据体，典型例子就是 GET 请求；若是带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是 POST 请求。

下面是发送 POST 请求的例子。

var xhr = new XMLHttpRequest();
var data = 'email='
  + encodeURIComponent(email)
  + '&password='
  + encodeURIComponent(password);

xhr.open('POST', 'http://www.example.com', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(data);
复制代码

注意，全部 XMLHttpRequest 的监听事件，都必须在send()方法调用以前设定。

XMLHttpRequest.setRequestHeader()

用于设置浏览器发送的 HTTP 请求的头信息。方法必须在open()以后，send()以前调用。

该方法接受两个参数。第一个参数是字符串，表示头信息的字段名，第二个参数是字段值。

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Content-Length', JSON.stringify(data).length);
xhr.send(JSON.stringify(data));
复制代码

XMLHttpRequest.overrideMimeType()

方法用来指定 MIME 类型，覆盖服务器返回的真正的 MIME 类型，从而让浏览器进行不同的处理。举例来讲，服务器返回的数据类型是text/xml，因为种种缘由浏览器解析不成功报错，这时就拿不到数据了。为了拿到原始数据，咱们能够把 MIME 类型改为text/plain，这样浏览器就不会去自动解析，从而咱们就能够拿到原始文本了。

注意，该方法必须在send()方法以前调用。

XMLHttpRequest.getResponseHeader()

方法返回 HTTP 头信息指定字段的值，若是尚未收到服务器回应或者指定字段不存在，返回null。该方法的参数不区分大小写。

XMLHttpRequest.getAllResponseHeaders()

方法返回一个字符串，表示服务器发来的全部 HTTP 头信息。

XMLHttpRequest.abort()

方法用来终止已经发出的 HTTP 请求。调用这个方法之后，readyState属性变为4，status属性变为0

3、XMLHttpRequest 实例的事件

readyStateChange 事件

这个上面说过了

progress 事件

上传文件时，XMLHttpRequest 实例对象自己和实例的upload属性，都有一个progress事件，会不断返回上传的进度。