Ajax

最新推荐文章于 2024-11-11 22:05:17 发布

Smile-Agaii

最新推荐文章于 2024-11-11 22:05:17 发布

阅读量99

点赞数

文章标签： ajax javascript

本文链接：https://blog.csdn.net/weixin_49862515/article/details/114240022

版权

Ajax

Ajax 特点

优点
- 不需要插件支持
- 用户体验极佳
- 提升Web程序的性能
- 减轻服务器和宽带的负担
缺点
- 前进、后退的功能被破坏
- 搜索引擎的支持度不够
- 不同版本的浏览器度 XMLHttpRequest 对象支持度不足（比如IE5之前）

Ajax 运行原理

Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览的情况下，局部更新页面数据，从而提高用户体验

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OKKI3Qqb-1614517739721)(C:%5CUsers%5C15835%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200908152006184.png)]

Ajax 实现步骤

1.创建Ajax 对象

var xhr = new XMLHttpRequest();

告诉Ajax 请求地址以及请求方法
- open 方法有三个参数
  
  ①请求的method（请求方式，例：get、post）
  
  ②请求的url
  
  ③是否异步，默认值为true，一般这个参数可以不传
```
xhr.open('get','http://www.example.com');
```
发送请求
```
xhr.send();
```

事件绑定，处理服务器返回的结果

on when 当…时候
readystate 是xhr 对象中的属性，表示状态 0 1 2 3 4
change 改变

xhr.onreadystatechange = function(){
    // 判断（服务端返回了所有的结果）
    if(xhr.readyState === 4){
        // 判断响应状态码 200 404 403 401 500
        // 以 2 开头的状态码都表示成功
        if(xhr.status >= 200 && xhr.status < 300){
         console.log(xhr.status); // 状态码
            console.log(xhr.statusText); // 状态字符串
            console.log(xhr.getAllResponseHeaders());  // 所有响应体
            console.log(xhr.response); // 响应体
        }
    }
}

Ajax超时与网络异常

服务端延时响应

app.get('/',(req,res) => {
    res.setHeader('Access-Control-Allow-Origin');
    setTimeout(() => {
        res.send('延时响应');
    },3000)
});

客户端超时、网络异常及回调

var xhr = new XMLHttpRequest();
// 超时设置2s,超时2s则取消请求
xhr.timeout = 2000;
// 超时会调
xhr.ontimeout = function(){
    alert('网超时，请稍后尝试！！');
}
// 网络异常
xhr.onerror = function(){
    alert('网路异常!!')
}
xhr.open('GET','http://127.0.0.1:3000/');
xhr.send();
xhr.onreadystatechange = function(){...}

Ajax 重复请求问题

<body>
    <button> 发送请求</button>
    <script>
    	var btn = document.querySelector('button');
        var xhr = null;
        var isSending = false;  // 是否正在发送Ajax请求
        btn.onclick = function(){
            if(isSending){x.abort()}    // 如果正在发送，则取消请求
            xhr = new XMLHttpRequest();
            isSending = true;
            xhr.open('GET','http://127.0.0.1:3000/');
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    isSending = false;
                }
            }
        }
        
    </script>
</body>