| — | — |
| onreadstatechange | 每个状态改变时都会触发这个事件的处理处理程序,通常会调用一个JavaScript函数 |
| readyState | 请求的状态(0-4) |
| responseText | 服务器的相应,表示为一个串 |
| 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,效果都是一样的
//配置跨域
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);
小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
最后
javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频**
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
[外链图片转存中…(img-QxmV0Tw8-1710754327863)]
最后
javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-Z6VKVwDH-1710754327864)]
[外链图片转存中…(img-XTTFKZtj-1710754327864)]