Ajax.Day2.Ajax的一些基本操作

最新推荐文章于 2024-08-05 20:46:27 发布
最新推荐文章于 2024-08-05 20:46:27 发布
阅读量234 收藏
点赞数
分类专栏： 前端 文章标签： ajax javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48681463/article/details/120741845
版权

Ajax的一些基本操作

AJAX设置请求参数

继续使用上一篇文章案例及其代码。在GET请求中，如何设置URL的参数。在代码中的URL地址后边加一个？进行分割，然后在写要传递的参数。如果是多个参数，要用&进行隔开。
GET.html代码

<!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>AJAX GET请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //绑定事件
        btn.onclick = function () {
            // //测试
            // console.log('test');
            //AJAX操作
            //1.创建对象,其中xhr名字可以自定义，可以写a，写b等等。
            const xhr = new XMLHttpRequest();
            //2.做初始化，设置请求方法和URL
            //使用问号分割，然后设置要传递的参数a
            xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200');
            //3.发送
            xhr.send();
            //4.事件绑定 作用是处理服务端返回的结果。
            //on 表示当...的时候。
            //readystate 是xhr对象中的属性。表示状态，有五个值 0 1 2 3 4分别表示程序不同的运行状态
            //change 改变的时候触发
            xhr.onreadystatechange = function () {
                //判断,如果值为4，表明服务端返回了所有的结果
                if (xhr.readyState === 4) {
                    //判断响应的状态码 如404
                    //当状态码为200到300时，表明成功拿到数据
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理服务端返回的结果,结构为行 头 空行 体
                        console.log(xhr.status);//响应行里的状态码
                        console.log(xhr.statusText);//响应行里的状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体
                        //设置result的文本
                        result.innerHTML = xhr.response;
                    }
                    else {

                    }
                }
            }

        }
    </script>
</body>

</html>

输出如下，可以看到有对应的参数。
在这里插入图片描述

AJAX发送POST请求

案例准备，如下。实现一个方框。
POST.html代码如下

<!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>AJAX post请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>
<body>
    <div id="result"></div>
</body>
</html>

输出页面效果
在这里插入图片描述
案例需求是，当把鼠标放到方框时，向服务端发送请求，服务端的响应体返回内容在框中显示。先做一个测试，鼠标放入框中，控制台会打印输出一个test。

<!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>AJAX post请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        //1.获取元素对象
        const result=document.getElementById("result")
        //2.绑定事件,鼠标移动事件
        result.addEventListener("mouseover",function(){
            //做一个测试。
            console.log('test');
        })
    </script>
</body>
</html>

测试输出如下

在这里插入图片描述
最后POST请求在post.html内写法如下

<!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>AJAX post请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        //1.获取元素对象
        const result=document.getElementById("result")
        //2.绑定事件,鼠标移动事件
        result.addEventListener("mouseover",function(){
            // //做一个测试。
            // console.log('test');
            //3.创建对象
            const xhr=new XMLHttpRequest();
            //4.初始化，设置请求类型和URL
            xhr.open('POST','http://127.0.0.1:8000/server?a=100&b=200')
            //5.发送
            xhr.send();
            //6.事件绑定
            //on 表示当...的时候。
            //readystate 是xhr对象中的属性。表示状态，有五个值 0 1 2 3 4分别表示程序不同的运行状态
            //change 改变的时候触发
            xhr.onreadystatechange = function () {
                //判断,如果值为4，表明服务端返回了所有的结果
                if (xhr.readyState === 4) {
                    //判断响应的状态码 如404
                    //当状态码为200到300时，表明成功拿到数据
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理服务端返回的结果,结构为行 头 空行 体
                        console.log(xhr.status);//响应行里的状态码
                        console.log(xhr.statusText);//响应行里的状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体
                        //设置result的文本
                        result.innerHTML = xhr.response;
                    }
                    else {

                    }
                }
            }
        })
    </script>
</body>
</html>

注意：server.js内创建路由规则，要多创建一个POST的规则。

//1.引入express
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头,头的名字就是Access-Controll-Allow-Origin
    //作用是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX');
});
app.post('/server', (request, response) => {
    //设置响应头,头的名字就是Access-Controll-Allow-Origin
    //作用是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX POST');
});
//4.监听端口启动服务
//监听端口选择8000，后边在接一个回调函数
app.listen(8000, () => {
    console.log("服务已经启动，8000端口监听中...");
})

然后启动服务度，在终端中，输入node server.js。在这里插入图片描述
最终效果如下，鼠标移动到方框内，就会出现内容。在这里插入图片描述

post设置请求体

post请求体是在xhr.send编写。

<!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>AJAX post请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        //1.获取元素对象
        const result=document.getElementById("result")
        //2.绑定事件,鼠标移动事件
        result.addEventListener("mouseover",function(){
            // //做一个测试。
            // console.log('test');
            //3.创建对象
            const xhr=new XMLHttpRequest();
            //4.初始化，设置请求类型和URL
            xhr.open('POST','http://127.0.0.1:8000/server?a=100&b=200')
            //5.发送数据
            xhr.send('a=100&b=200&c=300');
            //6.事件绑定
            //on 表示当...的时候。
            //readystate 是xhr对象中的属性。表示状态，有五个值 0 1 2 3 4分别表示程序不同的运行状态
            //change 改变的时候触发
            xhr.onreadystatechange = function () {
                //判断,如果值为4，表明服务端返回了所有的结果
                if (xhr.readyState === 4) {
                    //判断响应的状态码 如404
                    //当状态码为200到300时，表明成功拿到数据
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理服务端返回的结果,结构为行 头 空行 体
                        console.log(xhr.status);//响应行里的状态码
                        console.log(xhr.statusText);//响应行里的状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体
                        //设置result的文本
                        result.innerHTML = xhr.response;
                    }
                    else {

                    }
                }
            }
        })
    </script>
</body>
</html>

最后可以在Request Payload内看到代码中写的参数，那么就证明此时参数已经传递给了后端服务端。
在这里插入图片描述

POST设置请求头信息

使用setRequestHeader()方法，在open方法后设置。也可以自定义请求头。但是要在后端代码中设置允许自定义请求头。

<!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>AJAX post请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        //1.获取元素对象
        const result = document.getElementById("result")
        //2.绑定事件,鼠标移动事件
        result.addEventListener("mouseover", function () {
            // //做一个测试。
            // console.log('test');
            //3.创建对象
            const xhr = new XMLHttpRequest();
            //4.初始化，设置请求类型和URL
            xhr.open('POST', 'http://127.0.0.1:8000/server?a=100&b=200')
            //设置请求头
            //其中Content-type是设置请求体内容类型的
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            //也可以自定义请求头
            xhr.setRequestHeader('name', 'haha');
            //5.发送数据
            xhr.send('a=100&b=200&c=300');
            //6.事件绑定
            //on 表示当...的时候。
            //readystate 是xhr对象中的属性。表示状态，有五个值 0 1 2 3 4分别表示程序不同的运行状态
            //change 改变的时候触发
            xhr.onreadystatechange = function () {
                //判断,如果值为4，表明服务端返回了所有的结果
                if (xhr.readyState === 4) {
                    //判断响应的状态码 如404
                    //当状态码为200到300时，表明成功拿到数据
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理服务端返回的结果,结构为行 头 空行 体
                        console.log(xhr.status);//响应行里的状态码
                        console.log(xhr.statusText);//响应行里的状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体
                        //设置result的文本
                        result.innerHTML = xhr.response;
                    }
                    else {

                    }
                }
            }
        })
    </script>
</body>

</html>

//1.引入express
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头,头的名字就是Access-Controll-Allow-Origin
    //作用是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX');
});
//把app.post改为app.all，表示可以接受任意形式请求。
app.all('/server', (request, response) => {
    //设置响应头,头的名字就是Access-Controll-Allow-Origin
    //作用是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //作用是设置运行自定义请求头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    response.send('HELLO AJAX POST');
});
//4.监听端口启动服务
//监听端口选择8000，后边在接一个回调函数
app.listen(8000, () => {
    console.log("服务已经启动，8000端口监听中...");
})

输出如下
在这里插入图片描述

服务端响应json数据

实际工作中，向服务端发送请求，服务端返回都是使用JSON数据。新建一个json.html，然后进行案例准备。实现按下键盘任意按键，方框中会进行与后端服务器的交互。

<!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>json数据</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #876;
        }
    </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/server?a=100&b=200')
            //发送
            xhr.send()
            //事件绑定
            xhr.onreadystatechange = function () {
                //判断,如果值为4，表明服务端返回了所有的结果
                if (xhr.readyState === 4) {
                    //判断响应的状态码 如404
                    //当状态码为200到300时，表明成功拿到数据
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理服务端返回的结果,结构为行 头 空行 体
                        console.log(xhr.status);//响应行里的状态码
                        console.log(xhr.statusText);//响应行里的状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体
                        //设置result的文本
                        result.innerHTML = xhr.response;
                    }
                    else {

                    }
                }
            }
        }
        
    </script>
</body>

</html>

按下任意按键会出现如下界面，测试成功。
在这里插入图片描述
修改server.js内代码

//1.引入express
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
// app.get('/server', (request, response) => {
//     //设置响应头,头的名字就是Access-Controll-Allow-Origin
//     //作用是设置允许跨域
//     response.setHeader('Access-Control-Allow-Origin', '*');
//     //设置响应体
//     response.send('HELLO AJAX');
// });
//把app.post改为app.all，表示可以接受任意形式请求。
app.all('/server', (request, response) => {
    //设置响应头,头的名字就是Access-Controll-Allow-Origin
    //作用是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //作用是设置运行自定义请求头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据，发送给客户端
    const data = {
        address:'广州'
    }
    //设置响应体，send里边得是一个字符串类型，所以要对data进行转换
    let str = JSON.stringify(data);
    response.send(str);
});
//4.监听端口启动服务
//监听端口选择8000，后边在接一个回调函数
app.listen(8000, () => {
    console.log("服务已经启动，8000端口监听中...");
})

最后页面效果如下，可以看到显示的是一个JSON字符串。
在这里插入图片描述
那么正常显示实际中是不需要这样显示JSON字符串的，所以需要进行转换。需要在JSON.html进行再次转换，有两种方式，一是手动进行转换，

<!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>json数据</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #876;
        }
    </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/server?a=100&b=200')
            //发送
            xhr.send()
            //事件绑定
            xhr.onreadystatechange = function () {
                //判断,如果值为4，表明服务端返回了所有的结果
                if (xhr.readyState === 4) {
                    //判断响应的状态码 如404
                    //当状态码为200到300时，表明成功拿到数据
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // //处理服务端返回的结果,结构为行 头 空行 体
                        // console.log(xhr.status);//响应行里的状态码
                        // console.log(xhr.statusText);//响应行里的状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);//响应体
                        // //设置result的文本
                        // result.innerHTML = xhr.response;
                        let data=JSON.parse(xhr.response);
                        console.log(data);
                        result.innerHTML = data.address;
                    }
                    else {

                    }
                }
            }
        }
        
    </script>
</body>

</html>

可以看到，提取出了address的信息，广州。
在这里插入图片描述
第二种方法是自动转换，需要先设置响应体数据的类型。

xhr.responseType = 'json'

JSON.html代码

<!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>json数据</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #876;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <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/server?a=100&b=200')
            //发送
            xhr.send()
            //事件绑定
            xhr.onreadystatechange = function () {
                //判断,如果值为4，表明服务端返回了所有的结果
                if (xhr.readyState === 4) {
                    //判断响应的状态码 如404
                    //当状态码为200到300时，表明成功拿到数据
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // //处理服务端返回的结果,结构为行 头 空行 体
                        // console.log(xhr.status);//响应行里的状态码
                        // console.log(xhr.statusText);//响应行里的状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);//响应体
                        // //设置result的文本
                        // result.innerHTML = xhr.response;
                        // //手动转换JSON数据
                        // let data=JSON.parse(xhr.response);
                        // console.log(data);
                        // result.innerHTML = data.address;
                        //自动转换JSON数据
                        result.innerHTML = xhr.response.address;
                    }
                    else {

                    }
                }
            }
        }

    </script>
</body>

</html>

在这里插入图片描述

nodemon自动重启工具安装

nodemon是帮助我们开发时，自动重启node.js服务的工具，当文件内容修改的时候。命令行输入npm install -g nodemon进行安装。
在这里插入图片描述
然后在以后启动server.js时，启动命令为nodemon server.js.此时在更改server.js内的代码时，就会自动重新启动node.js，进行刷新。
在这里插入图片描述

AJAX中的IE缓存问题

IE浏览器会对AJAX请求的结果做一个缓存。这就导致一个问题，在下一次AJAX请求时，IE浏览器先找的是本地缓存，而不是最新的服务器返回的数据。
做一个案例，点击发送请求按钮，方框会显示返回内容。

<!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>IE缓存问题</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #258;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result')
        //绑定事件
        btn.addEventListener('click', function () {
            const xhr = new XMLHttpRequest();
            //设置响应体数据类型
            xhr.responseType = 'json'
            xhr.open('GET', 'http://127.0.0.1:8000/server');
            xhr.send();
            xhr.onreadystatechange = function () {
                //判断,如果值为4，表明服务端返回了所有的结果
                if (xhr.readyState === 4) {
                    //判断响应的状态码 如404
                    //当状态码为200到300时，表明成功拿到数据
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //自动转换JSON数据
                        result.innerHTML = xhr.response.address;
                    }
                    else {
                    }
                }
            }
        })
    </script>
</body>

</html>

输出如下
在这里插入图片描述
所以此处需要使用一个时间戳，在URL地址部分的代码。

<!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>IE缓存问题</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #258;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result')
        //绑定事件
        btn.addEventListener('click', function () {
            const xhr = new XMLHttpRequest();
            //设置响应体数据类型
            xhr.responseType = 'json'
            //date.now是获取当前的时间戳，使得IE浏览器认识到两次AJAX请求时间不同。
            xhr.open('GET', 'http://127.0.0.1:8000/server?t='+Date.now());
            xhr.send();
            xhr.onreadystatechange = function () {
                //判断,如果值为4，表明服务端返回了所有的结果
                if (xhr.readyState === 4) {
                    //判断响应的状态码 如404
                    //当状态码为200到300时，表明成功拿到数据
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //自动转换JSON数据
                        result.innerHTML = xhr.response.address;
                    }
                    else {
                    }
                }
            }
        })
    </script>
</body>

</html>

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

当应用上线时，我们不能保证服务端百分百响应请求，或者客户端百分百能够请求连接通畅。我们设置这样一个案例，当客户端发送请求时，如果请求时间超过两秒，我们就返回一个提醒给客户端。我们在后端设置的是3秒延迟，前端设置的是2秒延迟。

<!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>请求异常和网络异常问题</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #258;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result')
        //绑定事件
        btn.addEventListener('click', function () {
            const xhr = new XMLHttpRequest();
            //设置响应体数据类型
            xhr.responseType = 'json'
            //请求超时设置，如果2秒内请求还没有成功，就取消该请求。
            xhr.timeout=2000
            //超时回调函数
            xhr.ontimeout=function(){
                alert("网络异常，请稍后再试")
            }
            //网络异常回调函数
            xhr.onerror=function(){
                alert("你的网络似乎出现了一些问题")
            }
            //date.now是获取当前的时间戳，使得IE浏览器认识到两次AJAX请求时间不同。
            xhr.open('GET', 'http://127.0.0.1:8000/yanshi?t='+Date.now());
            xhr.send();
            xhr.onreadystatechange = function () {
                //判断,如果值为4，表明服务端返回了所有的结果
                if (xhr.readyState === 4) {
                    //判断响应的状态码 如404
                    //当状态码为200到300时，表明成功拿到数据
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //自动转换JSON数据
                        result.innerHTML = xhr.response.address;
                    }
                    else {
                    }
                }
            }
        })
    </script>
</body>

</html>

server.js内代码

//1.引入express
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
// app.get('/server', (request, response) => {
//     //设置响应头,头的名字就是Access-Controll-Allow-Origin
//     //作用是设置允许跨域
//     response.setHeader('Access-Control-Allow-Origin', '*');
//     //设置响应体
//     response.send('HELLO AJAX');
// });
//把app.post改为app.all，表示可以接受任意形式请求。
app.all('/server', (request, response) => {
    //设置响应头,头的名字就是Access-Controll-Allow-Origin
    //作用是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //作用是设置运行自定义请求头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据，发送给客户端
    const data = {
        address: '广州2'
    }
    //设置响应体，send里边得是一个字符串类型，所以要对data进行转换
    let str = JSON.stringify(data);
    response.send(str);
});

//响应延时效果
app.all('/yanshi', (request, response) => {
    //设置响应头,头的名字就是Access-Controll-Allow-Origin
    //作用是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');

    //作用是设置运行自定义请求头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据，发送给客户端
    const data = {
        address: '广州2'
    }
    //设置响应体，send里边得是一个字符串类型，所以要对data进行转换
    let str = JSON.stringify(data);
    //延时3秒钟
    setTimeout(() => { response.send(str); }, 3000)

});
//4.监听端口启动服务
//监听端口选择8000，后边在接一个回调函数
app.listen(8000, () => {
    console.log("服务已经启动，8000端口监听中...");
})

此时我们可以看到因为延时的问题。请求被取消了。
在这里插入图片描述
在这里插入图片描述
当网络被断开时，我们在浏览器中进行模型，点击下图的offline进入断网模式。
在这里插入图片描述
最后输出如下
在这里插入图片描述

AJAX取消请求

在点击发送请求后，在返回结果还未回来之前，我们在点击取消请求，中断本次请求操作。取消需要借助一个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>AJAX取消请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #258;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <button>点击取消请求</button>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result')
        //获取元素对象
        const btns = document.querySelectorAll('button');
        //请求和取消同时出现时，为了避免冲突，不能使用const x
        let x =null;
        //给按钮1绑定发送请求事件
        btns[0].onclick = function () {
            x = new XMLHttpRequest();
            //设置响应体数据类型
            x.responseType = 'json'
            //date.now是获取当前的时间戳，使得IE浏览器认识到两次AJAX请求时间不同。
            x.open('GET', 'http://127.0.0.1:8000/yanshi?t=' + Date.now());
            x.send();
            x.onreadystatechange = function () {
                //判断,如果值为4，表明服务端返回了所有的结果
                if (x.readyState === 4) {
                    //判断响应的状态码 如404
                    //当状态码为200到300时，表明成功拿到数据
                    if (x.status >= 200 && x.status < 300) {
                        //自动转换JSON数据
                        result.innerHTML = x.response.address;
                    }
                    else {
                    }
                }
            }
        }
        //使用abort，实现取消请求
        btns[1].onclick=function(){
            x.abort();
        }
    </script>
</body>

</html>

server.js内代码

//1.引入express
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
// app.get('/server', (request, response) => {
//     //设置响应头,头的名字就是Access-Controll-Allow-Origin
//     //作用是设置允许跨域
//     response.setHeader('Access-Control-Allow-Origin', '*');
//     //设置响应体
//     response.send('HELLO AJAX');
// });
//把app.post改为app.all，表示可以接受任意形式请求。
app.all('/server', (request, response) => {
    //设置响应头,头的名字就是Access-Controll-Allow-Origin
    //作用是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //作用是设置运行自定义请求头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据，发送给客户端
    const data = {
        address: '广州2'
    }
    //设置响应体，send里边得是一个字符串类型，所以要对data进行转换
    let str = JSON.stringify(data);
    response.send(str);
});

//响应延时效果
app.all('/yanshi', (request, response) => {
    //设置响应头,头的名字就是Access-Controll-Allow-Origin
    //作用是设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');

    //作用是设置运行自定义请求头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据，发送给客户端
    const data = {
        address: '广州2'
    }
    //设置响应体，send里边得是一个字符串类型，所以要对data进行转换
    let str = JSON.stringify(data);
    //延时3秒钟
    setTimeout(() => { response.send(str); }, 3000)

});
//4.监听端口启动服务
//监听端口选择8000，后边在接一个回调函数
app.listen(8000, () => {
    console.log("服务已经启动，8000端口监听中...");
})

我们可以看到，点击发送后，在点击取消，方框内不在显示了，并且status状态中也显示的是canceled（取消）。
在这里插入图片描述

AJAX重复发送请求

在某些应用场景，客户端可能会高频率不断重复往服务器发送请求，会造成服务器有一些影响。我们需要在出现多次请求时，只最后一次有效，每点一次，上一次就被取消。下图可以看到我们连续多次发送了同一请求。
在这里插入图片描述
所以这里使用一个标识变量，对标识变量进行判定，如果当前正在发送请求，又点击一次新请求，那么就取消上一次的，创建新的请求。

<!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>AJAX重复请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #258;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <button>点击取消请求</button>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result')
        //获取元素对象
        const btns = document.querySelectorAll('button');
        //请求和取消同时出现时，为了避免冲突，不能使用const x
        let x = null;
        //标识变量
        let isSending = false;//是否正在发送AJAX请求
        //给按钮1绑定发送请求事件
        btns[0].onclick = function () {
            //判断标识变量,如果是正在发送，则abort取消掉上一个请求，创建一个新请求
            if (isSending) x.abort();
            x = new XMLHttpRequest();
            //设置响应体数据类型
            x.responseType = 'json'
            //修改标识变量的值
            isSending = true
            //date.now是获取当前的时间戳，使得IE浏览器认识到两次AJAX请求时间不同。
            x.open('GET', 'http://127.0.0.1:8000/yanshi?t=' + Date.now());
            x.send();
            x.onreadystatechange = function () {
                //判断,如果值为4，表明服务端返回了所有的结果
                if (x.readyState === 4) {

                    //判断响应的状态码 如404
                    //当状态码为200到300时，表明成功拿到数据
                    if (x.status >= 200 && x.status < 300) {
                        //自动转换JSON数据
                        result.innerHTML = x.response.address;
                        //修改标识变量的值
                        isSending = false
                    }
                    else {
                    }
                }
            }
        }
        // //使用abort，实现取消请求
        // btns[1].onclick = function () {
        //     x.abort();
        // }
    </script>
</body>

</html>

可以看到，多次点击之后，只最后一次是成功的，前边的请求都是被cancel取消了。
在这里插入图片描述

疯子的梦想＠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax请求格式get,post,参数设置，转换参数类型
xiaobai_IT_learn的博客
09-12 4891
1.get请求（标准写法） $.ajax({ url:'http://127.0.0.1:5000/test', type:'get', dataType:'json', data: {"arr": arr.toString()}, success:function(resp){ alert(resp.data) consol...
【ajax】5.JSON：服务端响应JSON数据+nodemon自动重启工具安装+Missing write access to /usr/local/lib/node_modules解决方法
weixin_43210113的博客
12-07 227
〇、前情提要 在看b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版），中插了这个知识记录一下。 参考： 我的笔记： 【javaweb】b站-尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版） 笔记 https://blog.csdn.net/weixin_43210113/article/details/110628389 b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020
ajax中POST请求与参数(请求体)设置
LuiChun
12-31 5002
1.创建在testthree文件夹并在这个文件夹里面 2.创建post.html文件 3.创建server.js文件 post.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
AJAX的使用及常见问题的处理（AJAX入门到熟练使用）
杨明金的博客
05-29 743
文章目录一、基础知识1.1AJAX简介1.2 AJAX的特点1.2.1 AJAX 的优点1.2.2 AJAX 的缺点1.3 XML简介1.4 HTTP简介1.4.1 请求报文1.4.2 响应报文二、express框架2.1 AJAX-express框架介绍与基本使用2.2 使用nodemon工具三、原生AJAX请求的基本操作3.1 get 请求方式的使用3.2 post 请求方式的使用3.3 服务器响应 JSON 数据3.4 IE浏览器缓存问题解决3.5 请求超时与网络异常处理3.6 AJAX请求取消操作3
ajax.systems,Document
weixin_29584723的博客
08-07 5660
DocumentUNITED STATES SECURITIES AND EXCHANGE COMMISSIONWashington, D.C. 20549FORM 10-K(Mark One)[X] ANNUAL REPORT PURSUANT TO SECTION 13 OR 15(d) OF THE SECURITIES EXCHANGE ACT OF 1934For the fisca...
Day18_2--Vue.js Ajax（使用 Axios）基础入门学习
最新发布
gitee_nanzhi66的博客
08-05 520
Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 环境中。它是现代化的 Ajax 库，用来替代传统的 XMLHttpRequest。
公众平台无限回调系统 /user/ajax.php SQL注入漏洞
weixin_43167326的博客
07-18 344
微信公众平台无限回调系统是一种旨在提升企业客户服务体验和运营效率的工具。该系统通过一系列智能化和自动化的功能，帮助企业与用户之间建立更加便捷、高效的沟通桥梁。
AJAX-day1：
2303_79590957的博客
07-05 1178
AJAX是浏览器与服务器进行数据通信的技术 =>把数据变活。
AjaxUpLoad.js实现文件上传功能
每天学习一点点
04-16 1230
AjaxUpLoad.js的使用实现无刷新文件上传，如图。 图1 文件上传前 图2 文件上传后 1、创建页面并编写HTML 上传文档: <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></span&g...
ajax-day01.rar_ajax_union1de
09-23
Ajax的基本工作流程包括以下几个步骤： 1. **创建XMLHttpRequest对象**：这是Ajax的核心，它是浏览器提供的一个内置对象，用于与服务器进行通信。 2. **初始化连接**：通过XMLHttpRequest对象的open()方法建立到...
day03-前端(ajax&json).zip
10-07
在"day03-前端(ajax&json)"的学习中，你将有机会实践如何使用AJAX进行异步数据请求，以及如何处理和展示JSON数据。通过编写AJAX请求，你可以与服务器进行实时交互，例如动态加载数据、提交表单等。同时，了解如何...
DAY03_AJAX.md
05-22
DAY03_AJAX.md
day6_ajax01.zip
06-28
在IT行业中，Ajax（Asynchronous...综上所述，“day6_ajax01.zip”文件可能包含了一些使用Ajax实现的简单示例，涉及上述知识点，帮助初学者理解Ajax的工作原理和应用。学习和实践这些内容对于提升Web开发技能至关重要。
AJAX day01.md
10-27
AJAX day01.md
VUE3.0,DAY32，生命周期销毁流程
疯子的梦想@的博客
09-05 6265
VUE3.0,DAY32销毁流程 销毁流程 销毁流程如下所示，就是当vm.$destroy被调用的时候，就启动销毁流程（即页面数据也不更新了，也不用vue管理了等等）。destroy具有销毁的意思。 我们自定义了一个销毁按钮，当点击的时候就启动销毁流程，如下图所示，先点击自加按钮，n的值变为2，然后点击销毁按钮，看到控制台console打印输出，已销毁已启动，然后此时在点击自加按钮，发现页面没反应了。这就是说vm已经被销毁了。然后vm被kill前，其工作成果还保留在了页面上（实现页面的n值为2）。 &lt
cnpm|npm设置镜像地址操作
疯子的梦想@的博客
04-07 5496
cnpm|npm设置镜像地址操作npmcnpm使用npm|cnpm安装包 npm 1.查看当前的镜像源 npm config get registry 2.修改当前的镜像源为淘宝镜像源 npm config set registry https://registry.npm.taobao.org 3.查看当前npm信息 npm -v cnpm 1.查看当前的镜像源 cnpm config get registry 2.修改当前的镜像源为淘宝镜像源 cnpm config set registry h
前端VUE3.0,DAY10，键盘事件
疯子的梦想@的博客
08-04 2245
VUE3.0,DAY10键盘vue常用的按键别名按下回车键修饰按键的特殊：ctrl、alt、shift、meta 键盘vue常用的按键别名 1.Vue中常用的按键别名: 回车=> enter 删除=> delete (捕获"删除”和“退格”键) 退出=> esc 空格=> space 换行=> tab 上=>up 下=> down 左=> left 右=> right 2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-
flask+HTML实现电影观看清单web应用
疯子的梦想@的博客
11-10 2188
电影观看清单web应用引言功能简要说明后端完整代码完整源码链接 引言 1.工程运行的依赖见requirements.txt,data.db是数据库文件。 2.工程运行方法,打开pycharm,选择该工程,选择pycharm底部的终端。 3.cd进入到工程文件夹MyTest,输入flask run,即可生成一个本地网址,进入该网址即可。 4.其中Full_version.py是所有后端flask代码集合的一个文件。实际运行中，我们把该文件内的代码分类保存在了watchlist文件夹中的五个.py文件中。 5.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值