JavaScript中的AJAX请求

XMLHttpRequest (XHR) 是一种创建 AJAX 请求的 JavaScript API 。它的方法提供了在浏览器和服务器之间发送请求的能力。

使用 XMLHttpRequest（XHR）对象可以与服务器交互。您可以从URL获取数据，而无需让整个的页面刷新。这允许网页在不影响用户的操作的情况下更新页面的局部内容。在 AJAX 编程中，XMLHttpRequest 被大量使用。

尽管名称如此，XMLHttpRequest 可以用于获取任何类型的数据，而不仅仅是XML，它甚至支持 HTTP 以外的协议（包括 file:// 和 FTP）。

如果您的通信流程需要从服务器接收事件或消息数据，请考虑通过 EventSource 接口使用 server-sent events。对于全双工的通信， WebSocket 则可能是更好的选择。

const url = `接口地址`;
let xml = new XMLHttpRequest();
const url = `接口地址`; 
let xml = new XMLHttpRequest();
xml.open('POST', url) //设置请求方式及接口地址
xml.setRequestHeader("token",window.localStorage.getItem('token'));　　//设置请求头，按需使用
xml.send();
xml.onreadystatechange = (e) => {　　//服务端响应后
    if (xml.readyState == 4) {　　//判断客户端是否可以使用   
        if(xml.status == 200){    //表示成功处理请求
            alert("请求成功");
        }
    }
}            

 

下文结构：

　　1.属性

　　2.事件处理器

　　3.方法

 

 

 

1.属性

此接口继承了 XMLHttpRequestEventTarget 和 EventTarget 的属性。

 

XMLHttpRequest.onreadystatechange

　　当 readyState 属性发生变化时调用的 EventHandler。

XMLHttpRequest.readyState

　　返回 一个无符号短整型（unsigned short）数字，代表请求的状态码。

XMLHttpRequest.response

　　返回一个 ArrayBuffer、Blob、Document，或 DOMString，具体是哪种类型取决于 XMLHttpRequest.responseType 的值。其中包含整个响应体（response body）。

XMLHttpRequest.responseText

　　返回一个 DOMString，该 DOMString 包含对请求的响应，如果请求未成功或尚未发送，则返回 null。

XMLHttpRequest.responseType

　　一个用于定义响应类型的枚举值（enumerated value）。

XMLHttpRequest.responseURL

　　返回响应的序列化（serialized）URL，如果该 URL 为空，则返回空字符串。

XMLHttpRequest.responseXML

　　返回一个 Document，其中包含该请求的响应，如果请求未成功、尚未发送或时不能被解析为 XML 或 HTML，则返回 null。

XMLHttpRequest.status

　　返回一个无符号短整型（unsigned short）数字，代表请求的响应状态。

XMLHttpRequest.statusText

　　返回一个 DOMString，其中包含 HTTP 服务器返回的响应状态。与 XMLHTTPRequest.status 不同的是，它包含完整的响应状态文本（例如，"200 OK"）。

 

XMLHttpRequest.timeout

　　一个无符号长整型（unsigned long）数字，表示该请求的最大请求时间（毫秒），若超出该时间，则请求会自动结束。

XMLHttpRequestEventTarget.ontimeout

　　当请求超时调用的 EventHandler。

XMLHttpRequest.upload

　　XMLHttpRequestUpload，代表上传过程。

XMLHttpRequest.withCredentials

　　一个布尔值，用来指定跨域 Access-Control 请求是否应带有授权信息，如 cookie 或授权 header 头。

 

 

2.事件处理器

作为 XMLHttpRequest 实例的属性，所有浏览器都支持 onreadystatechange。

 

后来，许多浏览器实现了一些额外的事件（onload、onerror、onprogress 等）。

 

更多现代浏览器，包括 Firefox，除了可以设置 on* 属性外，也提供标准监听器 addEventListener() API 来监听XMLHttpRequest 事件。

 

function reqListener () {
  console.log(this.responseText);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();

 

 

 

3.方法

XMLHttpRequest.abort()

　　如果请求已被发送，则立刻中止请求。

 

XMLHttpRequest.getAllResponseHeaders()

　　以字符串的形式返回所有用 CRLF 分隔的响应头，如果没有收到响应，则返回 null。

 

XMLHttpRequest.getResponseHeader()

　　返回包含指定响应头的字符串，如果响应尚未收到或响应中不存在该报头，则返回 null。

 

XMLHttpRequest.open()

　　初始化一个请求。该方法只能在 JavaScript 代码中使用，若要在 native code 中初始化请求，请使用 openRequest()。

 

XMLHttpRequest.overrideMimeType()

　　重写由服务器返回的 MIME 类型。

 

XMLHttpRequest.send()

　　发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。

 

XMLHttpRequest.setRequestHeader()

　　设置 HTTP 请求头的值。您必须在 open() 之后、send() 之前调用 setRequestHeader() 方法。