• Ajax的基本使用（以express框架为例）

    文章目录

    AJAX

    Ajax全称为Asynchronous JavaScript And XML，就是一步的JS和XML通过AJAX可以在浏览器中向服务器发送异步请求，最大优势就是无刷新获取数据。
    AJAX不是新的编程语言，而是一种将现有的标准组合在一起的新方式。
    XML可扩展标记语言
    XML被设计用来传输和存储数据
    XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据
    不过可以用json代替

    AJAX优点：
    1） 可以无需刷新页面与服务器进行通信
    2） 允许你根据用户事件来更新部分页面内容
    AJAX缺点：
    1）没有浏览历史，不能回退
    2）存在跨域问题
    3）SEO不友好

    HTTP协议：
    Hypertext transport protocol协议，协议详细规定了浏览器和万维网服务器之间相互通信的规则约定。

    请求报文
    行： GET
    头： Host:atguigu.com
    Cookie:name=guigu
    …
    空行
    体 username=admin&password=admin

    响应报文
    行：HTTP/1.1 200 OK
    头：Content-Type:text/html;charset=utf-8
    …
    体：

    Express框架

    因为AJAX需要向服务端发送请求，因此我们需要一个服务端，Express框架比较简单，借助基本的功能就能够使用AJAX。

    Express是基于node.js的需要先安装node.js

    安装

    终端打开输入：

    npm init --yes

    • 1

    执行完成会出现一个package.json的文件
    然后安装express
    输入

    npm i express

    • 1

    安装完成了。

    实例

    express的基本使用

    创建express基本使用.js:

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

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

// 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response) => {
    //设置响应
    response.send("HELLO EXPRESS");
});

app.listen(8000, () => {
    console.log("服务器已经启动,8000端口监听中....")
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    然后控制台进入当前文件夹下执行

    node express基本使用.js

    • 1

    运行输出：
    在这里插入图片描述
    说明成功运行。

    GET请求

    点击按钮则发送请求

    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 type="button">点击发送请求button>
    <div id="result">div>
    <script>
        // 获取button元素
        const btn = document.getElementsByTagName("button")[0];
        const result = document.getElementById("result");
        // 绑定事件
        btn.onclick = function() {
            // 创建对象
            const xhr = new XMLHttpRequest();
            // 初始化,设置请求方法和url
            xhr.open("GET", "http://127.0.0.1:8000/server?a=100&b=200&c=300")
            // 发送
            xhr.send();
            // 事件绑定 处理服务端返回的结果
            // on  when 当...时候
            // readystate 是xhr对象的属性,表示状态0 1 2 3 4
            // change 改变
            xhr.onreadystatechange = function() {
                // 判断(服务端返回了所有的结果)
                if(xhr.readyState === 4){
                    // 判断服务端返回了所有的结果
                    // 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的文本
                        result.innerHTML = xhr.response;
                    }else{

                    }
                }
            }
        }
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58

    server.js:

    const express = require('express');

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

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

app.listen(8000, () => {
    console.log("服务器已经启动,8000端口监听中....")
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    然后终端执行

    node server.js

    • 1

    打开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 POSTtitle>
    <style>
        #result{

            width:200px;
            height: 100px;
            border: solid 1px #903
        }
    style>
head>
<body>
    
    <div id="result">div>
    <script type="text/javascript">
        // 获取元素对象
        const result = document.getElementById("result");
        // 绑定事件
        result.addEventListener("mouseover", function(){
            // 创建对象
            const xhr = new XMLHttpRequest();
            // 初始化,设置类型与URL
            xhr.open("POST", "http://127.0.0.1:8000/server");
            // 设置请求头
            // "Content-Type",设置请求体类型
            // "application/x-www-form-urlenc"参数查询字符串类型 固定写法
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            // 发送
            xhr.send("a=100&b=200&c=300");
            // 事件绑定
            xhr.onreadystatechange = function(){
                // 判断
                if (xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48

    server.js

    const express = require('express');

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

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

app.post('/server', (request, response) => {
    //设置响应
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.send("HELLO AJAX POST");
});

app.listen(8000, () => {
    console.log("服务器已经启动,8000端口监听中....")
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    终端执行

    node server.js

    • 1

    打开POST.html
    在这里插入图片描述

    当鼠标移动到框内区域结果如下：
    在这里插入图片描述

    发送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>AJAX POSTtitle>
    <style>
        #result{

            width:200px;
            height: 100px;
            border: solid 1px #903
        }
    style>
head>
<body>
    
    <div id="result">div>
    <script type="text/javascript">
        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")
            // 发送
            xhr.send();
            // 事件绑定
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        // console.log(xhr.response)
                        // result.innerHTML = xhr.response;

                        // // 手动改变对象
                        // let data = JSON.parse(xhr.response)
                        // console.log(data)

                        // 自动转换
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        }
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52

    server.js:

    const express = require('express');

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

// 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应
    response.setHeader("Access-Control-Allow-Origin", "*");
    // response.send("HELLO AJAX");
    const data = {
        name:"atguigu"
    };
    // 对对象进行转化
    let str = JSON.stringify(data);
    response.send(str);
});

app.post('/server', (request, response) => {
    //设置响应
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.send("HELLO AJAX POST");

});

app.listen(8000, () => {
    console.log("服务器已经启动,8000端口监听中....")
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    启动服务
    执行html：
    在这里插入图片描述
    当按下键盘任意键时：
    在这里插入图片描述
    值得注意的是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>AJAX POSTtitle>
    <style>
        #result{

            width:200px;
            height: 100px;
            border: solid 1px #903
        }
    style>
head>
<body>
    
    <div id="result">div>
    <button>点击发送请求button>
    <script type="text/javascript">
        const result = document.querySelector("#result");
        const btn = document.getElementsByTagName("button")[0];

        btn.addEventListener("click", function() {
           const xhr = new XMLHttpRequest();

        //    超时回调
           xhr.timeout = 2000;
           xhr.ontimeout = function(){
            alert("网络异常,请稍后再试");
           }

        //    网络异常回调
        xhr.onerror = function(){
            alert("你的网络似乎出现了一些问题")
        }

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51

    server.js:

    const express = require('express');

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

// 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应
    response.setHeader("Access-Control-Allow-Origin", "*");
    // response.send("HELLO AJAX");
    const data = {
        name:"atguigu"
    };
    // 对对象进行转化
    let str = JSON.stringify(data);
    response.send(str);
});

app.post('/server', (request, response) => {
    //设置响应
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.send("HELLO AJAX POST");

});


app.get("/delay", (request, response) => {
    response.setHeader("Access-Control-Allow-Origin", "*");
    setTimeout(()=>{response.send("延迟响应")}, 3000);
})

app.listen(8000, () => {
    console.log("服务器已经启动,8000端口监听中....")
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    运行得到：
    在这里插入图片描述
    点击按钮发送请求，请求尝试并给出提示，因为服务端给定延时大于请求端等待时间，因此能够展现这样的效果。
    在这里插入图片描述

    取消重复请求

    取消重复请求.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 POSTtitle>
    <style>
        #result{

            width:200px;
            height: 100px;
            border: solid 1px #903
        }
    style>
head>
<body>
    <button>点击发送button>
    <button>点击取消button>
    <script type="text/javascript">
        // 获取元素
        const btns = document.querySelectorAll("button");
        let x = null;
        // 标识变量
        let isSending = false;
        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;
                }
            }
        }

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    server.js:

    const express = require('express');

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

// 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应
    response.setHeader("Access-Control-Allow-Origin", "*");
    // response.send("HELLO AJAX");
    const data = {
        name:"atguigu"
    };
    // 对对象进行转化
    let str = JSON.stringify(data);
    response.send(str);
});

app.post('/server', (request, response) => {
    //设置响应
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.send("HELLO AJAX POST");

});


app.get("/delay", (request, response) => {
    response.setHeader("Access-Control-Allow-Origin", "*");
    setTimeout(()=>{response.send("延迟响应")}, 3000);
})

app.listen(8000, () => {
    console.log("服务器已经启动,8000端口监听中....")
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    运行后疯狂点击发送，发现只能存在一个相同的请求
    在这里插入图片描述

  • 相关阅读:
    iOS App外包开发的内存泄露解决
    51单片机内部外设：实时时钟(SPI)
    秒杀系统的设计与实现思路
    linux系统编程7-锁、信号量、线程同步
    Python装饰器使用
    【云原生之k8s】K8s 管理工具 kubectl 详解(一)
    Kamiya丨Kamiya艾美捷人β2-微球蛋白ELISA说明书
    基于ssm的视力保养连锁预约系统设计与实现-计算机毕业设计源码+LW文档
    react--路由封装
    .NET周刊【9月第2期 2023-09-10】
  • 原文地址：https://blog.csdn.net/qq_52785473/article/details/126461517