一些常见的AJAX请求操作处理

最新推荐文章于 2023-02-21 22:09:52 发布

1900's 88 keys

最新推荐文章于 2023-02-21 22:09:52 发布

阅读量413

点赞数 1

分类专栏： # AJAX 正在路上的前端攻城狮的烂笔记 # JavaScript 文章标签： ajax javascript 服务器 http json

本文链接：https://blog.csdn.net/weixin_45660621/article/details/122495830

版权

正在路上的前端攻城狮的烂笔记同时被 3 个专栏收录

90 篇文章 2 订阅

订阅专栏

JavaScript

58 篇文章 4 订阅

订阅专栏

AJAX

4 篇文章 0 订阅

订阅专栏

服务端响应和处理JSON数据

服务端代码：

// 1.引入express模块
const { json } = require("body-parser");
const express = require("express");
const app = express();

app.post('/json-server', (req, res) =>{
    // 设置响应头 设置允许跨域
    res.setHeader('Access-Control-Allow-Origin', '*')
    // 定义一个对象数据
    let data = {
        name: '江流',
        age: 18,
        gender: '男'
    }
    // 对对象进行JSON字符串转换 
    let str = JSON.stringify(data);
    //设置响应
    res.send(str);
})

app.listen(3000, ()=>{
    console.log("服务器运行在端口3000中~~~");
})

客服端有两种方式可以进行转换接收到的JSON数据

使用JSON.parse()手动转换数据
设置xhr.responseType的属性为json进行自动转换

需求案例
将服务端发送data对象的数据打印在div中
1. 使用JSON.parse()手动转换数据
html代码如下

<body>
    <button id="btn">点击发送请求</button>
    <div id="result"></div>
    <script>
        // 获取button元素
        const btn = document.getElementById('btn');
        const result = document.getElementById("result");
        // 绑定事件
        btn.onclick = function () {
            // 1. 创建对象
            const xhr = new XMLHttpRequest();
            // 2.初始化 设置请求的方法和url
            xhr.open('POST', 'http://127.0.0.1:3000/json-server');
            // 3.发送
            xhr.send();
            xhr.onreadystatechange = function () {
                // 判断（服务端返回了所有的结果）
                if (xhr.readyState === 4) {
                    // 判断响应状态码 200 
                    // 2xx 表示成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 1.手动对数据转换
                        let data = JSON.parse(xhr.response);
                        // 将处理后的json对象中的数据结果放到div里面去
                        result.innerHTML = `name:${data.name}<br>age:${data.age}<br>gender:${data.gender}`;
                    }
                }
            }
        }
    </script>
</body>

在这里插入图片描述
1. 设置xhr.responseType的属性为json进行自动转换
html代码如下

<script>
    // 获取button元素
    const btn = document.getElementById('btn');
    const result = document.getElementById("result");
    // 绑定事件
    btn.onclick = function () {
        // 1. 创建对象
        const xhr = new XMLHttpRequest();
        xhr.responseType = 'json'
        // 2.初始化 设置请求的方法和url
        xhr.open('POST', 'http://127.0.0.1:3000/json-server');
        // 3.发送
        xhr.send();
        xhr.onreadystatechange = function () {
            // 判断（服务端返回了所有的结果）
            if (xhr.readyState === 4) {
                // 判断响应状态码 200 
                // 2xx 表示成功
                if (xhr.status >= 200 && xhr.status < 300) {
                    // 1.手动对数据转换
                    // let data = JSON.parse(xhr.response);
                    
                    // 2.自动转换
                    let data = xhr.response;
                    // 将处理后的json对象中的数据结果放到div里面去
                    result.innerHTML = `name:${data.name}<br>age:${data.age}<br>gender:${data.gender}`;
                }
            }
        }
    }
</script>

网络超时和网络异常处理

网络超时

我们可以通过一个定时器来模拟网络超时
通过设置xhr.timeout的时间来结束请求，这里我给定时器设置3秒，xhr.timeout为2秒，也就是说2秒后会自动停止请求
可以给xhr.ontimeout超时时间绑定一个回调函数来提醒用户网络超时

服务端代码如下

// 1.引入express模块
const { json } = require("body-parser");
const express = require("express");
const app = express();

app.post('/deley', (req, res) => {
    // 设置响应头 设置允许跨域
    res.setHeader('Access-Control-Allow-Origin', '*')
    // 定义一个3秒的延时定时器 来模拟网络超时 
    setTimeout(function () {
        //设置响应
        res.send('HELLO AJAX');
    }, 3000)
})
app.listen(3000, () => {
    console.log("服务器运行在端口3000中~~~");
})

html文件

    <script>
        // 获取button元素
        const btn = document.getElementById('btn');
        const result = document.getElementById("result");
        // 绑定事件
        btn.onclick = function () {
            const xhr = new XMLHttpRequest();
            // 设置超时2秒取消请求
            xhr.timeout = 2000;
            // 设置超时回调，提醒用户
            // xhr.ontimeout = function(){
            //     alert('网络超时，请稍后重试！')
            // }
            xhr.open('POST', 'http://127.0.0.1:3000/deley');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response;
                    }
                }
            }
        }
    </script>

在这里插入图片描述
可以看到下面2秒后自动取消了请求

网络异常

xhr.onerror可以给该事件加一个回调函数来提醒用户网络异常
这里演示需要使用到浏览器控制台的功能，将其修改成Offine来实现断网操作

html代码

    <script>
        // 获取button元素
        const btn = document.getElementById('btn');
        const result = document.getElementById("result");
        // 绑定事件
        btn.onclick = function () {
            const xhr = new XMLHttpRequest();
            xhr.onerror = function(){
                alert('您的网络似乎断开了~~')
            }
            xhr.open('POST', 'http://127.0.0.1:3000/deley');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response;
                    }
                }
            }
        }
    </script>

在这里插入图片描述

取消重复请求

xhr.abort()方法可以取消请求
需求案例
当用户疯狂发送同一个请求的时候，会给服务器带来负担，所以当用户请求时，取消上一次同样的请求
代码如下

<body>
    <button id="btn">点击发送请求</button>
    <script>
        // 获取button元素
        const btn = document.getElementById('btn');

        let xhr = null;
        // 标识当前是否在发送AJAX请求
        let isSending = false;
        // 绑定事件
        btn.onclick = function () {
            // 设置
            if (isSending) xhr.abort(); //如果正在发送则取消当前请求
            xhr = new XMLHttpRequest();//创建新的请求
            // 修改 标识变量的值
            isSending = true;
            xhr.open("POST", 'http://127.0.0.1:3000/delay');
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readState === 4){
                    // 发送完成 修改标识变量
                    isSending = false;
                }
            }
        }
    </script>
</body>

在这里插入图片描述

1900's 88 keys

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一些常见的AJAX请求操作处理

目录服务端响应和处理JSON数据网络超时和网络异常处理取消重复请求服务端响应和处理JSON数据服务端代码：// 1.引入express模块const { json } = require("body-parser");const express = require("express");const app = express();app.post('/json-server', (req, res) =>{ // 设置响应头设置允许跨域 res.setHeader('
复制链接

扫一扫