Ajax实例--详细代码注释【GET 和 post请求】【AJAX 取消请求】【Ajax多次请求 只发送 最后一次请求】【请求超时与网络异常处理】【jQuery发送AJAX请求】

已于 2022-02-15 09:15:08 修改
阅读量454 收藏
点赞数 1
分类专栏： web前端 # ajax 文章标签： ajax jquery 网络
于 2022-02-15 09:05:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hannah2233/article/details/122933224
版权

笔记点击此处

一、 Express 开启服务

前提 ：node环境 + 全局下载 express
express官网

1、 express 安装与 基本 使用

  • npm init --yes
  • npm i express
  • node 脚本

2、 server.js代码 【提供后端服务】

  • node server.js开启服务
// 1. 引入express
const express = require('express');

// 2. 创建应用对象
const app = express();

// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO AJAX');
});

// 可以接受任意类型的请求
app.all('/json-server', (request, response) => {
    // 设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*')

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

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

// 针对IE缓存
app.get('/ie', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLI IE-2');
});

// 延时响应
app.get('/delay', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    setTimeout(() => {
        response.send('延时响应');
    }, 3000)
});

// jQuery 服务
app.all('/jQuery-server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    const data = { name: '尚硅谷' };
    response.send(JSON.stringify(data));
    // response.send('Hello jQuery AJAX');
});

// axios-server
app.all('/axios-server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = { name: '尚硅谷' };
    response.send(JSON.stringify(data));
    response.send('Hello axios AJAX');
});

app.all('/fetch-server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = { name: '尚硅谷' };
    response.send(JSON.stringify(data));
    response.send('Hello axios AJAX');
});

//4. 监听端口启动服务
app.listen(8080, () => {
    console.log("服务已经启动，8080端口监听中...");
})

二、 请求实例

2-1 GET 和 post请求

1、 1-GET.hml

<!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: 1px solid #90b;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result">

    </div>
    <script>
        // 获取button元素
        const btn = document.getElementsByTagName('button')[0];
        // 绑定事件
        btn.onclick = function() {
            // 1. 创建对象
            const xhr = new XMLHttpRequest();
            // 2. 初始化设置请求方法和url
            // xhr.open('GET', 'http://localhost:8080/server');
            // 发送参数
            xhr.open('GET', 'http://localhost:8080/server?a=100&b=200&c=300');

            // 3. 发送
            xhr.send();
            // 4. 事件绑定 处理服务端返回的结果
            // on when  当..时候
            // resdystate 是 xhr 对象中的属性， 表示状态 0 1 2 3 4
            // change 改变
            xhr.onreadystatechange = function() {
                // 判断
                if (xhr.readyState === 4) {
                    // 判断响应状态码 200 404 403  401 500
                    // 2xx 成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理结果  行   头  空行  体
                        // 1. 响应行
                        console.log(xhr.status); // 状态码
                        console.log(xhr.statusText); // 状态字符串
                        console.log(xhr.getAllResponseHeaders());
                        console.log(xhr.response); // 响应体

                        result.innerHTML = xhr.response;
                    }
                }
            }
        }
    </script>
</body>

</html>

2、 POST请求

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

<body>
    <div id="result"></div>
    <script>
        // 获取元素对象
        const result = document.getElementById("result");
        // 绑定事件
        result.addEventListener("mouseover", function() {
            // console.log("test");
            // 1. 创建对象
            const xhr = new XMLHttpRequest();
            // 2. 初始化 设置类型 与 URL
            xhr.open('POST', 'http://localhost:8080/server');

            // 设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            xhr.setRequestHeader('name', 'niutt');
            // 3. 发送
            // xhr.send();
            xhr.send('a=100&b=200&c=300');
            xhr.send('a:100&b:200&c:300');
            // 4. 事件绑定
            xhr.onreadystatechange = function() {
                // 判断
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理服务器返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>

</html>

2-2 AJAX 取消请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>取消请求</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://localhost:8080/delay");
            x.send();
        }

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

2-3 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>
</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://localhost:8080/delay');
            x.send();
            x.onreadystatechange = function() {
                if (x.readyState === 4) {
                    //请求完成， 修改标识变量
                    isSending = false;

                }
            }
        }

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

</html>

2-4 JSON请求

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

<body>
    <div id="result"></div>
    <script>
        // 绑定键盘按下事件
        window.onkeydown = function() {
            // console.log('test');
            // 发送请求
            const xhr = new XMLHttpRequest();
            // 设置响应体数据的类型
            xhr.responseType = 'json';
            // 初始化
            xhr.open('GET', 'http://localhost:8080/json-server');

            // 发送
            xhr.send();

            // 事件绑定
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // console.log(xhr.response);
                        // result.innertHTML = xhr.response;

                        // 手动对数据进行转换,字符串转换为对象
                        // let data = JSON.parse(xhr.response);
                        // console.log(data);
                        // result.innerHTML = data.name;

                        // 自动转换---上面设置响应体数据的类型
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;

                    }
                }
            }

        }
    </script>
</body>

</html>

2-5 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>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid #258;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#result');

        btn.addEventListener('click', function() {
            const xhr = new XMLHttpRequest();
            xhr.open("GET", "http://localhost:8080/ie");
            // ajax解决IE请求缓存问题
            xhr.open("GET", "http://localhost:8080/ie?t=+Date.now()");
            xhr.send();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>

</body>

</html>

2-6 请求超时与网络异常处理

<!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: 1px solid #258;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#result');
        btn.addEventListener('click', function() {
            const xhr = new XMLHttpRequest();
            // 超时设置 2s
            xhr.timeout = 2000;
            // 超时回调
            xhr.ontimeout = function() {
                    alert("网络异常，请稍后再试！");
                }
                // 网络异常的回调
            xhr.onerror = function() {
                alert("你的网络似乎出了一些问题");
            }

            xhr.open("GET", 'http://localhost:8080/delay');
            xhr.send();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>

</body>

</html>

2-7 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">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap-grid.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <title>Document</title>
</head>

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

        $('button').eq(2).click(function() {
            $.ajax({
                // url
                url: 'http://localhost:8080/delay',
                // 参数
                data: {
                    a: 100,
                    b: 200
                },
                // 请求类型
                type: 'GET',
                // 响应体结果
                dataType: 'json',
                success: function(data) {
                    console.log(data);
                },

                // 超时时间
                timeout: 2000,

                // 失败的回调
                error: function() {
                    console.log('出错了！');
                },
                // // 头信息
                // headers: {
                //     c: 300,
                //     d: 400
                // }

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

</html>
牛小小小婷～
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax请求数据小实例
10-18
使用Ajax get请求数据的小例子，使用$.each()循环显示到表格，里面有接口，大家可以使用，欢迎指导学习
ajax只按最后一次请求,只执行最后一个Ajax请求
weixin_39535527的博客
08-06 2216
我想验证使用jQuery ajax和php的字段。只执行最后一个Ajax请求当我开始录入多于3个字符时，它将请求发送到php文件，但是我的问题是当我点击3个有效字符并且第4个无效时，我必须等待执行请求4次。我想只执行最后一个请求，并杀死其他挂起的请求我想：xhr = $.ajax(//...);xhr.abort();和if(typeof xhr !== 'undefined')xhr.abort...
php多次请求只执行最后一次,ajax多次请求，只执行最后一次的方法
weixin_29847829的博客
04-03 220
ajax多次请求，只执行最后一次的方法有时候点击按钮进行异步请求数据的时候可能网络差，用户会点击很多次，或者页面有很多相同的按钮，参数不同，但是调用的ajax相同，只想得到最后一次结果我的思路是用闭包记录执行次数，并同时记录发起ajax的次数，等数据返回的时候比较两次次数的结果，渲染最后一次数据多说无益，上代码Title获取数据点击次数//定义点击次数和方法执行次数var a = 1;var fl...
ajax封装实例代码
11-04
原文链接https://blog.csdn.net/likesyour/article/details/83716390
初学原生AJAX（2）：express框架基本使用、ajax处理get/post请求、请求超时与网络异常处理、取消请求操作
lalala_dxf的博客
07-21 921
简单来说就是：模拟后端服务器1、初始化 2、下载安装express 3、基本使用 express.js 3、ajax处理get请求 3.1 不传参 server.js模拟服务器 ajax发送请求并且取得响应 4、ajax处理post请求 4.1 传参 server.js ajax发送post请求并且取得响应 结果： 后端处理请求头 其他常用的响应头 发送json格式数据 发送表单数据 发送纯文本（不指定Content-type时，为默认值） 发送html文本 5、服务器
js---封装ajax的get请求和post请求
前端与计算机相关知识的分享，博主的qq523235674
09-19 1569
1、函数接受一个对象配置信息，url为请求的地址，type为请求的类型，data为请求参数，success为请求成功的回调函数，fail为请求失败的回调函数。
JavaScript 中使用Ajax进行网络post请求和get请求
路宇的博客
12-31 4188
前言： 使用Ajax进行网络请求，默认是异步请求，而且不需要刷新页面，就可以发送请求，获取服务端返回来的数据。 一、Ajax的get请求 做一个实例来使用Ajax,点击button按钮后，在div中显示服务器返回来的response响应体内容，具体注释已经在代码中给出了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-U
原生 JS Ajax,GET和POST 请求实例代码
11-25
javascript/js的ajax的GET请求代码如下所示： [removed] /* 创建 XMLHttpRequest 对象 */ var xmlHttp; function GetXmlHttpObject(){ 　if (window.XMLHttpRequest){ 　// code for IE7+, Firefox, Chrome, Opera...
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
11-23
$.post、$.get是一些简单的方法，如果要处理复杂的逻辑，还是需要用到jQuery.ajax() 一、$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType }); 二、...
Ajax提交post请求案例分析
12-10
前言：博主之前有篇文章是快速入门Ajax ，主要是利用Ajax做简单的get请求，今天给大家分享一篇利用Ajax提交post请求，以及使用post时需要注意的地方，还是以案例的方式告诉大家。 案例： 注册表单 文件结构图： 06-...
jsp+ajax发送GET请求的方法
01-08
本文实例讲述了ajax发送GET请求，然后通过jsp页面来接收处理的实现方法。分享给大家供大家参考。具体实现方法如下： Ajax发送GET请求 这里用一个实例演示Ajax发送get请求，实例具体要求为一个注册页面，当用户填写完...
Ajax用法总结（包括原生Ajax、Jquery、Axois）
exercise_smile的博客
05-16 433
AJAX 全称为 Asynchronous JavaScript And XML， 就是异步的 JS 和 XML。XML 可扩展标记语言。XML 被设计用来传输和存储数据。XML 和 HTML 类似， 不同的是 HTML 中都是预定义标签， 而 XML 中没有预定义标签，全都是自定义标签， 用来表示一些数据< student > < name > 孙悟空 < age > 18 < gender > 男
.net JQ AJAX 请求 FromBody 接收格式
最新发布
大柱子
05-22 92
.net core FromBody 接收前台的ajax 数据
AJAX、
2301_80480494的博客
05-16 1015
Ajax全称为Asynchronous Javascript And XML，即异步JS和XMLAJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式通过Ajax可以在浏览器中向服务器发送异步请求无刷新获取数据，先展示页面，需要时获取数据XML：可扩展标记语言，被设计用来传输和存储数据XML和HTML类似，不同点：HTML中都是预定义标签，XML中没有预定义标签，全是自定义标签，用来表示一些数据现在已被JSON取代。
04-Json/Ajax/Vue的知识
XQ_898878888的博客
05-16 684
1. Json结构 1.1 Json概述 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，实现数据前后端交互。 它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。 JSON采用完全独立于程序语言的文本格式。这些特性使JSON成为理想的数据交换语言。 1.2 Json基本格式 1.2.1 对象格式 对象（object）是无序的"key":value键值对集合，一个对象以“{”开始，“}”结束，每个"key"后面跟一个:，键值对之间使用,分隔。 例如
前端开发工程师——ajax
[ 「今でもあなたは私の光。」❤️如今你依旧是我的光。
05-11 429
终端输入请求报文/响应报文。
使用MPLS解决BGP的路由黑洞（详解）
qq_64302290的博客
05-18 274
我们知道在MPLS中数据的转发不再依靠路由表而是靠标签（注意：标签是在路由的基础上形成的）。所以在BGP中，我们依靠的就是这个特性来解决BGP的路由黑洞。BGP路由黑洞的解释：BGP的路由黑洞其实就是路由层面可达，数据层面不可达。（你可以收到对方的路由，但是不能和对方通讯。
网络：HTTPS的加密
li209779的博客
05-18 1146
本文是对于https加密的知识总结以上就是我对于HTTPS的知识总结。
计算机网络
zengkui198513的博客
05-15 391
上面的每一个问题是每一层都必须面对的也都必须要解决的。每一层而且必须要覆盖上面的信息！
AJAX请求获取数据，python代码实例，直接写代码
08-05
在代码中，我们使用`@app.route`装饰器来设置接收AJAX请求的路由和请求方法，这里是`/get_data`和`POST`方法。当收到请求时，`get_data`函数会被调用。 在`get_data`函数中，我们首先使用`request.get_json()`方法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值