Ajax中XMLHttpRequest对象的详细解析

最新推荐文章于 2023-04-15 14:58:50 发布
最新推荐文章于 2023-04-15 14:58:50 发布
阅读量1k 收藏 1
点赞数
分类专栏： Web前端 文章标签： 经验分享 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qd520_1314/article/details/124403387
版权

| responseXML | 服务器的相应，表示为XML，这个对象可以解析为一个DOM |

| status | 服务器的HTTP状态码 |

| statusText | HTTP状态的对应文本 |

[](()1.3.1 XMLHttpRequest属性的详细说明

属性：

  • 即可以使用xhr.xx的当时调用或者进行设置
[](()1.readyState属性（响应状态）

  • readyState属性表示请求/响应过程的当前活动阶段

  • 当XMLHttpRequest对象将一个HTTP请求发送到服务器会经历若干状态，直到请求被处理，然后所创建的XMLHttpRequest的实例对象才会接收一个响应。这样一来，脚本才能正确的相应各种状态，XMLHttpRequest暴露了一个描述对象状态的属性readyState属性，如下表

| readyState的取值 | 描述 |

| — | — |

| 0 | “未初始化”状态，此时XMLHttpRequest 对象已经创建，但是还没有初始化 |

| 1 | 描述一种"发送"状态，此时，代码以及调用了XMLHttpRequest对象的open()方法，并且XMLHttpRequest已经准备号把一个请求发送到服务器 |

| 2 | 描述一种“发送"状态，此时，已经调用了send()方法，把请求发送给服务器端，只是此时还没有收到一个相应 |

| 3 | 描述一种”正在接收“的状态，此时已经接收到HTTP响应头部信息，但是消息体部分还没完全接收结束 |

| 4 | 描述一种”已加载“状态，此时，响应已经被完全接受 |

简洁版：

  • 0：未初始化。以及创建XMLHttpRequest对象，还没调用open()方法

  • 1：启动。已经调用open()方法，但还没有调用send()方法

  • 2：发送。已经调用send()方法，但尚未接收到响应

  • 3：接收。已经接收到响应的部分数据

  • 4：完成。已经接收到响应的全部数据

[](()2.onreadystatechange属性

  • 只要readyState属性的值发送变化，都会触发以此onreadystatechange事件，因此，利用这个事件来检测每次状态发生变化后的readyState的值。

  • 一般清空下，只对readystate值为4的情况做处理，因此此时所有数据都已经就绪；

  • onreadystatechange属性接受一个EventListener值，向该方法只是无论readyState值何时改变，该对象都将激活

const xhr=new XMLHttpRequest();

xhr.open(‘get’,‘/server’,true);

xhr.onreadystatechange=function(){

if(xhr.readyState!==4){

return

}

if(xhr.status>=200&&xhr.status<300){

console.log(xhr.responseText)

}

}

xhr.send(null)

[](()3.timeout属性与ontimeout事件
  • timeout属性表示请求在等待响应多少毫秒轴终止，如果在规定时间内没有接收到响应，那么就会触发ontimeout事件处理程序

const xhr=new XMLHttpRequest()

xhr.open(‘get’,‘/server’,true);

//将超市设置为3秒钟

xhr.timeout=3000;

//请求超时后请求会自动终止，会调用ontimeout事件处理程序

xhr.ontimeout=function(){

//处理代码

console.log(‘请求超时了’)

}

xhr.send(null);

[](()4.overrideMimeType()方法

  • overrideMimeType()方法能够重写服务器返回的MIME类型，从而让浏览器进行不一样的处理。

  • 假如服务器返回的数据类型是text/xml，由于种种原因浏览器解析不成功报错，这时就拿不到数据。为了拿到原始数据，我们可以把MIME类型改成text/plain，这样浏览器就不会去自动解析，从而我们就可以拿到原始文本了。

const xhr = new XMLHttpRequest()

xhr.open(‘get’, ‘/server’, true)

xhr.overrideMimeType(‘text/plain’)

xhr.send(null)

[](()5.responseType属性

  • responseType属性是一个字符串，表示服务器返回数据的类型。使用xhr.response属性来接收

  • 这个属性时可写的，可以在调用open()方法之后，send()方法之间设置这个属性值，告诉服务器返回指定类型的数据，如果responseType设为哦空字符串，等同于默认值text。

  • responseTye属性可以设置格式类型如下

| responseType属性的值 | response属性的数据类型与说明 |

| — | — |

| ”“ | String字符串 默认值，等同于text |

| ”text“ | String字符串 服务器返回文本数据 |

| ”document“ | Document对象 希望返回XML格式数据时使用 |

| ”json“ | javascript对象 IE10/IE11不支持 |

| ”blob“ | Blob对象 服务器返回二进制对象 |

| ”arrayBuffer | ArrayBuffer随心 服务器返沪二进制数组 |

  • 当将reaponseType设置了一个特定类型时，你需要确保服务器返回的类型和你所设置的返回值类型时兼容的。如果两者类型不兼容，那么服务器返回的数据会变成null，及时服务器返回了数据

  • reaponseType只适用于异步请求，如果给同步请求设置了，那么将会抛出InvalidAccessError的异常

//使用responseTyep，以获取一张图片为例

const xhr=new XMLHttpRequest();

xhr.open(‘get’,‘/server/image.png’,true);

xhr.responseType=‘blob’//这里返回二进制类型的数据

xhr.οnlοad=function(){

if(xhr.status>=200&&xhr.status<300){

const blob=this.response

//…

}

}

xhr.send(null)

[](()6.withCredentials属性

  • withCredentials属性是一个布尔值，表示跨域请求是否携带凭据信息（cookie、HTTP认证、以及客户端SSL证明等），默认为false

  • 如果需要跨域Ajax请求发送Cookie，需要withCredentials属性设置为true

  • 如果在同域下配置xhr.withCredentials，无论配置true还是fasle，效果都是一样的

《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 //配置跨域

const xhr = new XMLHttpRequest();

xhr.open(‘get’,‘/server’,true);

xhr.withCredentials=true;

xhr.send(null)

  • 当配置了withCredentials为true时，必须在后端增加response头信息Access-Control-Allow-Origin，且必须指定域名，而不能指定为*。

  • 还需要添加Access-Control-Allow-Origin这个头信息为true；

//后端配置跨域

response.addHeader(“Access-Control-Allow-Origin”, “http://example.com”);

response.addHeader(“Access-Control-Allow-Origin”, true)

[](()7.response属性

  • response属性表示服务器返回的数据，它可以时任何数据类型，比如字符串、对象、二进制对象等待，具体的类型由XMLHttpRequest.responseType属性决定

  • 如果本次请求没有成功或者数据不完整，该属性等于null

const xhr = new XMLHttpRequest()

xhr.onreadystatechange = function () {

if (xhr.readyState === 4) {

console.log(xhr.response)

}

}

[](()8.responseText属性

  • responseText属性返回从服务器接收到的字符串，该属性为只读

  • 当readyState值为0、1、2时，responseText包含一个空字符串。当readyState值为3时（正在接收），响应中包含客户端还没完成的响应信息；当readyState为4时，此时响应已经完全接收，那么responseText包含完整的响应信息

if (xhr.readyState === 4) {

if (xhr.status >= 200 && xhr.status < 300) {

// 处理服务器的返回数据

console.log(xhr.responseText)

}

}

[](()9.responseXML属性

  • 如果相应的内容类型时”text/xml“或者”appliction/xml“，这个属性中将保存着包含响应数据的HTML或者XML文档对象；该属性为只读类型

  • 无论内容类型是什么，响应主体的内容都会保存到responseText属性，而对于非XML数据而言，responseXML属性的值将为null

[](()10.responseURL属性

responseURL属性时字符串，表示发送数据的服务器的地址，如果URL为空，则返回空字符串。如果URL有锚点，则位于URL#后面的内容会被删除。如果服务器端发生跳转，这个属性返回最后实际返回数据 的地址

const xhr=new XMLHttpReauest();

xhr.open(‘GET’,‘http://example.com/test’,true);

xhr.οnlοad=function(){

//返回http://example.com/test

console.log(xhr.responseURL)

}

xhr.send(null)

[](()11.status属性（HTTP状态码）

  • 这个属性描述了HTTP状态码，属性返回一个整数。同时，当且仅当readyState值为3时（正在接收）和readyState=4时，这个属性才可以使用后。

  • 若在reagyState值小于3时试图取status的值，将会引发一个异常

  • status的值有：200表示成功，404表示为找到资源

if (xhr.readyState === 4) {

if (xhr.status >= 200 && xhr.status < 300) {

// 处理服务器的返回数据

}

}

[](()12.statusText属性

  • statusText属性返回一个字符串，表示服务器发送的状态数目。比如ok和 Not Found。在请求发送之前，该属性的值是一个空字符串，如果服务器没有返回状态提示，该属性默认为欸OK。该属性为只读属性

  • 注意：要通过检测status属性来决定下一步的操作，不要依赖statusText，因为statusText在跨浏览器使用时不太可靠

[](()1.4XMLHTTPRequest对象的方法详细说明
[](()1.4.1.XMLHTTPRequest对象的方法

| 方法 | 描述 |

| — | — |

| abort() | 停止当前请求 |

| getAllResponseHeaders() | 把HTTP请求的所有响应首部作为键/值对返回 |

| getResponseHeader(“header”) | 返回指定首部的串值 |

| open(“method”,“url”，async) | 建立与服务器的连接，methos参数可以是GET、POST或者PUT等；url参数时相对的url或者绝对url。 |

| send(content) | 向服务器发送请求 |

| setRequestHeader(“header”,“value”) | 把指定的首部设置提供的值，注意：在设置任何首部之前必须在调用open()方法和send()方法之后设置 |

[](()1.4.2.XMLHttpRequest对象方法的详细使用
[](()1.open()方法-----用于初始化一个请求

open()方法接收三个参数：

  • 第一个参数methos：要发送请求的类型。比如GET、POSE、PYT等。

  • 第二个参数url：请求的URL

  • 第三个参数async：是否异步发送请求的布尔值。true为异步发送请求。

const xhr=new XMLHttpRequest();

xhr.open(‘get’,‘/userInfo’,true)

  • 调用open()

方法并不会真正的发送请求，而是启动一个琼琼以备发送；

[](()2.send()方法-----用于发送HTTP请求

send()方法接收一个参数：

  • 参数data：作为请求主体发送的数据，如果不需要通过请求主体数据（即不传实际的data时），也必须传入null。

  • 参数data可以接收字符串、FromData（From表单）、Blob、ArrayBuffer等类型数据

const xhr=new XMLHTTPRequest();

xhr.send(null);

[](()3. setRequestHeader()方法

  • setRequestHeader()方法可以设置自定义的请求头部信息

  • 接收两个参数：

第一个参数header：头部字段的名称

第二个参数value：头部字段的值

  • 要成功发送请求头部信息。，此方法必须在open()和send()之间调用

const xhr=new XMLHttpRequest();

xhr.open(‘get’,‘/server’,true);

xhr.setRequestHeader(‘MyHeader’,‘MyValue’);

xhr.send(null)

[](()4.abort()方法和onabort事件

  • 在接收响应之前调用abort()方法来取下异步请求。当一个请求被终止后，那么它的readyState属性将被置为0.在终止请求之后，还应该对XMLHttpRequest对象进行解引操作。

  • 当调用abort()之后，会触发onabort事件

//abort()方法

const xhr=new XMLHttpRequest();

xhr.open(‘get’, ‘/server’, true);

xhr.οnabοrt=function(){

console.log(‘请求被终止’);

}

xhr.send(null);

//将会调用我们在上面定义的onabort回调函数

xhr.abort()

[](()1.5 XMLHttpRequest进度事件相关的API
[](()1 onload

  • 当请求成功，接收到完整的现溢数据时触发

  • 可以使用onload事件来替代readtstatechange事件，因为响应接收完毕后将触发onload事件，因此就没有必要检查readyState属性了。只要浏览器接收到服务器的响应，不管其状态如何，都会触发load事件

//使用onload事件来监听服务器的响应

const xhr = new XMLHttpRequest();

//当服务器响应完成时便会触发load事件

xhr.onload = function onload() {

console.log(‘请求数据接收完毕’)

if (xhr.status >= 200 && xhr.status < 300) {

console.log(xhr.responseText)

}

}

xhr.open(‘get’, ‘/server’, true);

xhr.send(null);

高级编程TOP
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAX XMLHttpRequest 对象入门
创造自我、追求无我
01-13 1125
helloAjax  文件代码： hello Ajax!!! html 代码： HelloAJAX JavaScript代码： window.onload = function () { //1、获取 a节点，并添加 onclick 相应事件 document.getElementsByTagName("
FakeXMLHttpRequest:伪造的XMLHttpRequest对象，用于在浏览器中进行测试
05-06
FakeXMLHttpRequest 该库提供了一个伪XMLHttpRequest对象，用于测试基于浏览器的库。 它是从部分提取（并在许多地方进行了简化），并尝试匹配的行为。 为什么不只使用Sinon.JS？ 兴农不仅仅包括假XHR对象，它是在你可能不需要嘲笑，间谍，存根或假的服务器情况下非常有用得多。 如何使用它 除了匹配本机XMLHttpRequest的API外，FakeXMLHttpRequest还添加了一个respond函数，该函数带有三个参数：HTTP响应状态号，标头对象和文本响应主体： // simulate successful response import FakeXMLHttpRequest from 'fake-xml-http-request' ; let xhr = new FakeXMLHttpRequest ( ) ; xhr . respond ( 2
function_XMLHttpRequest构造函数
qq_43260366的博客
07-28 681
作用初始化XMLHttpRequest实例对象；async是否以异步模式获取数据；method请求方法；作用发送http请求；作用初始化一个请求；body请求主体信息。
XMLHttpRequest使用指南大全
吴孔云的博客
01-10 7701
Ajax和XMLHttpRequest 我们通常将Ajax等同于XMLHttpRequest，但细究起来它们两个是属于不同维度的2个概念。 以下是我认为对Ajax较为准确的解释：（摘自what is Ajax） AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating
XMLHttpRequest对象详解
inrg's blog
03-25 5371
【摘 要】 XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础。尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用。 XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础。尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用
XMLHttpRequest的基本使用
HiYulinlin的博客
01-15 5776
XMLHttpRequest的基本使用
解析ajax核心XMLHTTPRequest对象的创建与浏览器的兼容问题
12-10
MLHttpRequest 对象是AJAX功能的核心，要开发AJAX程序必须从了解XMLHttpRequest 对象开始。 了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始，在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法： ...
AJAX客户端说明，XMLHttpRequest对象
12-11
其中客户的XMLHttpRequest对象的封装，就足以让人大饱眼福，在一般的浏览器其都能够运行AJAX。下面我们来学习学习这个咚咚，希望能给更多的人带来帮助。 首先当然是要了解一下浏览器中的XMLHttp对象了： XMLHTTP方法...
AJAX XMLHttpRequest对象创建使用详解
10-14
以上就是关于AJAX中XMLHttpRequest对象创建和使用的基本介绍。理解并熟练运用这些知识，可以帮助开发者构建出更高效、用户体验更好的Web应用程序。在实际开发中，还要注意跨域安全、错误处理等其他方面，确保AJAX...
ajax 入门基础之 XMLHttpRequest对象总结
10-29
**Ajax入门基础之XMLHttpRequest对象总结** Ajax，即异步JavaScript和XML，是一种在无需刷新整个页面的情况下更新部分网页的技术。在Ajax的核心中，XMLHttpRequest（XHR）对象扮演着至关重要的角色，它允许...
XMLHttpRequest 的基本用法
qiaokelibangwo的博客
06-18 3510
XMLHttpRequest是浏览器内置的一个构造函数。所以使用的时候需要 new ​ 作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。 ​ axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装主要的 4 个实现步骤：创建 xhr 对象调用 xhr.open() 函数调用 xhr.send() 函数监听 load 事件 1.3 GET请求携带参数 GET请求
原生AjAX使用需求，代码详解
nilmao的博客
04-01 472
1.GET请求 //1. 创建AJAX对象 const xhr = new XMLHttpRequest(); //2. 设置请求方法和url xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&C=300&=300'); //3. 发送 xhr.send(); //4. 事件绑定 处理服务端返回的结果 /
5.XMLHttpRequest的基本用法
potato123232的博客
11-25 1300
XMLHttpRequest简称xhr，是浏览器提供的Javascript对象。之前我们使用的都是jQuery中的Ajax，现在我们使用原生JS的Ajax。
你真的会使用XMLHttpRequest吗？
weixin_33885676的博客
01-17 3525
看到标题时，有些同学可能会想：“我已经用xhr成功地发过很多个Ajax请求了，对它的基本操作已经算挺熟练了。” 我之前的想法和你们一样，直到最近我使用xhr时踩了不少坑儿，我才突然发现其实自己并不够了解xhr，我知道的只是最最基本的使用。于是我决定好好地研究一番xhr的真面目，可拜读了不少博客后都不甚满意，于是我决定认真阅读一遍W3C的X...
AJAX--XMLHttpRequest & 跨域
郊眠寺
05-18 7018
XMLHttpRequest XMLHttpRequest 是浏览器内置的一个构造函数 作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。 axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装出来的！ 使用 XMLHttpRequest 发起 GET 请求 主要的 4 个实现步骤： 创建 xhr 对象 调用 xhr.open() 函数 调用 xhr.send() 函
JavaScript高级程序设计-网络请求与远程资源
qq_42372534的博客
05-12 510
JavaScript网络请求和远程资源
AJAX：二、XMLHttpRequest实践
CSDN前端知识共享
08-02 1119
XHR(XMLHttpRequest) 实践 简介 XMLHttpRequest(通常缩写XHR) 是一个 API，它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequest 在 AJAX 中被大量使用。 Fetch API 提供了一个获...
AJAX 原理（XMLHttpRequest+Promise+URLSearchParams）
最新发布
qq_50260510的博客
04-15 574
AJAX 原理（XMLHttpRequest+Promise+URLSearchParams）
jQuery AJAX XMLHttpRequest对象PPT
04-27
本PPT主要是关于jQuery AJAX XMLHttpRequest对象的介绍，涵盖了XMLHttpRequest对象的来源、发展历程、属性、方法以及事件等内容。XMLHttpRequest是一种用于在客户端脚本与服务器之间进行数据交互的技术，使得开发者...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值