5.Ajax中的其它常用属性和方法?

最新推荐文章于 2022-05-06 17:46:30 发布

weixin_33946605

最新推荐文章于 2022-05-06 17:46:30 发布

阅读量143

点赞数

文章标签： json

原文链接：https://juejin.im/post/5bddb9735188251707502129

版权

代码实现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>
复制代码

weixin_33946605

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5.Ajax中的其它常用属性和方法?

代码实现Ajax中的属性和用法1. 1.jslet xhr=new XMLHttpRequest();//xhr.setRequestHeader('aaa','xxx');//1.js:2 Uncaught DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's s...
复制链接

扫一扫