代码实现Ajax中的属性和用法
1. 1.js
let xhr=new XMLHttpRequest();
//xhr.setRequestHeader('aaa','xxx');//1.js:2 Uncaught DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED. 设置请求头信息必须在OPEN之后和SEND之前
xhr.open('get','temp.xml?_='+Math.random(),true);
//xhr.setRequestHeader('cookie','汉字');//Refused to set unsafe header "cookie"//拒绝设置不安全的请求头的属性名"cookie",并且请求头部的内容不得出现汉字
//设置请求头
xhr.setRequestHeader('aaa','xxx');
//设置超时
xhr.timeout=100000;//设置超时
xhr.ontimeout= ()=> {
console.log('当前请求已经超时');
xhr.abort();//把当前请求强制中断
}
xhr.onreadystatechange=()=>{
let {readyState:state,status}=xhr;
//说明请求数据成功了
if(!/^(2|3)\d{2}$/.test(status))return;
//在状态为2的时候就可以获取响应头的信息了
if(state===2){
let headerAll=xhr.getAllResponseHeaders(),//headerAll是个字符串
serverDate=xhr.getResponseHeader('date');//获取的服务器时间是格林尼治时间(相比与北京时间差了8个小时),通过new Date()可以把格林尼治时间转换位北京时间
console.log(headerAll, new Date(serverDate));//new Date(serverDate)放指定时间,就变成了标准的北京时间
return;
}
//在状态为4的时候响应主体内容就已经回来了
if(state===4){
let valueText=xhr.responseText,//获取到的结果一般都是JSON字符串(可以使用JSON.parse()把JSON格式的字符串转化为JSON格式的对象)
valueXML=xhr.responseXML;//获取的结果是XML格式的数据(可以通过XML的一些常规操作获取存储的指定信息) 如果服务器返回的是XML文档,responseText获取的结果是字符串而responseXML获取的是标准XML文档
console.log(valueText, valueXML);
}
};
xhr.send('name=lg&age=28&sex=man');
2. 1-Ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1-Ajax</title>
</head>
<body>
<script src="js/1.js">
</script>
</body>
</html>
3. temp.json
[
{
"name":"张三",
"age":25,
"score":{
"English":98,
"Math":89,
"Chinese":92
}
},
{
"name":"李四",
"age":20,
"score":{
"English":89,
"Math":91,
"Chinese":99
}
}
]
4. temp.xml
<?xml version="1.0" encoding="utf-8"?>
<root>
<student>
<name>张三</name>
<age>25</age>
<score>
<english>90</english>
<math>100</math>
<chinese>98</chinese>
</score>
</student>
<student>
<name>李四</name>
<age>20</age>
<score>
<english>78</english>
<math>80</math>
<chinese>90</chinese>
</score>
</student>
</root>
复制代码