AJAX实现

Sonder,

已于 2022-08-09 22:08:14 修改

阅读量144

点赞数 1

分类专栏：前后端交互文章标签： ajax javascript ecmascript

于 2022-08-09 22:03:26 首次发布

本文链接：https://blog.csdn.net/qq_43178432/article/details/126249372

版权

前后端交互专栏收录该内容

2 篇文章 0 订阅

订阅专栏

AJAX

AJAX实现方式

AJAX实现方式

AJAX全称为 Asynchronous JavaScript And XML ，就是异步的 JS 和 XML

通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势： == 无刷新获取数据 ==

AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

优点：

可以无需刷新页面而与服务器端进行通信
允许你根据用户事件来更新部分页面内容

缺点：

没有浏览历史，不能回退
存在跨域问题（同源）
SEO（Search Engine Optimization，搜索引擎优化）不友好，爬虫无法爬取

1.原生AJAX

实现效果展示
请添加图片描述

对于服务端，创建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 GET");
});

app.post('/server', (request, response) => {
    // 设置响应头, 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头设置,其中*表示所有响应头都可以接收
    response.setHeader('Access-Control-Allow-Headers', '*')
        // 设置响应体
    response.send("Hello Ajax POST");
});
// 4. 监听服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中...");
})

然后开启服务端node server.js

对于前端界面
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>
        const but = document.getElementsByTagName('button')[0]
        const result = document.getElementById('result')
        but.onclick = function() {
            const xhr = new XMLHttpRequest()
            xhr.open('GET', 'http://127.0.0.1:8000/server?a=1')
            xhr.send()
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        console.log('状态码', xhr.status)
                        console.log('状态字符串', xhr.statusText)
                        console.log('所有响应头', xhr.getAllResponseHeaders())
                        console.log('响应体', xhr.response)
                        result.innerHTML = xhr.response
                    } else {}

                }
            }
        }
    </script>
</body>

</html>

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>
        // 获取元素对象
        const result = document.getElementById('result');
        // 绑定事件
        result.addEventListener("mouseover", function() {
            // 1. 创建对象
            const xhr = new XMLHttpRequest();
            // 2. 初始化 设置类型（请求方式）与url
            xhr.open('POST', 'http://127.0.0.1:8000/server');

            // 设置请求头

            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            // 自定义头信息，需要在服务端设置允许所有类型的头
            // xhr.setRequestHeader('name', 'Lxq');
            // 3. 发送   设置请求参数（请求体）
            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>

注意点：
其中属性onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState属性存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化–XMLHttpRequest 实例已经生成，但是open()方法还没有被调用
1: 服务器连接已建立 --.send()方法还没有被调用，仍然可以使用setRequestHeader()，设定HTTP请求的头信息
2: 请求已接收-- send()方法已经执行，并且头信息和状态码已经收到
3: 请求处理中-- 返回部分数据
4: 请求已完成，且响应已就绪

设置请求头信息

在post中添加

 // 设置请求头
 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 // 自定义头信息，需要在服务端设置允许所有类型的头
 xhr.setRequestHeader('name', 'Lxq');

自定义头信息时，需要在server.js中添加一行响应头的设置

response.setHeader('Access-Control-Allow-Headers', '*');

但是仅仅如此，依然不行。我们注意到还有一个OPTIONS请求方法，它会对请求头进行校验，检测头信息可用不可用

要知道，我们在server.js中并没有创建过OPTIONS相关的路由规则，所以是接收不到OPTIONS请求的

我们可以用将post方法改为all，它可以接收任意类型的请求（GET/POST/PUT/DELETE/PATCH/OPTIONS…）

也就是将server.js中app.post改为app.all

服务器端响应 JSON 数据

server.js中响应体为对象时

// 设置响应体
    const data = {
            name: 'Hello Ajax'
        }
    // 对 对象 进行 字符串 转换
    let str = JSON.stringify(data);
    response.send(str);

那么POST.html中接收到的响应也为字符串，需要将其装换为对象。有两中操作

手动转换数据
这个时候使用JSON工具方法，可以将json字符串转换为json对象

let response = this.response;
console.log(typeof response); // string
data = JSON.parse(response);
result.innerHTML = data.name;

自动装换
只需在前面设置响应体的类型，后面都会自动转换

// 设置响应体类型
xhr.responseType = 'json';

请求超时或网络异常

如果请求超时，则应该给出相应的超时提醒，一方面可以减少网络带宽资源的占用，一方面也可以提升用户体验

// 设置超时时间
xhr.timeout = 1000;
// 设置超时回调
xhr.ontimeout = () => {
    alert('请求超时！');
};

当然除了服务器响应时间较长导致请求超时之外，还有可能因为我们的网速或者其他网络问题导致请求失败
可以添加一个onerror回调函数，对此类问题进行处理

// 设置网络异常回调
xhr.onerror = () => {
    alert("网络异常");
};

// 手动取消请求
xhr.abort()

请求重复发送问题

如果服务器响应相对比较慢，而用户因为得不到响应而频繁地点击按钮。那么，浏览器短时间内会向服务器发起大量重复的请求，服务器就要对这些请求进行频繁的处理，服务器端的压力就会非常的大
思路：发送一个请求之前，查询之前是否有正在进行处理的相同请求，如果有，则取消之前的相同请求，发送一个新的请求。这样保证同一个请求同一时间内只会有一个，这样服务器的压力就会小一些

const btns = document.getElementsByTagName('button');
let xhr = null;
 // 标识是否正在发送 AJAX 请求
 let isSending = false;
 btns[0].addEventListener('click', () => {
     // 若上一个请求尚未完成，则手动取消请求
     if (isSending) {
         xhr.abort();
     }
     xhr = new XMLHttpRequest();
     isSending = true
     xhr.open('GET', 'http://127.0.0.1:8000/send_n');
     xhr.send();
     xhr.onreadystatechange = function() {
         // 请求响应完毕后，修改变量标识
         if (xhr.readyState === 4) {
             isSending = false;//请求完成，不用取消
         }
     };
 });

请添加图片描述

总结get/post两种请求方法

get请求方式中不用设置请求头信息

post请求方式必须要设置：（普通类型 or json类型）

aj.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);

aj.setRequestHeader(‘Content-Type’, ‘application/json’);
get请求方式中将请求参数挂于【请求地址?】之后，多个参数用&连接；send()无参数

post请求方式将请求参数置于send()中传递（遇到json类型需要转为字符串再传递）

因为send()方法只能传递字符串类型的数据—借助JSON.stringify()方法转换类型
服务器端对get的响应无需配置用什么方法去解析什么类型的参数，req.query直接获取

对post的响应需要配置：（当然，用于解析post的body-parser第三方模块不能少）
```
         对于普通类型：app.use(bodyParser.urlencoded({ extended: false }));

         对于json类型：app.use(bodyParser.json());
```

API总结
XMLHttpRequest()：创建 XHR 对象的构造函数
status：响应状态码值，如 200、404
statusText：响应状态文本，如 ’ok‘、‘not found’
readyState：标识请求状态的只读属性 0-1-2-3-4
onreadystatechange：绑定 readyState 改变的监听
responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应
response：响应体数据，类型取决于 responseType 的指定
timeout：指定请求超时时间，默认为 0 代表没有限制
ontimeout：绑定超时的监听
onerror：绑定请求网络错误的监听
open()：初始化一个请求，参数为：(method, url[, async])
send(data)：发送请求
abort()：中断请求（发出到返回之间）
getResponseHeader(name)：获取指定名称的响应头值
getAllResponseHeaders()：获取所有响应头组成的字符串
setRequestHeader(name, value)：设置请求头

2.jQuery封装的AJAX

get

$.get(url, [data], [callback], [type])

url:请求的URL 地址
data:请求携带的参数
callback:载入成功时回调函数
type:设置返回内容格式，xml, html, script, json, text, _default

post

$.post(url, [data], [callback], [type])

url:请求的URL 地址
data:请求携带的参数
callback:载入成功时回调函数
type:设置返回内容格式，xml, html, script, json, text, _default

通用方法

实例展示：
请添加图片描述

<!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>
    <style>
        button {
            margin: 5px;
            border: solid 1px #ccc;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>GET</button>
    <button>POST</button>
    <button>通用方法</button>
    <script>
        $('button').eq(0).click(() => {
            $.get(
                'http://127.0.0.1:8001/server', {
                    a: 100,
                    b: 200
                },
                function(data) {
                    console.log('get请求', data);
                });
        });
        $('button').eq(1).click(() => {
            $.post(
                'http://127.0.0.1:8001/server', {
                    a: 100,
                    b: 200
                },
                function(data) {

                    console.log('post请求', data);
                }, 'json');
        });
        $('button').eq(2).click(() => {
            $.ajax({
                // 请求地址
                url: 'http://127.0.0.1:8001/server',
                // 请求参数
                data: {
                    a: 100,
                    b: 200
                },
                // 请求类型
                type: 'GET',
                // 响应体类型
                dataType: 'json',
                // 成功回调
                success: data => {
                    console.log('通用', data); // string {name: "Hello jquery"}  开启dataType后：object {name: "Hello jquery"}
                },
                // 超时时间
                timeout: 1000,
                // 失败的回调
                error: () => {
                    alert('出错了');
                },
                // 头信息
                headers: {
                    c: 300,
                    d: 400
                }
            });
        });
    </script>
</body>

</html>

const { request, response } = require('express')
const express = require('express')
const app = express()
app.all('/server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*')
    response.setHeader('Access-Control-Allow-Headers', '*')
    const data = { name: 'jquery' }
    response.send(JSON.stringify(data))
})
app.listen(8001, () => {
    console.log('端口8001已启动......')
})

3.axios

get

axios#get(url[,config])

函数返回结果是一个promise对象，用then回调处理

post

axios#post(url[,data[,config]])

通用方法

实例展示：
请添加图片描述

<!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 crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
    <style>
        button {
            margin: 5px;
            border: solid 1px #ccc;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>GET</button>
    <button>POST</button>
    <button>通用方法</button>
    <script>
        const btn = document.querySelectorAll('button')
        btn[0].onclick = function() {
            // axios.defaults.baseURL = 'http://127.0.0.1:8000/';
            axios.get('http://127.0.0.1:8000/server-axios', {
                // 请求参数
                params: {
                    a: 100,
                    b: 200
                },
                // 请求头
                headers: {
                    c: 300,
                    d: 400
                }
            }).then(value => {
                console.log(value);
            });
        }
        btn[1].onclick = function() {
            axios.defaults.baseURL = 'http://127.0.0.1:8000/';
            axios.post('server-axios', {
                // 请求体
                e: 500,
                f: 600
            }, {
                // 请求参数
                params: {
                    a: 100,
                    b: 200
                },
                // 请求头
                headers: {
                    c: 300,
                    d: 400
                }
            }).then(value => {
                console.log(value);
            });
        }
        btn[2].onclick = function() {
            axios.defaults.baseURL = 'http://127.0.0.1:8000/';
            axios({
                method: 'POST',
                url: 'server-axios',
                // 请求参数
                params: {
                    a: 100,
                    b: 200
                },
                // 请求头
                headers: {
                    c: 300,
                    d: 400
                },
                // 请求体
                data: {
                    e: 500,
                    f: 600
                },
                // 响应体类型
                dataType: 'json'
            }).then(response => {
                console.log(response.status); // 200
                console.log(response.statusText); // OK
                console.log(response.headers); // {content-length: "22", content-type: "text/html; charset=utf-8"}
                console.log(typeof response.data, response.data); // object {name: "Hello axios"}
            });
        }
    </script>
</body>

</html>

const { request, response } = require('express')
const express = require('express')
const app = express()
app.all('/server-axios', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*')
    response.setHeader('Access-Control-Allow-Headers', '*')
    const data = { name: 'jquery' }
    response.send(JSON.stringify(data))
})
app.listen(8000, () => {
    console.log('端口8000已启动......')
})

4.fetch函数

fetch() 方法用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。如果网络请求超时或者异常将会执行erro，或者.catch()函数

回调地狱：第二个then函数的形参是第一个then函数里方法的一个正确的结果
请添加图片描述

<!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>
        button {
            margin: 5px;
            border: solid 1px #ccc;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button>fetch函数的AJAX请求</button>
    <script>
        const btn = document.querySelector('button')
        btn.onclick = function() {
            fetch('http://127.0.0.1:8000/server-fetch?a=100&b=100', {
                // 请求方法
                method: 'POST',
                // 请求头
                headers: {
                    c: 300,
                    d: 400
                },
                // 请求体
                body: 'e=500&f=600'
            }).then(response => {
                console.log(response);
            });
        }
    </script>
</body>
</html>

const { request, response } = require('express')
const express = require('express')
const app = express()
app.all('/server-fetch', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*')
    response.setHeader('Access-Control-Allow-Headers', '*')
    const data = { name: 'fetch' }
    response.send(JSON.stringify(data))
})
app.listen(8000, () => {
    console.log('端口8000已启动......')
})

如果只想要响应体内容，可以修改then回调

...
.then(response => {
    return response.text();
}).then(response => {
    console.log(typeof response, response); // string {"name":"Hello fetch"}
});

如果明确响应体内容为 json 字符串，可以按如下修改，将会返回一个 object 对象

...
.then(response => {
    return response.json();
}).then(response => {
    console.log(typeof response, response); // object {"name":"Hello fetch"}
});