ajax入门（2）（服务端响应json数据、nodemon自动重启工具、IE缓存问题、超时与异常处理、取消请求、重复发送）

最新推荐文章于 2025-12-07 15:02:32 发布

原创最新推荐文章于 2025-12-07 15:02:32 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json #ajax #缓存

服务端响应json数据

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。易于人阅读和编写，可以在多种语言之间进行数据交换

我们向服务端发送请求，服务端返回结果基本都是json格式的数据

案例：键盘按下后会向服务端发送请求，服务端返回结果，结果出现在div

我们的目的是返回一个数据，而

//设置响应体
response.send('hello express joson');

这个地方只能返回一个字符串或者buffer

故需要对对象做字符串的转换

 //响应一个数据
const data = {
    name : 'data'
};
//对对象做字符串的转换
let str = JSON.stringify(data);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>
<body>
    <div id="result">

    </div>
    <script>
        const result = document.getElementById('result');
        //绑定事件
        window.onkeydown = function(){
            const xhr = new XMLHttpRequest();
            xhr.open('GET','http://127.0.0.1:8000/json-server');
            xhr.send();
            xhr.onreadystatechange = function(){
                //判断 状态为4时代表返回了所有结果
                if(xhr.readyState === 4){
                    //判断响应的状态码200 404 403 401
                    //2xx均为成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理结果 
                        
                        console.log(xhr.response);
                        result.innerHTML = xhr.response;
                    }
                }
            }
        }
    </script>
    
</body>
</html>

app.get('/json-server',(request,response)=>{
    // 设置响应头 （头的名字，*）设置跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应一个数据
    const data = {
        name : 'data'
    };
    //对对象做字符串的转换
    let str = JSON.stringify(data);

    //设置响应体
    response.send(str);
})

可以得到显示出了json格式的字符串

在这里插入图片描述
我们要将json格式的字符串转变成显示在div之中的
①手动转换

if(xhr.readyState === 4){
           //判断响应的状态码200 404 403 401
          //2xx均为成功
          if(xhr.status >= 200 && xhr.status < 300){
          //手动对数据进行转化
          let data = JSON.parse(xhr.response);
          console.log(data);
          result.innerHTML=data.name;
        }
   }

刷新
在这里插入图片描述
②自动转换

xhr.responseType = 'json';

    <script>
        const result = document.getElementById('result');
        //绑定事件
        window.onkeydown = function(){
            const xhr = new XMLHttpRequest();
            //设置响应体数据的类型
            xhr.responseType = 'json';
            xhr.open('GET','http://127.0.0.1:8000/json-server');
            xhr.send();
            xhr.onreadystatechange = function(){
                //判断 状态为4时代表返回了所有结果
                if(xhr.readyState === 4){
                    //判断响应的状态码200 404 403 401
                    //2xx均为成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理结果 
                        result.innerHTML=xhr.response.name;
                    }
                }
            }
        }
    </script>

nodemon自动重启工具

终端总是改一改就得重启，很麻烦，使用这个工具改善

①工具需要先安装好node.js才可以

②

npm install -g nodemon

关了终端的端口连接，输入上边这条命令

在这里插入图片描述 ③
输入

npx nodemon server.js

在这里插入图片描述
服务启动了
对server.js更改后会自动进行重启

在这里插入图片描述

IE缓存问题

ie浏览器会对请求结果做一个缓存，下一次发送请求时，得到的还是本身的缓存而不是服务器返回的最新数据，故会影响结果。

 //初始化，设置请求方法和url
  xhr.open('GET','http://127.0.0.1:8000/ie?t='+Date.now())；

ajax请求超时与网络异常处理

在server.js中写一个延时3秒返回

//延时响应
app.get('/delay',(request,response)=>{
    // 设置响应头 （头的名字，*）设置跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    setTimeout(() => {
        response.send('延时响应');
    }, 3000)
});

我们可以在事件中在设置一个两秒的超时设置，两秒后弹框alert

//创建对象
const xhr = new XMLHttpRequest();
//超时设置2s
xhr.timeout = 2000;
xhr.ontimeout= function(){
     alert('超时，稍后重试');
}
//初始化，设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/delay');
//发送
xhr.send();

在这里插入图片描述

ajax取消请求

请求发送还没等回来response时，手动取消

x.abort();//abort取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;
        btns[0].onclick = function(){
            x = new XMLHttpRequest();
            x.open('GET','http://127.0.0.1:8000/delay');
            x.send();
        }

        btns[1].onclick = function(){
            x.abort();
        }
    </script>
</body>
</html>

ajax请求重复发送

如果用户重复不断发送请求，服务器端的压力会变大

以上边两个button为例

如果我们发现刚刚发送过相同的请求时，可以取消上一次发送
这样服务器就可以只处理一次请求了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击发送</button>

    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;
        //设置一个标识变量
        let isSending = false;//是否正在发送ajax请求
        btns[0].onclick = function(){
            //判断标识变量
            if(isSending) {x.abort();}//如果正在发送，则取消该请求
            x = new XMLHttpRequest();
            //修改标识变量值
            isSending = true;
            x.open('GET','http://127.0.0.1:8000/delay');
            x.send();
            //状态为4时完成事件
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    //修改标识变量
                    isSending = false;
                }
            }
        }
    </script>
</body>
</html>