【精简版】XMLHttpRequest 详解

大家好，欢迎来到IT知识分享网。

目录

一、概念

二、请求的发送与取消

1、XHR 发送 GET 请求

2、XHR 发送 POST 请求

3、手动取消请求

三、请求超时与网络异常

1、请求超时的处理

2、网络异常的处理

四、知识点清单

1、XHR 对象的属性

① readyState (只读)

② status (只读)

③ statusText (只读)

④ response (只读)

⑤ responseType (在请求发送前可写)

⑥ timeout (可写)

2、XHR 对象的事件

① onreadystatechange

② ontimeout

③ onerror

3、XHR 对象的方法

① open(method,url,async)

② setRequestHeader(header, value)

③ send()

④ abort()

⑤ getAllResponseHeaders()

一、概念

        XMLHttpRequest 是一组 API 函数集，可被 JavaScript、JScript、VBScript 以及其它 web 浏览器内嵌的脚本语言调用。XMLHttpRequest 通过 HTTP 在浏览器和 web 服务器之间收发 XML 或其它数据， 其最大的好处在于可以动态地更新网页，而无需重新从服务器读取整个网页，也不需要安装额外的插件。

二、请求的发送与取消

1、XHR 发送 GET 请求

//1.通过构造函数 XMLHttpRequest() 实例化一个 XMLHttpRequest 对象 let xhr = new XMLHttpRequest(); //2.为 XMLHttpRequest 实例对象设置参数 //open(method,url,async)方法用于初始化请求，其中参数 method 必填，用于指定请求类型，如 GET、POST、PUT、DELETE 等； //参数 url 必填，用于指定请求地址；参数 async 选填，用于指定请求方式，true 表示异步请求(默认值)，false 表示同步请求。 xhr.open('GET','http://127.0.0.1:8080/getData?param1=value1&param2=value2'); //3.发送 HTTP 请求到服务器 //如果open()方法的参数 async 设置为 true，则send()方法会在请求发送后立即返回；如果参数 async 设置为 false，则send()方法直到响应到达后才会返回。 xhr.send(); //4.为 XMLHttpRequest 实例对象绑定事件监听，用于处理服务器返回的结果 //当属性 readyState 的值发生改变时，事件 onreadystatechange 触发 xhr.onreadystatechange = function () { //readyState 属性(只读)用于表示 XMLHttpRequest 实例对象当前所处的状态，0表示未初始化，此时实例对象被创建，但未调用open()方法； //1表示准备发送，此时已经调用open()方法，但尚未调用send()方法；2表示已发送，此时已经调用send()方法，但尚未收到响应； //3表示正在接收，此时已经接收到 HTTP 响应的头部信息，但消息体部分还没有完全接收；4表示完成响应，此时已收到所有响应数据。 if(xhr.readyState === 4 && xhr.status === 200) { //status 属性(只读)用于表示服务器响应的 HTTP 状态码，如200表示成功，404表示未找到等。 console.log(xhr.status); //statusText 属性(只读)用于表示服务器响应的状态描述，如"OK"、"Not Found"等。 console.log(xhr.statusText); //getAllResponseHeaders()方法以一个字符串形式返回所有的响应头，且每个响应头独占一行。 console.log(xhr.getAllResponseHeaders()); //response 属性(只读)用于表示服务器的响应体信息。 console.log(xhr.response); //responseType 属性(在请求发送前可写)用于表示服务器响应体的数据类型，"" (默认值)表示字符串、text 表示字符串、 //arraybuffer 表示 ArrayBuffer 对象、blob 表示 Blob 对象、document 表示 Document 对象(XML/HTML)、json 表示 JSON 对象。 console.log(xhr.responseType); } }

2、XHR 发送 POST 请求

//1.通过构造函数 XMLHttpRequest() 实例化一个 XMLHttpRequest 对象 let xhr = new XMLHttpRequest(); //2.为 XMLHttpRequest 实例对象设置参数 xhr.open('POST','http://127.0.0.1:8080/saveData'); //3.为 XMLHttpRequest 实例对象设置请求头 //setRequestHeader(header, value)方法用于设置 HTTP 请求头，其中参数 header 用于指定标头名称，参数 value 用于指定标头值。 //此方法必须在open()方法和send()之间调用，且多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。 //标头 Content-Type 用于告诉服务器请求体的数据类型是什么，application/json 表示请求体是 JSON 格式的数据，application/x-www-form-urlencoded 表示请求体是表单数据。 //xhr.setRequestHeader('Content-Type','application/json'); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //4.发送 HTTP 请求到服务器 //xhr.send(JSON.stringify({ param1:value1,param2:value2 })); //JavaScript 内置对象 JSON 的方法stringify()，用于将 JavaScript 对象转换成 JSON 格式的字符串。 xhr.send('param1=value1&param2=value2'); //5.为 XMLHttpRequest 实例对象绑定事件监听，用于处理服务器返回的结果 xhr.onreadystatechange = function () { if(xhr.readyState === 4 && xhr.status === 200) { //假设响应体为 JSON 格式的字符串，此时我们可以通过 JavaScript 内置对象JSON的方法parse()将其转换成 JavaScript 对象。 console.log(JSON.parse(xhr.response)); } }

3、手动取消请求

//abort()方法用于终止当前请求，同时将 XMLHttpRequest 实例对象的状态 readyState 重置为 0。 xhr.abort();

三、请求超时与网络异常

1、请求超时的处理

//1.通过构造函数 XMLHttpRequest() 实例化一个 XMLHttpRequest 对象 let xhr = new XMLHttpRequest(); //2.为 XMLHttpRequest 实例对象设置超时时间 //timeout 属性(可写)用于表示当前请求的最大请求时间，单位为毫秒，如果请求在该时间内未结束则会自动终止，同时触发超时事件。 xhr.timeout = 2000; //2.为 XMLHttpRequest 实例对象绑定超时事件 xhr.ontimeout = function () { alert("请求超时，请重试!"); } //3.为 XMLHttpRequest 实例对象设置参数 xhr.open('GET','http://127.0.0.1:8080/getData?param1=value1&param2=value2'); //4.发送 HTTP 请求到服务器 xhr.send(); //5.为 XMLHttpRequest 实例对象绑定事件监听，用于处理服务器返回的结果 xhr.onreadystatechange = function () { if(xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.response); } }

2、网络异常的处理

//1.通过构造函数 XMLHttpRequest() 实例化一个 XMLHttpRequest 对象 let xhr = new XMLHttpRequest(); //2.为 XMLHttpRequest 实例对象绑定网络异常事件 xhr.onerror = function () { alert("网络异常，请稍后重试!"); } //3.为 XMLHttpRequest 实例对象设置参数 xhr.open('GET','http://127.0.0.1:8080/getData?param1=value1&param2=value2'); //4.发送 HTTP 请求到服务器 xhr.send(); //5.为 XMLHttpRequest 实例对象绑定事件监听，用于处理服务器返回的结果 xhr.onreadystatechange = function () { if(xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.response); } }

四、知识点清单

1、XHR 对象的属性

① readyState (只读)

含义：用于表示 XMLHttpRequest 实例对象当前所处的状态。

说明：0 表示未初始化，此时实例对象被创建，但未调用open()方法；1 表示准备发送，此时已经调用open()方法，但尚未调用send()方法；2 表示已发送，此时已经调用send()方法，但尚未收到响应；3 表示正在接收，此时已经接收到 HTTP 响应的头部信息，但消息体部分还没有完全接收；4 表示完成响应，此时已收到所有响应数据。

② status (只读)

含义：用于表示服务器响应的 HTTP 状态码，如 200 表示成功，404 表示未找到等。

③ statusText (只读)

含义：用于表示服务器响应的状态描述，如 “OK”、”Not Found” 等。

④ response (只读)

含义：用于表示服务器的响应体信息。

⑤ responseType (在请求发送前可写)

含义：用于表示服务器响应体的数据类型。

说明：“” (默认值)表示字符串、text 表示字符串、arraybuffer 表示 ArrayBuffer 对象、blob 表示 Blob 对象、document 表示 Document 对象(XML/HTML)、json 表示 JSON 对象。

⑥ timeout (可写)

含义：用于表示当前请求的最大请求时间，单位为毫秒。

说明：如果请求在该时间内未结束则会自动终止，同时触发超时事件。

2、XHR 对象的事件

① onreadystatechange

说明：当属性 readyState 的值发生改变时，事件 onreadystatechange 触发。

② ontimeout

说明：如果请求在 timeout 设置的最大请求时间内未结束，则当前请求自动终止，同时触发 ontimeout 事件。

③ onerror

说明：在请求过程中，如果发生网络异常则会触发 onerror 事件。

3、XHR 对象的方法

① open(method,url,async)

含义：用于初始化请求。

说明：参数 method 必填，用于指定请求类型，如 GET、POST、PUT、DELETE 等；参数 url 必填，用于指定请求地址；参数 async 选填，用于指定请求方式，true 表示异步请求(默认值)，false 表示同步请求。

② setRequestHeader(header, value)

含义：用于设置 HTTP 请求头。

说明：参数 header 用于指定标头名称，参数 value 用于指定标头值。此方法必须在open()方法和send()之间调用，且多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。标头Content-Type 用于告诉服务器请求体的数据类型是什么，application/json 表示请求体是 JSON 格式的数据，application/x-www-form-urlencoded 表示请求体是表单数据。

③ send()

含义：用于发送 HTTP 请求。

说明：如果open()方法的参数 async 设置为 true，则send()方法会在请求发送后立即返回；如果参数 async 设置为 false，则send()方法直到响应到达后才会返回。

④ abort()

含义：用于终止当前请求，同时将 XMLHttpRequest 实例对象的状态 readyState 重置为 0。

⑤ getAllResponseHeaders()

含义：以一个字符串形式返回所有的响应头，且每个响应头独占一行。