【AJAX】学习笔记

00- AJAX 介绍

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。

XMLHttpRequest 只是实现 Ajax 的一种方式。

github学习笔记文件：https://github.com/kurohoneko/web/tree/main/AJAX

1. XML 简介

XML是可扩展标记语言，被设计用来传输数据和存储数据，XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全是自定义标签。

也就是说，我的个人信息数据可以用XML表示为：

<my>
    <name>一个名字</name>
    <age>18</age>
</my>

现在已经被JSON取代了。

2. JSON 简介

JSON 是一种轻量级的数据交换格式，它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

用JSON表示：

{"name":"一个名字", "age":18 }

转换：

JSON.stringify(xxx); 转换为字符串，比如用于转换为 JSON格式的字符串。

JSON.parse(xxx); 转换为对象，比如转换为 JSON格式的对象。

类似于 XML 的特性：

JSON 是纯文本
JSON 具有“自我描述性”（人类可读）
JSON 具有层级结构（值中存在值）
JSON 可通过 JavaScript 进行解析
JSON 数据可使用 AJAX 进行传输

相比 XML 的不同之处：

没有结束标签
更短
读写的速度更快
能够使用内建的 JavaScript eval() 方法进行解析
使用数组
不使用保留字

3. AJAX 的优点、缺点

优点：

无需刷新页面就可以与服务器通信
允许根据用户事件（鼠标、键盘、表单等）来更新部分页面内容

缺点：

没有浏览历史，不能回退
存在跨域问题（同源）
SEO不友好（搜索引擎网页爬虫爬不到）

01- HTTP 协议请求报文与响应报文结构

HTTP协议超文本传输协议，协议规定了浏览器与万维网服务器之间互相通信的规则。

主要规范了两部分内容：请求、响应。

请求报文（客户端向服务器请求）

行 GET/POST /s?ie=utf-8 HTTP/1.1
头 Host: google.com

User-Agent: chrome 83 ....等等

空行
体 username=xxx 如果是GET请求就为空，如果是PSOT请求可以不为空（可有可无）

响应报文（服务器发给客户端）

行 HTTP/1.1 200（响应状态码，如404 500） OK（响应状态字符串，跟状态码对应，不需要单独设置）
头 Content-Type: text/html;charset=utf-8

Content-length: 2048 ....等等

空行
体（主要的返回结果）

<html>

</html>

02- Chrome 网络控制台查看通信报文

Network，会列出网页加载过程中所有发送的请求。点击 s?ie=utf-8.... 查看内容。

Headers（头） - Preview（响应体预览） - Response（响应体）- Initiatg - Timing - Cookies

【GET请求与 POST请求】

Headers

-Response Headers （响应头）

点击“view source” 后，显示原始的响应报文，响应行 HTTP/1.1 200 OK 与响应头。响应体在 Response（响应体） 里，显示HTML代码与内联的css样式等

-Request Headers （请求头）

【GET请求】默认不显示请求行，点击 “view source” 后，显示请求行，GET /s?ie=utf-8&...... HTTP/1.1，也就是：方法 + URL + HTTP协议版本。

【POST请求】点击 “view source” 后，显示请求行，显示 POST /login HTTP/1.1

-Query String Parameters（查询字符串参数）

对 URL 当中的参数进行解析，格式化，更加准确地看到参数情况。

-Form Data（请求体）

比如表单，点击提交按钮后，浏览器把HTTP的报文封装好，提交给目标指定服务器的端口。login_name=XXXX&login_password=123456

Preview

响应体预览，对 Response（响应体） 里的代码进行预览，可以看到网页

03- Node.js 安装

AJAX运行应用时需要一个服务端。

https://nodejs.org/zh-cn/download/

然后cmd，node -v 查看是否安装成功与安装的版本

04- Express 框架

这里主要学前端这个express可以不懂就把他当成接收返回数据的后端服务器就行了

https://www.expressjs.com.cn/

在主工作文件夹右键，在集成终端中打开，输入如下：

npm init --yes

然后安装Express，还是右键打开终端，输入如下：

npm i express

然后编写 js 文件：

server.js

 // 这里主要学前端 这个express可以不懂 就把他当成接收返回数据的后端服务器就行了


// 1. 引入 express
const { response } = require('express');
const express = require('express');

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

// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对相应报文的封装
// /server 是如果客户端浏览器向服务端请求时，如果url的路径 请求行的第二段内容 的路径是/server的话
//         就会执行回调函数里面的代码，并且由response做出响应
app.get('/server', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');

    //设置响应体
    response.send('HELLO 你好 AJAX');
    
});

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

然后右键 server.js 文件所在文件夹，打开终端，输入 node 文件名，再打开浏览器 127.0.0.1:8000/server，点击network，刷新查看。

-这个 /server 是什么意思？我初学大概猜测的是，这个路由和交换机路由差不多，如果url是xxx.com/server，那就是去往server那个页面，就执行'/server'的回调函数，来获取相对应的数据。比如，youtube.com/me，路由规则写'/me'并在回调函数里写入我的个人信息数据，好让服务器获取。【2023年2月12日刚学一会儿】

05- AJAX 请求的基本操作

POST请求和GET请求大致相同。

1. GET 请求

编写客户端HTML文件：

客户端HTML代码.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 #f00;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>

    <script>
        // 获取 button 元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        // 绑定事件
        btn.onclick = function() {
            // 1. 创建对象
            const xhr = new XMLHttpRequest();
            // 2. 初始化 设置请求方法和 url 
            xhr.open('GET', 'http://127.0.0.1:8000/server');
            // 3. 发送
            xhr.send();
            // 4. 事件绑定 处理服务端返回的结果
            // on 当...的时候
            // readystate 是 xhr 对对象中的属性，表示状态 0 1 2 3 4
            // 0 未初始化  1 open方法调用完毕 2 send方法调用完毕 3 服务端返回部分结果 4 服务端返回所有结果
            // change 改变
            xhr.onreadystatechange = function() {
                // 判断（服务端返回了所有的结果）
                if(xhr.readyState === 4){
                    // 判断响应状态码 200 404 500 ....
                    // 状态码只要是2xx 都是成功 所以范围在200到299
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 处理结果 行 头 空行 体
                        // 1. 响应行
                        console.log(xhr.status); //状态码 200 404等
                        console.log(xhr.statusText); //状态字符串 OK
                        console.log(xhr.getAllResponseHeaders()); //所有的响应头
                        console.log(xhr.response); //响应体
                        
                        // 把响应结果呈现在div中 
                        result.innerHTML = xhr.response;
                    }else{
                    }
                }
            }
        }
    </script>
</body>
</html>

设置请求方法和url，xhr.open('GET', 'http://127.0.0.1:8000/server?name=q&pid=12345');

然后把 server.js 文件在终端运行后，打开html文件，点击发送请求按钮，div显示了 “HELLO 你好 AJAX”。可network刷新查看发送的请求报文。

2. AJAX 设置请求参数

在 url 后面添加参数，以 ? 号分隔，加参数名字与参数值，如有多个值，用 & 符号分隔。

例如name是q，ipd是12345，那么就是：xhr.open('GET', 'http://127.0.0.1:8000/server?name=q&pid=12345')

3. POST 请求

编写HTML，把GET改为POST。不建议使用GET发送请求体body，建议POST。HTTP 协议没有为 GET 请求的 body 赋予语义，也就是即不要求也不禁止 GET 请求带 body。HTTP GET 请求可以有 body 吗？

情景：当把鼠标放到div处时，发送POST请求。

AJAX发送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 #f00;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        // 获取元素对象
        const result = document.getElementById("result");
        // 绑定事件
        result.addEventListener("mouseover", function() {
            console.log("鼠标移动至div了");
            // 1. 创建对象
            const xhr = new XMLHttpRequest();
            // 2. 初始化 设置类型与url
            xhr.open('POST', 'http://127.0.0.1:8000/server');
            // 3. 发送
            xhr.send();
            // 4. 事件绑定
            xhr.onreadystatechange = function(){
                // 判断
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

之前的 server.js 文件只需要添加 post 路由规则：（其中post不要大写！xxx.post 是正确的）

server.js 添加psot路由规则

 // 这里主要学前端 这个express可以不懂 就把他当成接收返回数据的后端服务器就行了

// 1. 引入 express
const { response, request } = require('express');
const express = require('express');

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

// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对相应报文的封装
// /server 是如果客户端浏览器向服务端请求时，如果url的路径 请求行的第二段内容 的路径是/server的话
//         就会执行回调函数里面的代码，并且由response做出响应
app.get('/server', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('HELLO 你好 AJAX');
});

// 3.2 创建路由规则 POST
app.post('/server', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('HELLO AJAX 你好 post');
});

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

4. POST 设置请求体

在发送post请求时，xhr.send(); 里面设置请求体内容，如：

// 3. 发送
            xhr.send('a=100&b=200');

请求体的格式内容非常灵活，可以是 a=100&b=200&c=300 也可以是 a:100&b:200&c:300 甚至是 12312131254 。但是不可以随便写，必须让服务端可以处理可以解析，在语法上可以随意写，但实际应用中最好按照特定格式： a=100&b=200&c=300。

5. AJAX设置请求头

设置请求头需要在请求行的下面，发送的上面，也就是在open后面加一个方法调用就可以了。

这个方法是专门设置请求头的： xxx.setRequestHeader('','');

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

application/x-www-form-urlencoded是浏览器默认的编码格式

也可以自定义请求头，其他类型的请求头，比如： xxx.setRequestHeader('name','qqqq'); 但是在浏览器查看会报错，标红，因为name不是预定义的头，而Content-Type就是预定义的，

如果想发自定义请求头，需要在路由规则里设置请求头，response.setHeader('Access-Control-Allow-Headers','*');

所有类型的头信息都可以接收

 // 3.2 创建路由规则 POST
app.post('/server', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头 所有类型的头信息都可以接收
    response.setHeader('Access-Control-Allow-Headers','*');
    //设置响应体
    response.send('HELLO AJAX 你好 post');
});

但，还是不行，把post改成all，不管是get、post、什么类型的请求都可以

all 可以接收任意类型的请求不管是get 还是post 还是什么的都可以

// 创建路由规则 all 可以接收任意类型的请求
app.all('/server', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头 所有类型的头信息都可以接收
    response.setHeader('Access-Control-Allow-Headers','*');
    //设置响应体
    response.send('HELLO AJAX 你好 post');
});

6. option 请求（预检测）

option请求就是一次效验，后面还有一次才是真正的请求。

如果校验请求没有得到对应的结果，然后前端就不能发送 post 请求了。简单来说就是没有 potion路由，app.post()不行，改为 app.all(); 就可以了，可以接收任意类型的请求。

7. 服务端响应 JSON 数据

这次把url改成json-server，相应的服务端也得改。

客户端html：

客户端 - 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>JSON 响应</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #f00;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById("result");
        //绑定键盘按下事件
        window.onkeydown = function(){
            //发送请求
            const xhr = new XMLHttpRequest();
            //设置响应体数据的类型（2.自动转换）
            xhr.responseType = 'json';
            //初始化
            xhr.open('GET','http://127.0.0.1:8000/json-server');
            //发送
            xhr.send();
            //事件绑定
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 把响应体内容数据 输出给div显示
                        //result.innerHTML = xhr.response;

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

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

服务端路由规则 /json-server 。

服务端js：

服务端 js代码

 // 1. 引入 express
const { response, request } = require('express');
const express = require('express');

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

// 3.4 创建路由规则 json-server
app.all('/json-server', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头 所有类型的头信息都可以接收
    response.setHeader('Access-Control-Allow-Headers','*');
    
    //响应一个数据
    const data = {
        name: 'hhhhhhhhhh'
    };
    //对对象格式data进行转换为字符串
    let str = JSON.stringify(data);

    //设置响应体
    //response.send('HELLO AJAX 你好 json-server');
    response.send(str);
});

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

其中，服务端响应体与客户端有不同的代码，如下：

服务端响应体： response.send('HELLO AJAX 你好 json-server');

客户端把响应体内容输出显示： result.innerHTML = xhr.response; ，可以直接输出内容到div 显示

如果涉及多个数据，比如对象的属性名与属性值，不能直接传递过去，因为 响应体 response.send() 只能传输字符串，所以需要转换，字符串转对象，对象转字符串。

【服务端】：

//响应一个数据
    const data = {
        name: 'hhhhhhhhhh'
    };
//对对象格式data进行转换为字符串
    let str = JSON.stringify(data);
//设置响应体
    response.send(str);

【客户端】：
// 1.方法一： 手动对数据转换            // 手动转换时，和自动转换 let str = JSON.stringify(data); 冲突
  let data = JSON.parse(xhr.response);  // xhr.response 从字符串转换为对象
  console.log(data);                    // 显示 {"name":"hhhhhhhhhh"}
  result.innerHTML = data.name;         // 显示 hhhhhhhhhh

// 2.方法二： 自动转换
  console.log(xhr.response);            // 已经被上面的 let str = JSON.stringify(data); 转换为了对象格式
  result.innerHTML = xhr.response.name; // 显示 hhhhhhhhhh

06- nodemon 自动重启服务工具安装及使用

每当修改服务端 js 代码时，都需要手动 ctrl + c 来停止服务，再 node xxx.js 启动服务。安装 nodemon 可以自动重启服务。

打开 npm官网 https://www.npmjs.com/ ，搜索 nodemon，点击 nodemon详情页， https://www.npmjs.com/package/nodemon

右键打开终端，输入命令安装nodemon：

npm install -g nodemon

安装完了之后，即可运行 js 代码。例如：

nodemon 文件名
// 如果提示无法运行加载，则在前面加上 npx
npx nodemon 文件名

现在开始，每当对代码做出修改保存，它都会自动重启。

07- IE 浏览器缓存问题（2022-6-16 IE停用）

每次请求时，ie浏览器会有缓存问题，假如服务端更新数据，客户端可能获取的还是老的数据（缓存）。

所以，在 url 后面添加参数时间戳，每次请求时，参数都是不一样的（时间戳），所以ie会调用服务端，以便获取最新数据。

// 初始化 设置类型与url，在后面加上参数 时间戳
    xhr.open('POST', 'http://127.0.0.1:8000/ie?t=' + Date.now() );

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

延时请求、请求超时、网络异常。

客户端：

// 给按钮绑定事件
        btn.addEventListener('click', function(){
            //创建对象
            const xhr = new XMLHttpRequest();

            //超时设置 2s 2秒
            xhr.timeout = 2000;   //canceled 取消
            //超时回调
            xhr.ontimeout = function(){
                alert("请求超时，请稍后重试");
            }
            //网络异常回调
            xhr.onerror = function(){
                alert("您的网络似乎出了一些问题");
            }

            //初始化 请求类型与url
            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;
                    }
                }
            }
        });

服务端js：

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

【延时】单独给服务端的响应体设置 3000ms 的延时，点击按钮请求后，等待3秒后请求数据成功。

【超时】客户端 xhr.timeout = 2000; //超时设置 2秒，只要请求等待时间过了2秒，就出现 canceled 取消请求，因为服务器是延时3秒，所以请求失败。

【超时回调】设置超时回调，当超时了，就会触发回调函数。 xhr.ontimeout = function(){}

【异常回调】网络异常时，触发回调函数。 xhr.onerror = function(){}

09- 取消请求

1.取消请求

AJAX的取消请求，手动在请求的过程中，在结果还没回来之前，取消请求。

xhr.abort(); 执行此语句，取消当前请求（在结果返回前）。

// abort 取消请求
        btns[1].onclick = function(){
            xhr.abort();   //取消请求
        }

2.请求重复发送问题

假如用户疯狂点击请求按钮，这对服务器增加的不必要的负载和消耗。所以，点第一次请求时，接着点了第二次请求，就立马取消第一次的，如果连点七次，就取消前六次的。

服务端js：

延时 3秒的响应

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

客户端：

        const btns = document.querySelectorAll('button');
        let xhr = null;
        // 标识变量
        let isSending = false; // 是否正在发送AJAX请求

        btns[0].onclick = function(){
            //判断标识变量
            if(isSending) xhr.abort(); // 如果正在发送，则取消该请求，创建一个新的请求↓

            xhr = new XMLHttpRequest();
            // 修改 标识变量的值
            isSending = true;  // 相当于节流阀，true，是的，正在发送AJAX请求
            xhr.open("GET",'http://127.0.0.1:8000/delay');
            xhr.send();
            xhr.readyStatechange = function(){
                // 状态码===4，代表服务器已经返回全部结果，然后修改节流阀为false状态
                if(xhr.readyState === 4){
                    // 修改标识变量
                    isSending = false;
                }
            }
        }

意思就是，先声明一个标识变量 isSending = false 表明是否正在发送请求，然后判断这个标识变量，如果 if(false) 则不执行 abort 取消，然后修改 isSending = true （此时正在发送请求），接着判断 xhr.readyStatechang 状态码全等于 4，如果成立，也就是服务器返回了全部结果，最后修改标识变量 isSending = false，表明此时没有正在发送请求。

如果正在发送，则isSending为true，直接 if(true) xhr.abort() 取消该请求，创建一个新的请求。

10- jQuery发送AJAX请求

如果没有jQuery本地文件，可以下载一个或引用公共cdn 点击https://www.bootcdn.cn/jquery/

三个方法：get、post、ajax。

$.get('http://127.0.0.1:8000/server', {a:100,b:200}, function(my_data) {}, 'json' );

每种方法都是接收四个参数，第一个参数是给谁发，第二个是发什么参数，第三个是回调函数，第四个是设置响应体什么类型的。也可以只接收三个参数。

GET请求 $.get() ：

$('button').eq(0).click(function(){
    $.get('http://127.0.0.1:8000/jquery-server', {a:100,b:200}, function(data){
        console.log(data);
    });           // 显示的是字符串类型的
});

// jQuery发送AJAX请求
app.all('/jquery-server', (request,response) => {
    response.setHeader('Access-Control-Allow-Origin','*');
    response.send("Hello jQuery AJAX");
});

function(data){} 回调函数里的参数 data 是响应体，可以做一些操作。

POST请求 $.post()：

$('button').eq(1).click(function(){
    $.post('http://127.0.0.1:8000/jquery-server', {a:100,b:200}, function(data){
        console.log(data);
    }, 'json');   // 设置响应体类型 json 。结果显示的就是对象
});

// jQuery发送AJAX请求
app.all('/jquery-server', (request,response) => {
    response.setHeader('Access-Control-Allow-Origin','*');
    const data = {name:'啊啊啊啊'};
    response.send(JSON.stringify(data));   // 把对象 转换为 字符串型
});

服务端先把对象转换为字符串型，然后客户端接收到的是字符串类型的。设置了响应体类型 'json' ，然后客户端接收到的就是对象类型的了。

简单来说，不加 json 接收的是字符串，加了 json 接收的就是对象。

get 和 post 请求的区别，在浏览器显示get是字符串，post是表单，post的请求参数不在url后面，在payload的Form Data。

AJAX请求 $.ajax()：

自定义程度比较强的可以使用 AJAX 请求，简单简约的可以使用 GET POST。

1.基本的

客户端：

$('button').eq(2).click(function(){
    //$.ajax({ // 参数 是对象形式的 });
    $.ajax({
        // url
        url: 'http://127.0.0.1:8000/jquery-server',
        // 参数
        data: {a:100,b:200,c:'三百多'},
        // 请求类型
        type: 'GET',
        // 成功的回调
        success: function(data){
            console.log(data);
        }
    });
});

服务端：

// jQuery发送AJAX请求
app.all('/jquery-server', (request,response) => {
    response.setHeader('Access-Control-Allow-Origin','*');
    response.send("Hello jQuery AJAX");
});

2. 更多的自定义

客户端：

$('button').eq(2).click(function(){
    $.ajax({
        // url
        url: 'http://127.0.0.1:8000/jquery-server',
        // 参数
        data: {a:100,b:200,c:'三百多'},
        // 请求类型
        type: 'GET',
        // 响应体结果类型
        dataType: 'json',
        // 成功的回调
        success: function(data){
            console.log(data);
        },
        // 超时时间
        timeout: 2000,
        // 失败的回调
        error: function() {
            alert("出错啦！");
        },
        // 头信息
        headers: {
            aaa: 300,
            aab: 333333
        }
    });
});

服务端：

// jQuery发送AJAX请求
app.all('/jquery-server', (request,response) => {
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    const data = {name:'啊啊啊啊'};
    setTimeout(() => {
         response.send(JSON.stringify(data));
    }, 3000);
});

post请求是增加的功能第二个参数应该是添加的新数据第三个参数是设置请求报文

11- Axios 发送AJAX请求

axios目前是前端最热门的AJAX工具，vue 与 react 推荐的AJAX请求的工具包。

axios github: https://github.com/axios/axios

或者引用国内cdn：https://www.bootcdn.cn/axios/

1. get请求 axios.get(url [,config] )

语法：axios.get(url [,config] )，url 与其他配置

数据返回和处理与jQuery不一样，jQuery返回数据用回调函数，而axios的返回数据的语法为：axios.get( url... ).then( value... );

//GET请求
    axios.get('http://127.0.0.1:8000/axios-server', {
    //url参数
    params: {
        id:100,
        vip:7
    },
    //config 请求头信息
    headers: {
        name:'xxxx',
        n_age:20
        }
    }).then(value => {
        console.log(value);   //  axios与jQuery不一样，jQuery返回数据用回调函数。
    });

服务端js代码

app.all('/axios-server', (request,response) => {
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    response.send("Hello AJAX Axios");
});

2. psot请求 axios.post(url [, data [,config]] )

语法：axios.post(url [,data [,config]] )，url 、请求体、其他配置。

baseURL 是对url路径做一个简化。

不管get还是post，配置 baseURL，设置默认的url可以更加简洁，也方便了后续修改url代码。

配置 baseURL ： axios.defaults.baseURL = 'http://127.0.0.1:8000';

//配置 baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000';

axios.post('/axios-server', {
    // data 请求体
    username: 'admin XXXX',
    userpasw: '1234567890'
}, {
    // config 其他参数
    //url
    params: {
        id:200,
        vip:999
    },
    //请求头参数
    headers: {
        height: 290,
        weight: 290
    }
})

如果第二个参数（data）位置是一个对象的话，它就直接作为请求体了，所以，其他参数要写在请求体下面。

请求体发的是一个 json 格式的字符串。

3. axios 的通用方式请求 axios()

语法格式： axios(url [,config])

这个方式很好，很清晰，和协议层面贴合的非常近，和手写报文差不多，但是，这个语法还简单。

btns[2].onclick = function(){
    axios({
        //请求方法
        method: 'POST',
        //url
        url: '/axios-server',
        //url参数
        params: {
            pid:1234,
            pname:12121212
        },
        //头信息
        headers: {
            aaa:100,
            abb:200
        },
        //请求体参数
        data: {
            username: 'admin',
            userpasd: 'admin'
        }
    }).then(response => {                            // 返回数据 和 处理
        console.log(response);
        //响应状态码
        console.log(response.status);
        //响应状态字符串
        console.log(response.statusText);
        //响应头信息
        console.log(response.headers);
        //响应体
        console.log(response.data);
    })
};

预览：

12- fetch 函数发送AJAX请求

fetch函数是属于全局对象的，可以直接调用，是原生js的。 MDN社区文档介绍 fetch()

语法： fetch(url [,config])

它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。

需要调用两次then()。

客户端：

// fetch(url [,config] )
btn.onclick = function(){
    fetch('http://127.0.0.1:8000/fetch-server', {
        //请求方法
        method: 'POST',
        //请求头
        headers: {
            name: 'HHHHHHHHHHHHHH'
        },
        //请求体
        body: 'username=admin&password=admin'
    }).then(response => {
        //返回结果
        console.log(response);
        //获取响应体body，得使用返回结果里面的方法 __proto__ 里的 text() 或 json()，来获取请求体body的数据！
        //用return返回
        return response.text();
        //return response.json();  //如果服务端返回结果是 json，那就把方法换成 .json()，会解析成js对象。
    }).then(response => {
        console.log(response);
    })
}

服务端：

服务端 js代码

 // fetch() 发送AJAX请求
app.all('/fetch-server', (request,response) => {
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    response.send("Hello AJAX fetch()");
});

预览：

URL也可以修改，参数可以直接在后面添加：

fetch('http://127.0.0.1:8000/fetch-server?userid=333', {....，参数是 userid=333

如果服务端返回的数据是 json 对象，只需要把 return response.text();的 text() 方法换成 json() 方法：response.json();

13- 同源策略

字面意思，其实说白了，就是来自同一个服务。同一个树根。

比如：这个页面是从127.0.0.1:9000来的，等会请求的数据也是127.0.0.1:9000里的，那么，这两个资源是同源的。这个请求也是满足同源策略的。

服务端 js代码

const express = require('express');

const app = express();

app.get('/home', (request,response) => {
    //响应一个页面
    response.sendFile(__dirname + '/index.html');
    //相当于 127.0.0.1:9000 这个本地文件所属目录
    // __dirname ：用来动态获取当前文件模块所属目录的绝对路径
    // __filename：用来动态获取当前文件的绝对路径
});

app.get('/data', (request,response) => {
    //响应用户数据
    response.send("这个是用户数据");
});

app.listen(9000, () => {
    console.log("服务已启动...9000");
})

客户端：

index.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</title>
</head>
<body>
    <h1>AJAX 同源策略</h1>
    <h1>其实说白了，就是来自同一个服务。</h1>
    <h2>这个页面是从127.0.0.1:9000来的，等会请求的数据也是127.0.0.1:9000里的</h2>
    <h2>所以说，这两个资源是同源的。这个请求也是满足同源策略的</h2>
    <button>点击获取</button>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function(){
            const xhr = new XMLHttpRequest();
            //这里因为是满足同源策略，所以 url 可以简写
            xhr.open("GET",'/data');
            //发送
            xhr.send();
            //绑定事件
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        console.log(xhr.response);
                    }
                }
            }
        }
    </script>
</body>
</html>

然后在浏览输入 http://127.0.0.1:9000/home，会直接打开这个 index.html 文件，如图：

点击获取：

14- jsonp 跨域解决方案实现原理

jsonp是一个非官方的跨域解决方案，只支持get请求。

如何工作？网页有一些标签具有跨域能力，比如img link iframe script，JSONP就是利用 script 标签的跨域能力来发送请求的。

如何使用？1.动态创建一个script标签。2.设置script的src，设置回调函数。

举例：之前讲 jQuery发送AJAX请求时，我引用了网络上的jQuery文件：

<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>

现在来说，我本地网页的url 与引用的网页url 完全不一样，协议不一样，域名不一样，端口不一样。所以说这是一个跨域请求，但是！这个跨域请求丝毫没有影响到代码的运行！还可以正常使用里面的方法等等。所以说，script标签本身就具备跨域特性。

之前在服务端里写的 response.setHeader('Access-Control-Allow-Headers','*');，就是允许跨域的。

原理演示：

index.html：

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp的实现原理</title>
</head>
<body>
    <script src="./app.js"></script>
</body>
</html>

app.js：

const data = {
    name: '一段文字'
};

console.log(data.name);

首先index.html引入外部资源 js 文件（本地的），右键以 open with Live Server 来打开 index.html（http 协议）后，发现可以输出js里的结果。

现在查看引用的js文件的url，变成了http协议的：http://127.0.0.1:5501/1st/AJAX/8-jsonp-AJAX/app.js

——————————————————————

然后把 index 文件里的 script 的 src 换成完整的书写方式：http://127.0.0.1:5501/1st/AJAX/8-jsonp-AJAX/app.js

然后右键 Open In Default Browser，以本地协议的方式打开 index.html网页，file:///E:/Code/A2/1st/AJAX/8-jsonp-AJAX/jsonp%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86.html

就是以本地协议file方式打开网页，里面引用http协议的资源，发现还是可以正常运行，没有跨域问题。

在此基础上，修改 js 文件代码：

// 1 数据
const data = {
    name: '你的名字'
};

//console.log(data.name);

// 2 函数的调用
My_name_is(data);

html文件代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp的实现原理</title>
    <style>
        #result{
            height: 200px;
            width: 300px;
            font-size: 50px;
            font-weight: bold;
            color: rgb(241, 73, 43);
            border: 5px solid aqua;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        //处理数据 3.函数
        function My_name_is(data){
            //获取 result 元素
            const result = document.getElementById("result");
            result.innerHTML = data.name;
        }
        //小贴士：预编译变量声明和函数声明会提到最前面
    </script>

    <!-- <script src="./app.js"></script> -->
    <script src="http://127.0.0.1:5501/1st/AJAX/8-jsonp-AJAX/app.js"></script>
</body>
</html>

可以正常运行，可以看到这个 js文件返回的结果是一个数据和一个函数的调用：

这里注意，这个函数前端必须要提前声明，要不然回来之后没有这个函数就会报错，没函数就不能调用。

前端：

<script src="http://127.0.0.1:8000/jsonp-server"></script>

后端：

// jsonp 服务
app.all('/jsonp-server', (request,response) => {
    response.send('hello jsonp-server');
});

运行后，Console 栏报错提示：Uncaught SyntaxError: Unexpected identifier （未捕获的语法错误：意外的标识符）。也就是解析不了，因为这是非 js代码，返回 js代码就可以解析了。

可以看到 Network 栏的 Response 有返回的数据：hello jsonp-server。

返回 js 语句代码：

app.all('/jsonp-server', (request,response) => {
    //response.send('hello jsonp-server'); // 返回非 js代码，script标签就无法解析
    response.send(' console.log("hello jsonp-server"); ');
});

运行后，可以看到 Console 栏显示 hello jsonp-server，无报错。Response 栏显示： console.log("helo jsonp-server");

所以说，<script>标签请求获取后，要的是函数调用的内容，也就是一段 js代码，js语句。这样的话，前端的浏览器才可以解析并执行里面的内容。

——————

修改后端服务端代码：

app.all('/jsonp-server', (request,response) => {
    //response.send('hello jsonp-server'); // 返回非 js代码，script标签就无法解析
    //response.send(' console.log("helo jsonp-server"); ');

    //1.数据
    const data = {
        name: '玻璃柠檬'
    };
    //将数据转化为 字符串
    let str = JSON.stringify(data);
    //返回结果  end()不会返回特殊响应头
    response.end(`My_name_is(${str})`)

});

打开页面，页面接收到了数据并执行了js代码：My_name_is(${str}) ，返回结果：My_name_is({"name":"玻璃柠檬"})

前端网页预览：

返回的结果的形式，是一个函数的调用，而函数的实参，就是要返回客户端结果的数据。

这个函数必须要在前端声明，要不然回来之后没有这个函数，就会报错。

小贴士： ` ` 是模板字符串，而里面的 ${ } 是与字符串区分开来的，里面是变量名或 JavaScript表达式。

`${}` 更多详情 ES6

jsonp 实践 - 返回 js 代码

在输入框input输入用户名，输入完后，失去焦点（点击别处），然后向服务端发送请求，对用户名进行是否存在的检测，然后返回结果（用户名已经存在），再让input输入框的颜色变红，

前端客户端：

<!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>原生jsonp实践</title>
</head>
<body>
    用户名：<input type="text" id="username">
    <p></p>

    <script>
        //获取 input 元素
        const input = document.querySelector('input');
        const p = document.querySelector('p');

        //声明 Check_username 函数
        function Check_username(data){
            //输入用户名的边框变红色
            input.style.border = "solid 1px #f00";
            //修改 p 标签的提示文本
            p.innerHTML = data.msg;
        };

        //绑定事件  onblur失去焦点
        input.onblur = function(){
            //获取用户的输入值
            let username = this.value;
            //向服务器端发送请求 检测用户名是否存在
            // 1. 创建 script 标签
            const script = document.createElement('script');
            // 2. 设置标签的 src 属性
            script.src = 'http://127.0.0.1:8000/jsonp-check-username';
            // 3. 将 script 插入到文档中
            document.body.appendChild(script);
        }
    </script>
</body>
</html>

后端服务端：

// jsonp 服务 检测用户名字是否存在
app.all('/jsonp-check-username', (request,response) => {
    const data = {
        exist: 1,
        msg: '用户名已经存在，请换一个别的名字'
    };
    let str = JSON.stringify(data);            //转换字符串
    response.end(`Check_username( ${str} )`);  //返回 js代码 Check(str); 
});

用户输入完用户名，失去焦点后，获取用户输入的值，准备向服务端发送请求，创建 <script> 标签，设置 script 标签的 src 属性，将 script 标签插入到页面中。这时，页面已经有了 script 标签并发送了请求，服务端返回一个 js语句代码：Check_username(str); ，str 是一个对象，就是服务端的 data 对象，但是它以json格式的字符串形式发给客户端，到客户端后 script 代码自动解析为json对象，然后客户端 Check_username(data) 函数被调用，实参str 传给形参data，然后 data.msg，得到 '用户名已经存在，请换一个别的名字' 。

jQuery 发送 jsonp 请求

语法：$.getJSON('url', function(data){ });

注意：在使用 jQuery 发送 jsonp 请求时，url 后面要补一个参数 callback ，它的值是 ? ，写法：callback=?

完整的就是 http://127.0.0.1:8000/jquery-jsonp-server?callback=?

发送请求，查看已发送请求里面的 callback 参数：

$.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data){

    console.log(data);

});

可以看到，原本的 callback=? 并没有值，但发送请求后，callback是有值的，变成了 jQuery36307196822213934448_1676633833786

服务端可以接收到这个参数，然后把这个 callback 的值，作为函数调用的一个函数名，然后去拼接字符串，

也就是说，现在 jQuery 已经注册了一个名字叫 jQuery36307196822213934448_1676633833786 的函数，

只要回来之后，返回的是 jQuery36307196822213934448_1676633833786 函数的调用，前端就可以对这个数据做一个处理。

说白了，这一串数字，就是一个函数名，好比我在后端写一个 jQuery36307196822213934448_1676633833786( str )，就是调用了这个函数，里面实参是 str，但这个函数是 jQuery 发送请求而声明的，可以简单理解为：

$.getJSON(url, function() {} );，里的回调函数 function(){} 就是 callback 的值，就是 jQuery36307196822213934448_1676633833786。只需要在服务端调用并返回就可以。

然后后端获取 callback 的值，也就是获取到这个函数名。就可以作为回调函数，来做处理。

app.all('/jquery-jsonp-server',(request,response) => {
    let cb = request.query.callback;
    response.end(cb);
});

获取到 callback 的值，然后拼接字符串，调用函数：

模板字符串 `${cb}( ${str} )`，相当于 getMax(data) ，把俩字符串拼成函数和实参，调用函数。

app.all('/jquery-jsonp-server',(request,response) => {
    const data = {
        name: '语言等级考场',
        city: ['北京','大连','沈阳']
    };
    let str = JSON.stringify(data);     //转换为字符串
    
    let cb = request.query.callback;    //获取 callback 参数的值
    //返回结果
    response.end(`${cb}( ${str} )`);     
    
    //resp...end(`getMax( ${str} )`);   //上一句的意思类似于这样:  函数名(实参)
});

客户端：

<body>
    <button>jQuery 点击发送 jsonp 请求</button>
    <div id="result">
    </div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data){
                //callback 的值，是jQuery随机生成的回调函数名字
                //callback 作为一个函数的调用
                console.log(data);
                
                $('#result').html(`
                    名称：${data.name}, <br/>
                    地区：${data.city}
                `);
            });
        });
    </script>
</body>

完整客户端：

完整客户端

 <!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>jQuery 发送 jsonp 请求</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
</head>
<body>
    <button>jQuery 点击发送 jsonp 请求</button>
    <h2>$.getJSON(url, function() {} );，里的回调函数 function(){} 就是 callback 的 值，就是 jQuery36307196822213934448_1676633833786。只需要在服务端调用并返回就可以。</h2>
    <div id="result">
    </div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data){
                //$.getJSON(url, function() {} );，里的回调函数 function(){} 就是 callback 的 值，就是 jQuery36307196822213934448_1676633833786。只需要在服务端调用并返回就可以。
                //callback 的值，是jQuery随机生成的回调函数名字
                //callback 作为一个函数的调用
                console.log(data);
                
                $('#result').html(`
                    名称：${data.name}, <br/>
                    地区：${data.city}
                `);
            });
        });
    </script>
</body>
</html>

主要服务端部分：

服务端核心

 // (9).jQuery发送jsonp请求
app.all('/jquery-jsonp-server',(request,response) => {
    const data = {
        name: '语言等级考场',
        city: ['北京','大连','沈阳']
    };
    let str = JSON.stringify(data);
    //接收 callback 参数
    //请求url参数中的callback参数的值 赋值给 cb，callback的值是随机的，如jQuery363008071787967251609_1676631158208。
    //callback的值也就是回调函数的名字，不过这个值就是jQuery随机生成的。

    let cb = request.query.callback;
    //返回结果
    //resp...end(`getMax( ${str} )`);
    response.end(`${cb}( ${str} )`);
    //response.end(`${cb}( )`);
});

15- 设置CORS响应头实现跨域

CORS 跨域资源共享。跨源资源共享（CORS） - HTTP | MDN (mozilla.org)

CORS 是官方的跨域解决方案。不需要客户端做任何操作，完全在服务端进行。支持 GET POST。

如何工作？

只需要服务端设置响应头就可以了。

服务端：

// (10).设置CORS响应头实现跨域
app.all('/cors-server',(request,response) => {
　　//设置响应头
    response.setHeader("Access-Control-Allow-Origin","*"); //允许跨域
    response.setHeader("Access-Control-Allow-Origin","http://127.0.0.1:6666");  //只有这个网页才可以向服务端发送请求。
    response.setHeader("Access-Control-Allow-Headers","*"); //允许头信息自定义
    response.setHeader("Access-Control-Allow-Method","*");  //请求方法随意
    response.send("hello cors");
});

。

客户端：

<button>点击发送请求</button>
    <h1 id="result"></h1>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function(){
            // 1.创建对象
            const xhr = new XMLHttpRequest();
            // 2.初始化设置
            xhr.open("GET","http://127.0.0.1:8000/cors-server");
            // 3.发送
            xhr.send();
            // 4.绑定事件
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 输出响应
                        console.log(xhr.response);
                    }
                }
            }
        }
    </script>

。

学习资源：https://www.bilibili.com/video/BV1WC4y1b78y

posted @ 2023-02-11 18:57 nekmea 阅读(92) 评论(0) 编辑收藏举报

刷新页面返回顶部

nekmea

博客子标题

【AJAX】学习笔记

00- AJAX 介绍

1. XML 简介

2. JSON 简介

3. AJAX 的优点、缺点

01- HTTP 协议请求报文与响应报文结构

02- Chrome 网络控制台查看通信报文

Headers

Preview

03- Node.js 安装

04- Express 框架

05- AJAX 请求的基本操作

1. GET 请求

2. AJAX 设置请求参数

3. POST 请求

4. POST 设置请求体

5. AJAX设置请求头

6. option 请求 （预检测）

7. 服务端响应 JSON 数据

06- nodemon 自动重启服务工具 安装及使用

07- IE 浏览器缓存问题（2022-6-16 IE停用）

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

09- 取消请求

1.取消请求

2.请求重复发送 问题

10- jQuery发送AJAX请求

GET请求 $.get() ：

POST请求 $.post()：

AJAX请求 $.ajax()：

1.基本的

2. 更多的自定义

11- Axios 发送AJAX请求

1. get请求 axios.get(url [,config] )

2. psot请求 axios.post(url [, data [,config]] )

3. axios 的通用方式请求 axios()

12- fetch 函数 发送AJAX请求

13- 同源策略

14- jsonp 跨域解决方案 实现原理

jsonp 实践 - 返回 js 代码

jQuery 发送 jsonp 请求

15- 设置CORS响应头实现跨域

公告

6. option 请求（预检测）

06- nodemon 自动重启服务工具安装及使用

2.请求重复发送问题

12- fetch 函数发送AJAX请求

14- jsonp 跨域解决方案实现原理