XMLHttpRequest xhr请求

发布时间 2023-09-12 10:31:50作者: 守护式等待

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) {   // onload:回调函数是在异步请求加载完成后所执行的函数
    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) {   // onerror:在请求服务错误时,触发事件
    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);
}