AJAX的使用及常见问题的处理（AJAX入门到熟练使用）

Posted 2022-10-13 明金同学

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX的使用及常见问题的处理（AJAX入门到熟练使用）相关的知识，希望对你有一定的参考价值。

文章目录

一、基础知识
二、express框架
- 2.1 AJAX-express框架介绍与基本使用
- 2.2 使用nodemon工具
三、原生AJAX请求的基本操作
四、使用jQuery发送AJAX请求
- 4.1 get请求
- 4.2 post请求
五、使用axios发送AJAX请求
六、使用fetch发送AJAX请求
七、跨域问题

一、基础知识

1.1AJAX简介

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

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

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

1.2 AJAX的特点

1.2.1 AJAX 的优点

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

1.2.2 AJAX 的缺点

没有浏览历史，不能回退
存在跨域问题(同源)
SEO 不友好

1.3 XML简介

XML 可扩展标记语言。

XML 被设计用来传输和存储数据。

XML 和 html 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，

全都是自定义标签，用来表示一些数据。

比如：

name = “孙悟空” ; age = 18 ; gender = “男” ;

用 XML 表示：

<?xml version="1.0" encoding="utf-8"?>

<student> 
  <name>孙悟空</name>  
  <age>18</age>  
  <gender>男</gender> 
</student>

现在开发中多数已经被 JSON 取代了。

用 JSON 表示：

"name":"孙悟空","age":18,"gender":"男"

1.4 HTTP简介

HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的约定，规则。

1.4.1 请求报文

重点是格式与参数

行    POST  /s?ie=utf-8  HTTP/1.1 
头    Host: atguigu.com
    Cookie: name=guigu
    Content-type: application/x-www-form-urlencoded
    User-Agent: chrome 83
空行
体    username=admin&password=admin

1.4.2 响应报文

TTP/1.1  200  OK
行    HTTP/1.1  200  OK
头    Content-Type: text/html;charset=utf-8
    Content-length: 2048
    Content-encoding: gzip
空行   
体    <html>
      <head>
      </head>
      <body>
        <h1>一级标题</h1>
      </body>
    </html>
```

常用的状态码及含义：
404（未找到） 服务器找不到请求的网页。
403（禁止） 服务器拒绝请求。
401（未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
500（服务器内部错误） 服务器遇到错误，无法完成请求。
200（成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。

二、express框架

后面我们使用express框架模拟后端响应操作。

Node.js中文网：http://nodejs.cn/

Express中文网：https://www.expressjs.com.cn/

2.1 AJAX-express框架介绍与基本使用

初始化命令：

npm init --yes


  "name": "administrator",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": 
    "antd": "^4.16.5",
    "hexo-generator-search": "^2.4.3",
    "hexo-generator-searchdb": "^1.4.0"
  ,
  "scripts": 
    "test": "echo \\"Error: no test specified\\" && exit 1"
  ,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""

安装express命令：

npm i express

启动服务：

// 引入express
const express = require('express')
// 创建应用对象
const app = express()

// 创建路由规则
app.get('/',(request , response)=>
    response.send('hello world');
);
//  监听端口启用服务
app.listen(8000,()=>
    console.log("服务已启动")
)

2.2 使用nodemon工具

用来监控你 node.js 源代码的任何变化和自动重启你的服务器。

以前，我们开发一个node后端服务时，每次更改文件，均需重启一下，服务才能生效。这使我们的开发效率降低了很多。nodemon的出现，可以随时监听文件的变更，自动重启服务，我们开发时只需关注代码即可，不再需要手动重启服务。

官方地址：https://www.npmjs.com/package/nodemon

安装命令：

npm install -g nodemon

三、原生AJAX请求的基本操作

AJAX请求状态

xhr.readyState 可以用来查看请求当前的状态

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState

0: 表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。

1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息。

2: 表示 send()方法已经执行，并且头信息和状态码已经收到。

3: 表示正在接收服务器传来的 body 部分的数据。

4: 表示服务器数据已经完全接收，或者本次接收已经失败了

3.1 get 请求方式的使用

在这里实现一个，点击发送请求按钮，前端向服务器发送一个请求，然后服务器响应数据在DIV中显示出来。

前端代码：

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

<head>
    <meta charset="UTF-8">
    <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>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //绑定事件
        btn.onclick = function () 
            //1. 创建HTTP请求对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和 url
            xhr.open('GET', 'http://127.0.0.1:8000/server');
            // xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
            //3. 发送请求
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
            // on  when 当....时候
            // readystate 是 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) 
                        // 处理结果  行 头 空行 体
                        // 输出响应体
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体
                        //设置 result 的文本
                        result.innerHTML = xhr.response;
                    
                
            
        
    </script>
</body>

</html>

express模拟后端：

//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.listen(8000, () => 
    console.log("服务已启动")
)

使用参数的话在直接在链接后面跟上参数，如：

xhr.open('GET', 'http://127.0.0.1:8000/server');

改为

xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');

3.2 post 请求方式的使用

在这里实现一个，当鼠标移入到页面上的div元素时，页面发送请求到服务器，前端向服务器发送一个请求，然后服务器响应数据在DIV中显示出来。

前端代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST 请求</title>
    <style>
        #result 
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        //获取元素
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover", function () 
            //1. 创建HTTP请求对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和 url
            xhr.open('POST', 'http://127.0.0.1:8000/server');
            // xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
            //3. 发送请求
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
            // on  when 当....时候
            // readystate 是 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) 
                        // 处理结果  行 头 空行 体
                        // 输出响应体
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体
                        //设置 result 的文本
                        result.innerHTML = xhr.response;
                    
                
            
        )
    </script>
</body>

</html>

express模拟后端：

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

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

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装

// 创建post路由规则
app.post('/server', (request, response) => 
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
	
    //设置响应体
    response.send('HELLO AJAX POST');
);
//  监听端口启用服务
app.listen(8000, () => 
    console.log("服务已启动")
)

与get请求方式不同的是这里使用的是post请求，设置post请求的反应请求

// 创建路由规则
app.post('/server', (request, response) => 
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    //设置响应体
    response.send('hello ajax');
);

使用参数方法例如：

// 设置请求头
xhr.send('a=100&b=200&c=300');
// xhr.send('a:100&b:200&c:300');// 其他形式
// xhr.send('1233211234567');// 可以是任意格式数据

也可以设置头信息

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('name', 'atguigu'); // 可以自定义请求头，非预定的

如果自定义请求头信息，服务端也需要相应的响应

// 设置响应头信息 
response.setHeader('Access-Control-Allow-Headers', '*') // 允许任何响应头

express模拟后端：

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

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

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装

// all可以接收任意类型的请求 
app.all('/server', (request, response) => 
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');// 允许任何响应头
    //设置响应体
    response.send('HELLO AJAX POST');
);
//  监听端口启用服务
app.listen(8000, () => 
    console.log("服务已启动")
)

前端代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST 请求</title>
    <style>
        #result 
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        //获取元素
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover", function () 
            //1. 创建HTTP请求对象
            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', 'atguigu');

            //3. 发送请求
            xhr.send('a=100&b=200&c=300');
            //4. 事件绑定 处理服务端返回的结果
            // on  when 当....时候
            // readystate 是 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) 
                        // 处理结果  行 头 空行 体
                        // 输出响应体
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体
                        //设置 result 的文本
                        result.innerHTML = xhr.response;
                    
                
            
        )
    </script>
</body>

</html>

3.3 服务器响应 JSON 数据

设置一个键盘事件，当在网页中按下任意键盘，网页向服务器发送数据，然后服务端响应，反馈一组JSON数据，页面接收到后在div中显示

前端代码：

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

<body>
  <div id="result"></div>
  <script>
    const result = document.getElementById('result')
    // 绑定按键按下事件
    window.onkeydown = function () 
      // 创建对象
      const xhr = new XMLHttpRequest();
      // 设置响应体数据类型，自动对数据进行转化
      // 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) 
            // 查看返回的数据
            // console.log(xhr.response)
            // result.innerHTML = xhr.response;
            // 1、手动对数据进行转化
            let data = JSON.parse(xhr.response)
            console.log(data)
            result.innerHTML = data.name
            ///2、自动对数据进行转化
            // console.log(xhr.response)
            // result.innerHTML = xhr.response.name;
          
        
      
    
  </script>
</body>

</html>

要把数据在div中显示，有两种转换的方式：

1、手动对数据进行转化

let以上是关于AJAX的使用及常见问题的处理（AJAX入门到熟练使用）的主要内容，如果未能解决你的问题，请参考以下文章 
 Ajax传递路径问题及解决
 AJAX从入门到放弃
 教你怎么用ajax来进行交互（入门必看）！！！
 五分钟了解什么Ajax及入门小例子
 论如何把JS踩在脚下 —— JQuery基础及Ajax请求详解
 ajax 快速入门