1.所有现代浏览器都通过 XMLHttpRequest 构造函数原生支持 XHR 对象:
let xhr = new XMLHttpRequest();
2.使用 XHR 对象首先要调用 open()方法。调用 open()不会实际发送请求,只是为发送请求做好准备
// 1.请求方式
// 2.url
// 3.是否异步
xhr.open("get", "example.php", false);
3.要发送定义好的请求,必须像下面这样调用 send()方法:send()方法接收一个参数,是作为请求体发送的数据。如果不需要发送请求体,则必须传 null,因为这个参数在某些浏览器中是必需的。调用 send()之后,请求就会发送到服务器
xhr.send(null);
4.响应数据
- responseText:作为响应体返回的文本。
- responseXML:如果响应的内容类型是"text/xml"或"application/xml",那就是包含响应 数据的 XML
DOM 文档。 - status:响应的 HTTP 状态。
- statusText:响应的 HTTP 状态描述。
XHR 对象有一个 readyState 属性,表示当前处在请求/响应过程的哪个阶段。每次 readyState 从一个值变成另一个值,都会触发 readystatechange 事件。这个属性有如下可能的值。
- 0:未初始化( Uninitialized)。尚未调用 open()方法。
- 1:已打开( Open)。已调用 open()方法,尚未调用 send()方法。
- 2:已发送( Sent)。已调用 send()方法,尚未收到响应。
- 3:接收中( Receiving)。已经收到部分响应。
- 4:完成( Complete)。已经收到所有响应,可以使用了。
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
console.log(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
xhr.open("get", "https://www.dmagic.cn/json/?jsonid=1460", true);
xhr.send(null);