当使用XMLHttpRequest()对象进行Ajax请求时,我们可以使用以下属性和方法来处理响应数据和请求超时:
- responseText、response、responseType
- timeout属性和timeout事件
- withCredentials
1,responseText属性
responseText 属性用于获取文本格式的响应数据,如HTML、XML、JSON等。如果设置了 responseType 为 json,则无法使用该属性,因为 responseType 为 json 时响应数据会自动解析为 JavaScript 对象。
xhr.responseText
2,response属性
response 属性可以获取任意格式的响应数据,包括文本、JSON、XML 等。如果响应数据为 JSON 格式,则可以在设置 responseType 为 json 后直接访问 response 属性获取 JavaScript 对象。
xhr.response
3,responseType属性
responseType 属性用于指定期望的响应数据类型。默认值为 “text”,表示期望的响应类型为文本格式。可以设置为 json、document等。
xhr.responseType = 'json'
4,timeout属性和ontimeout事件
timeout 属性用于设置请求超时时间,单位为毫秒。如果在指定的时间内没有接收到响应,则会触发 ontimeout 事件。
xhr.timeout = 1000
//一般写在open()方法之后、send()方法之前
xhr.ontimeout = function() { console.log('请求超时') }
5,withCredentials属性
withCredentials 属性用于控制是否允许在跨域请求时携带身份凭证,如 Cookie 和 HTTP 认证信息。
默认情况下,跨域请求是不会携带身份凭证的,如果需要在跨域请求时携带身份凭证,则需要将该属性设置为 true。
xhr.withCredentials = true
TIP
- 需要注意的是,如果请求是同源请求,则不能设置 withCredentials 属性,否则会报错(演示代码里请求的text.json文件与本文件在同一目录下打开的服务器,因此是请求是同源的)
- 同时,如果服务端没有设置允许跨域请求时携带身份凭证的配置,则即使设置了该属性也不会生效。
6,本节联系代码
<script>
// 1,创建xhr对象用于发送ajax,此时的readyState状态为0
const xhr =new XMLHttpRequest();
//4,添加响应的监听事件;每一次eadyState值得改变都会触发一次这个函数
xhr.onreadystatechange=function(){
// 响应过程readyState状态为3,响应结束为4
if(xhr.readyState !== 4) return;
if((xhr.status >=200 && xhr.status<300)||xhr.status ===304){//表示成功
// 6,xhr.responseText属性,只能接收文本类型的返回值,基本被response代替了
// console.log(xhr.responseText);//因为xhr.responseType设置了json,这个属性接收数据会报错
//7,此时接收到的是JSON格式的字符串,xhr.response可以接收任意类型的数据格式
console.log(xhr.response)
// console.log(JSON.parse(xhr.response));//如果没有设置xhr.responseType='json',则需要手动转化
};
};
// 2,准备发送ajax,此时的readyState的状态为1
let url ='./text.json';
xhr.open("get",url);//传入三个参数,第一个为请求方式、第二个为请求的url地址、第三个是否开启同步一般不传
//8,xhr.timeout属性,设置超时时间,不设置默认不会超时;通常配合timeout时间使用,也就是超时后需要进一步处理什么
xhr.timeout=1000;//时间为纯数字,单位为ms;
xhr.ontimeout=function(){
console.log("响应超时了!!!")
};
//3.发送请求,此时readyState的状态为2
xhr.send()//如为get请求,则无需传递参数,传了也不会处理;如果为post请求,则send传递的数据会携带在请求体中
//!!!5,xhr.responseType属性,默认是text文本;如果设置为json数据格式,当响应的数据为json格式时会自动解析成对象
xhr.responseType='json';
//9,xhr.
xhr.withCredentials=true;
//是否允许跨域请求时携带cookie,跨域默认是不携带的,当然即使设置了true,最终是否能携带给服务器还需要后端进行配置配合
//如果同域请求设置这个属性会报错!
</script>