【精简版】XMLHttpRequest 详解

程序员钟霖

已于 2024-07-15 22:53:42 修改

阅读量958

点赞数 28

分类专栏： Web前端技术学习文章标签：前端网络 javascript ajax http

于 2024-07-07 19:49:58 首次发布

本文链接：https://blog.csdn.net/weixin_46485638/article/details/140226219

版权

Web前端技术学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

① open(method,url,async)

③ 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 表示同步请求。

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

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