XMLHttpRequest xhr请求

1.属性

① readyState：xhr的状态码。
② status：http状态码。
③ statusText：http状态说明文本。
④ response：响应。（可通过xhr.response获取响应体数据）
⑤ responseType：响应类型。
⑥ responseURL：响应的URL路径。
⑦ responseText：响应的文本数据。
⑧ responseXML：响应的XML数据。

2.异步请求

var xhr = new XMLHttpRequest();
xhr.open("GET", "/bar/foo.txt", true);   //true:表示该请求应该以异步模式执行
xhr.onload = function (e) {   // onl oad:回调函数是在异步请求加载完成后所执行的函数
    if (xhr.readyState === 4) {  //响应已完成；您可以获取并使用服务器的响应了   readyState状态值1,2.3,4
        if (xhr.status === 200) {  // 获取状态码
            console.log(xhr.responseText);
        } else {
            console.error(xhr.statusText);
        }
    }
};
xhr.onerror = function (e) {   // one rror:在请求服务错误时，触发事件
    console.error(xhr.statusText);
    console.error("在请求服务错误时，触发事件");
};
xhr.ontimeout = function () {  //请求超时之后会被触发
    console.log("请求超时之后会被触发！")
};
xhr.onabort = function(){  //取消请求。同abort()方法一同使用，当调用abort()方法时，onabort事件会被触发（仅触发一次）
	console.log("取消请求")
	root.innerHTML = "请求被取消啦！"
};
xhr.onreadystatechange = function () {   // 当 xhr.readystate发生改变后会调用。
    if (xhr.readyState === 1) {  // 请求已经建立，但是还没有发送，还没有调用 send()
        xhr.setRequestHeader("a", 1);
        xhr.setRequestHeader("b", 2);
        //group分组的意思，输出将以会以分组列表的形式输出
        console.group("****************1********************");
        console.log("status", xhr.status);
        console.log("statusText", xhr.statusText);
        console.log("getAllResponseHeaders", xhr.getAllResponseHeaders());
        console.log("response", xhr.response);
        console.groupEnd();
    } else if (xhr.readyState === 2) {  // 请求已发送，正在处理中（通常现在可以从响应中获取内容头）
        console.group("****************2********************");
        console.log("status：", xhr.status);
        console.log("statusText：", xhr.statusText);
        console.log("getAllResponseHeaders：", xhr.getAllResponseHeaders());
        console.log("response", xhr.response);
        console.groupEnd();
    } else if (xhr.readyState === 3) {  // 请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
        console.group("****************3********************");
        console.log("status：", xhr.status);
        console.log("statusText：", xhr.statusText);
        console.log("getAllResponseHeaders：", xhr.getAllResponseHeaders());
        console.log("response", xhr.response);
        console.groupEnd();
    } else if (xhr.readyState === 4) {  // 响应已完成；您可以获取并使用服务器的响应了
        console.group("****************4********************");
        console.log("status：", xhr.status);
        console.log("statusText：", xhr.statusText);
        console.log("getAllResponseHeaders：", xhr.getAllResponseHeaders());
        console.log("response", xhr.response);
        console.groupEnd();
    }
}
xhr.send(null); //启动了请求。只要请求的状态发生变化，就会调用回调程序。

3.同步请求

var request = new XMLHttpRequest();
request.open("GET", "http://www.mozilla.org/", false);
request.send(null);
if (request.status === 200) {
  console.log(request.responseText);
}