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

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.Day2.Ajax的一些基本操作

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>

输出页面效果
Ajax.Day2.Ajax的一些基本操作
案例需求是,当把鼠标放到方框时,向服务端发送请求,服务端的响应体返回内容在框中显示。先做一个测试,鼠标放入框中,控制台会打印输出一个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>

测试输出如下

Ajax.Day2.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>
    <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.jsAjax.Day2.Ajax的一些基本操作
最终效果如下,鼠标移动到方框内,就会出现内容。Ajax.Day2.Ajax的一些基本操作

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内看到代码中写的参数,那么就证明此时参数已经传递给了后端服务端。
Ajax.Day2.Ajax的一些基本操作

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端口监听中...");
})

输出如下
Ajax.Day2.Ajax的一些基本操作

服务端响应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>

按下任意按键会出现如下界面,测试成功。
Ajax.Day2.Ajax的一些基本操作
修改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字符串。
Ajax.Day2.Ajax的一些基本操作
那么正常显示实际中是不需要这样显示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的信息,广州。
Ajax.Day2.Ajax的一些基本操作
第二种方法是自动转换,需要先设置响应体数据的类型。

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>

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

nodemon自动重启工具安装

nodemon是帮助我们开发时,自动重启node.js服务的工具,当文件内容修改的时候。命令行输入npm install -g nodemon进行安装。
Ajax.Day2.Ajax的一些基本操作
然后在以后启动server.js时,启动命令为nodemon server.js.此时在更改server.js内的代码时,就会自动重新启动node.js,进行刷新。
Ajax.Day2.Ajax的一些基本操作

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>

输出如下
Ajax.Day2.Ajax的一些基本操作
所以此处需要使用一个时间戳,在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端口监听中...");
})

此时我们可以看到因为延时的问题。请求被取消了。
Ajax.Day2.Ajax的一些基本操作
Ajax.Day2.Ajax的一些基本操作
当网络被断开时,我们在浏览器中进行模型,点击下图的offline进入断网模式。
Ajax.Day2.Ajax的一些基本操作
最后输出如下
Ajax.Day2.Ajax的一些基本操作

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.Day2.Ajax的一些基本操作

AJAX重复发送请求

在某些应用场景,客户端可能会高频率不断重复往服务器发送请求,会造成服务器有一些影响。我们需要在出现多次请求时,只最后一次有效,每点一次,上一次就被取消。下图可以看到我们连续多次发送了同一请求。
Ajax.Day2.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取消了。
Ajax.Day2.Ajax的一些基本操作

上一篇:2020 CTF暑假夏令营培训Day2 密码学Crypto 部分笔记


下一篇:计算机算法Day2 ---- 基本数据结构(链表)