8.AJAX初步学习（7）

最新推荐文章于 2024-07-14 21:53:24 发布

大神糖逗逗

最新推荐文章于 2024-07-14 21:53:24 发布

阅读量77

点赞数

文章标签： ajax http

本文链接：https://blog.csdn.net/t13268668791/article/details/119414482

版权

1-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>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>

服务端的代码和之前类似。

//1、引入express
const express = require('express');

//2、创建应用对象
const app = express();
//3、创建路由规则
app.get('/delay', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    setTimeout(() => {
        //设置响应体
        response.send('延时响应');
    }, 3000);
    //设置响应体
});
//4、监听端口启动服务
app.listen(8000, () => {
    console.log("服务已启动，8000 端口监听中......")
})

在浏览器中打开并检查，点击发送按钮，在发送请求的3秒内点击取消按钮，就可以把正在发送的请求取消。
在这里插入图片描述
那么这个时候问题就来了，有的用户会不断地点击相同按钮，如上图中的发送按钮，这时服务端就需要判定前面是否出现相同的请求，从而避免出现不必要的消耗，减小服务器的压力。

2-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>重复请求问题</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();
            x.onreadystatechange = function () {
                if (x.readyState === 4) {
                    //修改标识变量
                    isSending = false;
                }
            }
        }
    </script>
</body>

</html>

服务端代码不变。
在这里插入图片描述
打开页面后便实现了。

3-用jQuery发送AJAX请求

实现两个按钮，一个按下用jQuery发送get请求，另一个按下用jQuery发送post请求

用jquery发送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>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <div class="container">
        <h2 class="page-header">jQuery发送AJAX请求</h2>
        <button class="btn-primary">GET</button>
        <button class="btn-danger">POST</button>
        <button class="btn-info">通用型方法Ajax</button>
    </div>
    <script>
        $('button').eq(0).click(function () {
            $.get('http://127.0.0.1:8000/jquery-server', { a: 100, b: 200 }, function (data) {
                console.log(data);
            }, 'json')
        });
        $('button').eq(1).click(function () {
            $.post('http://127.0.0.1:8000/jquery-server', { a: 100, b: 200 }, function (data) {
                console.log(data);
            })
        });
    </script>
</body>

</html>

服务端无太大差别，新建了一个响应规则

app.all('/jquery-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    const data = { name: '宁泽哥' };
    response.send(JSON.stringify(data));
});

这样打开页面后就可以实现了
在这里插入图片描述

大神糖逗逗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8.AJAX初步学习（7）

1-AJAX取消请求实现页面中两个按钮，一个点击发送请求，一个点击取消请求。要取消请求，只用要借助一个方法 abort即可。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont
复制链接

扫一扫