系列学习前端之第 7 章：一文掌握 AJAX

1、AJAX 简介

• AJAX 全称为 Asynchronous JavaScript And XML（中文名：阿贾克斯），就是异步的 JS 和 XML。
• AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
• AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
• AJAX 的两个主要功能使您可以执行以下操作：

• 向服务器发出请求，而无需重新加载页面

• 从服务器接收和处理数据

2、AJAX 的优缺点

2.1 AJAX 的优点

• 可以无需刷新页面而与服务器端进行通信。

• 允许你根据用户事件来更新部分页面内容。

2.2 AJAX 的缺点

• 没有浏览历史，不能回退。
• 存在跨域问题（同源）。出于安全原因，浏览器不允许跨域访问。也就是当前网页和 AJAX 要请求的网页地址要在同一个域名下。
• SEO（搜索引擎优化）  不友好。因为源代码没有具体信息，而是通过 AJAX 异步获取数据，无法被爬虫获取到数据

3、AJAX 的工作原理

JavaScript 使用一个 XMLHttpRequest（核心对象） 对象向服务器发出 HTTP 请求并作为响应接收数据。所有现代浏览器（Chrome，Firefox，IE7 +，Safari，Opera）都支持该 XMLHttpRequest 对象。

具体步骤：

1. 网页中发生了一个事件（即页面已加载或单击了某些按钮）

2. JavaScript 创建 XMLHttpRequest 对象

3. XMLHttpRequest 对象将请求发送到 Web 服务器

4. 服务器处理请求

5. 服务器将响应发送回网页

6. 响应由 JavaScript 读取

7. JavaScript 更新 HTML DOM

4、温习 HTTP 协议

HTTP（Hypertext Transport Protocol，超文本传输协议）详细规定了浏览器和万维网服务器之间互相通信的规则。主要包括：请求报文、响应报文。我们温习一下它们的格式与参数

4.1 请求报文

1. 请求行：主要包括请求类型（GET、POST使用居多）、URL 路径、协议版本（一般是 HTTP/ 1.1）
2. 请求头：主要包括 Host、Cookie、Content-Type、User-Agent，都是键值对形式
3. 空行：空行固定
4. 请求体：GET 类型的请求体是空的，POST 类型的请求体可以为空，也可以不为空

4.2 响应报文

1. 响应行：主要包括协议版本（HTTP/1.1）、响应状态码（比如200、404、500）、响应字符串（比如 OK）
2. 响应头：Content-Type（text/html;charset=utf-8）、Content-length、Content-encoding
3. 空行：空行固定
4. 响应体：服务端返回的具体响应数据（日常开发用得最多的内容）

5、后台服务应用准备

要学习 AJAX 需要后台服务，这里我们以熟悉的 Java 为例。在企业开发中，目前大多数还是 Java 后台。这里要求对 Java 有一定的了解，并且把 JDK 环境、Maven 环境、IDEA 环境都准备好。

代码结构比较简单，如截图：

pom.xml

1. <?xml version="1.0" encoding="UTF-8"?>
2. <project xmlns="http://maven.apache.org/POM/4.0.0"
3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
4. xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
5. <modelVersion>4.0.0modelVersion>
7. <groupId>com.studygroupId>
8. <artifactId>AjaxartifactId>
9. <version>1.0-SNAPSHOTversion>
12. <parent>
13. <groupId>org.springframework.bootgroupId>
14. <artifactId>spring-boot-starter-parentartifactId>
15. <version>2.3.12.RELEASEversion>
16. parent>
18. <dependencies>
19. <dependency>
20. <groupId>org.springframework.bootgroupId>
21. <artifactId>spring-boot-starter-testartifactId>
22. <scope>testscope>
23. dependency>
25. <dependency>
26. <groupId>org.springframework.bootgroupId>
27. <artifactId>spring-boot-starter-webartifactId>
28. dependency>
29. dependencies>
31. project>

application.yml （此配置非必须，如果不配置服务器端口号，默认 8080）

1. # 配置服务器端口号
2. server:
3. port: 8000

AjaxApp

1. package com.study;
3. import org.springframework.boot.SpringApplication;
4. import org.springframework.boot.autoconfigure.SpringBootApplication;
6. /**
7. * @author CSDN 流放深圳
8. * @description 主应用程序
9. * @signature 让天下没有难写的代码
10. * @create 2024-03-24 下午 4:03
11. */
12. @SpringBootApplication
13. public class AjaxApp {
15. public static void main(String[] args) {
16. SpringApplication.run(AjaxApp.class, args);
17. }
18. }

AjaxController

1. package com.study.controller;
3. import org.springframework.web.bind.annotation.*;
5. import java.util.HashMap;
6. import java.util.Map;
8. /**
9. * @author CSDN 流放深圳
10. * @description
11. * @signature 让天下没有难写的代码
12. * @create 2024-03-24 下午 4:05
13. */
14. @RestController
15. public class AjaxController {
17. /**
18. * Get 请求
19. * @return
20. */
21. @GetMapping("/helloWorld")
22. public String helloWorld(){
23. String result = "Hello,Ajax!欢迎来到新的学习基地！";
24. return result;
25. }
27. /**
28. * Post 请求
29. * @return
30. */
31. @PostMapping("/say")
32. public String say(){
33. String result = "纸上得来终觉浅，绝知此事要躬行！";
34. return result;
35. }
37. /**
38. * 根据 id 获取信息
39. * @param id
40. * @return
41. */
42. @GetMapping("/getById")
43. public Map getById(@RequestParam Integer id) {
44. Map map = new HashMap<>();
45. if(id == 1){
46. map.put("userName", "刘德华");
47. map.put("introduction", "我是1号选手，我来自香港");
48. }else if(id == 2){
49. map.put("userName", "周杰伦");
50. map.put("introduction", "我是2号选手，我来自台湾");
51. try{
52. Thread.sleep(3000);//模拟超时，3秒后响应接口
53. }catch (Exception e){
54. System.out.println("3秒后响应接口请求");
55. }
56. }
57. return map;
58. }
60. /**
61. * 根据 userName 获取数据
62. * @param userName
63. * @return
64. */
65. @PostMapping("/getByName")
66. public Map getByName(@RequestParam String userName) {
67. Map map = new HashMap<>();
68. if("周星驰".equals(userName)){
69. map.put("userName", "周星驰");
70. map.put("introduction", "曾经有一份真挚的爱情摆在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。如果非要在这份爱上加上一个期限，我希望是一万年。");
71. }else if("海明威".equals(userName)){
72. map.put("userName", "海明威");
73. map.put("introduction", "海的爱太深，时间太浅");
74. }
75. return map;
76. }
78. }

CorsConfig：注意这个配置类在前期学习必须要加上，否则会有跨域问题！

1. package com.study.config;
3. import org.springframework.context.annotation.Configuration;
4. import org.springframework.web.servlet.config.annotation.CorsRegistry;
5. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
7. /**
8. * @author CSDN 流放深圳
9. * @description 跨域处理配置类
10. * @signature 让天下没有难写的代码
11. * @create 2024-03-24 下午 4:15
12. */
13. @Configuration
14. public class CorsConfig implements WebMvcConfigurer {
16. /**
17. * 允许跨域配置
18. * @param registry
19. */
20. @Override
21. public void addCorsMappings(CorsRegistry registry) {
22. registry.addMapping("/**")//匹配所有的请求
23. .allowedOrigins("*")//允许访问的客户端所有的域名
24. .allowedMethods("GET", "POST", "HEAD", "PUT", "DELETE", "OPTIONS")//允许列出的请求方式（其实就是标准的 HTTP 协议的请求方式）
25. .allowCredentials(true)//允许请求带有验证信息
26. .maxAge(3600)
27. .allowedHeaders("*");//允许客户端所有的请求头
28. }
29. }

如果不加这个跨域处理配置类，会出现如下错误： 

Access to XMLHttpRequest at 'http://127.0.0.1:8000/helloWorld' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

OK，后台基础环境搭建完毕。启动后台服务，测试：http://127.0.0.1:8000/helloWorld

6、JavaScript 原生 AJAX

6.1 AJAX 入门

1. html>
2. <html lang="zh-CN">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>JavaScript 原生 AJAXtitle>
7. <script>
8. window.onload = function(){//文档加载完成后执行
10. //获取文本域元素
11. let textarea = document.getElementById("textarea");
13. //需求1：点击按钮1，通过 GET 请求获取数据
14. let btn1 = document.getElementById("btn1");
16. //绑定按钮1事件
17. btn1.onclick = function(){
18. //1.创建 XMLHttpRequest 对象
19. let xhr = new XMLHttpRequest();
20. //2.初始化，设置请求方式和 url
21. xhr.open("GET", "http://127.0.0.1:8000/helloWorld");
22. //设置请求头信息（可以设置自定义请求头信息）
23. //xhr.setRequestHeader("Content-Type","text/plain;charset=UTF-8");
24. xhr.setRequestHeader("token","token123");//自定义会话的 token
26. //3.发送请求
27. xhr.send();
28. //4.事件绑定，处理服务器返回的结果。readyState 是 xhr 对象中的属性，表示状态有：0、1、2、3、4
29. xhr.onreadystatechange = function(){
30. if(xhr.readyState === 4){
31. //判断响应状态码：一般200开头的都是成功
32. /*
33. xhr.status：响应状态码
34. xhr.statusText：状态字符串
35. xhr.getAllResponseHeaders()：所有响应头
36. xhr.response：响应体
37. */
38. if(xhr.status >= 200 && xhr.status < 300){
39. //设置 textarea 的文本
40. textarea.innerHTML = xhr.response;
41. }
42. }
43. }
44. }
46. //需求2：点击按钮2，通过 POST 请求获取数据
47. let btn2 = document.getElementById("btn2");
48. btn2.onclick = function(){
49. let xhr = new XMLHttpRequest();
50. xhr.open("POST", "http://127.0.0.1:8000/say");
51. xhr.send();
52. xhr.onreadystatechange = function(){
53. if(xhr.status >= 200 && xhr.status < 300){
54. //设置 textarea 的文本
55. textarea.innerHTML = xhr.response;
56. }
57. }
58. }
60. }
61. script>
62. head>
63. <body>
64. <button id="btn1">按钮1 通过 GET 请求获取数据button>
65. <button id="btn2">按钮2 通过 POST 请求获取数据button>
66. <br><br>
67. <textarea id="textarea" cols="30" rows="10">textarea>
68. body>
69. html>

效果：分别点击2个按钮，在文本框看到后台服务器返回的数据。

另外，我们设置的自定义请求头信息，也可以在浏览器中看到：

关于：XMLHttpRequest 对象的 readyState 状态枚举值：

XMLHttpRequest.readyState - Web API 接口参考 | MDN

值	状态	描述
0	UNSENT	代理被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被调用。
2	HEADERS_RECEIVED	send() 方法已经被调用，并且头部和状态已经可获得。
3	LOADING	下载中；responseText 属性已经包含部分数据。
4	DONE	下载操作已完成或者已经失败。

6.2 处理 JSON 数据

JSON 格式的数据，已经成为企业级开发首选、必选的数据格式之一。因此掌握 JSON 格式的数据极其重要。

处理 JSON 格式有2种方式：

方式1：

1. 设置 XMLHttpRequest 对象的返回体数据类型为 json（xhr.responseType = 'json';）
2. 自动转换。如：const userName = xhr.response.userName;

方式2：手动对数据进行处理

let serverData = JSON.parse(xhr.response);

const userName = serverData.userName;

1. html>
2. <html lang="zh-CN">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>处理JSON数据title>
7. <script>
8. window.onload = function(){//文档加载完成后执行
10. //获取文本域元素
11. let textarea = document.getElementById("textarea");
13. //需求1：点击按钮1，通过 GET 请求获取数据
14. let btn1 = document.getElementById("btn1");
16. //绑定按钮1事件
17. btn1.onclick = function(){
18. //1.创建 XMLHttpRequest 对象
19. let xhr = new XMLHttpRequest();
20. //设置响应体数据的类型
21. xhr.responseType = 'json';
22. //2.初始化，设置请求方式和 url
23. xhr.open("GET", "http://127.0.0.1:8000/getById?id=1");
25. //3.发送请求
26. xhr.send();
27. //4.事件绑定，处理服务器返回的结果。readyState 是 xhr 对象中的属性，表示状态有：0、1、2、3、4
28. xhr.onreadystatechange = function(){
29. if(xhr.readyState === 4){
30. if(xhr.status >= 200 && xhr.status < 300){
31. //方式1：手动对数据进行转换
32. /*
33. let serverData = JSON.parse(xhr.response);
34. const userName = serverData.userName;
35. const introduction = serverData.introduction;
36. textarea.innerHTML = "用户名：" + userName+"，自我介绍：" + introduction;
37. */
39. // 方式2：设置响应体数据类型，然后自动转换
40. const userName = xhr.response.userName;
41. const introduction = xhr.response.introduction;
42. textarea.innerHTML = "用户名：" + userName+"，自我介绍：" + introduction;
43. }
44. }
45. }
46. }
48. }
49. script>
50. head>
51. <body>
52. <button id="btn1">GET 获取JSON数据button>
53. <br><br>
54. <textarea id="textarea" cols="30" rows="10">textarea>
55. body>
56. html>

效果：

6.3 解决 IE 浏览器缓存问题

问：什么是 IE 浏览器缓存问题？

答：IE 浏览器在处理 AJAX 请求时，会优先从本地判断是否有缓存，如果有，则不再向后台服务器获取数据，而是直接读取本地缓存数据。这对一些实时性要求高的场景来说，显然是不合理的。

问：如何解决 IE 浏览器缓存问题？

答：在请求头的 url 参数后面，增加一个当前时间戳的参数，传递到后台，保证每次请求都是新的请求。

如：xhr.open("GET", "http://127.0.0.1:8000/getById?id=1&t="+Date.now());

6.4 处理请求超时和网络异常

一个良好的系统，都会有超时和网络异常的处理，给用户带来更好的体验，否则让用户一直干等，显然是不合理。那么 AJAX 是如何处理请求超时和网络异常的呢？

6.4.1 处理请求超时

//设置超时时间：2秒

xhr.timeout = 2000;

//超时回调函数

xhr.ontimeout = function(){

    textarea.innerHTML = "啊噢，超时了，请您去别的地方逛逛吧！";

}

 6.4.2 处理网络异常

//网络异常回调

xhr.onerror = function(){

     textarea.innerHTML = "Sorry！网络异常，请您稍后重试！";

}

注意代码修改了，获取的 id=2，后台有设置线程3秒后响应请求： 

1. html>
2. <html lang="zh-CN">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>处理超时和网络异常title>
7. <script>
8. window.onload = function(){//文档加载完成后执行
10. //获取文本域元素
11. let textarea = document.getElementById("textarea");
13. //需求1：点击按钮1，通过 GET 请求获取数据
14. let btn1 = document.getElementById("btn1");
16. //绑定按钮1事件
17. btn1.onclick = function(){
18. //1.创建 XMLHttpRequest 对象
19. let xhr = new XMLHttpRequest();
20. //设置响应体数据的类型
21. xhr.responseType = 'json';
23. //设置超时时间：2秒
24. xhr.timeout = 2000;
25. //超时回调函数
26. xhr.ontimeout = function(){
27. textarea.innerHTML = "啊噢，超时了，请您去别的地方逛逛吧！";
28. }
30. //网络异常回调
31. xhr.onerror = function(){
32. textarea.innerHTML = "Sorry！网络异常，请您稍后重试！";
33. }
35. //2.初始化，设置请求方式和 url
36. xhr.open("GET", "http://127.0.0.1:8000/getById?id=2");
38. //3.发送请求
39. xhr.send();
40. //4.事件绑定，处理服务器返回的结果。readyState 是 xhr 对象中的属性，表示状态有：0、1、2、3、4
41. xhr.onreadystatechange = function(){
42. if(xhr.readyState === 4){
43. if(xhr.status >= 200 && xhr.status < 300){
44. const userName = xhr.response.userName;
45. const introduction = xhr.response.introduction;
46. textarea.innerHTML = "用户名：" + userName+"，自我介绍：" + introduction;
47. }
48. }
49. }
50. }
52. }
53. script>
54. head>
55. <body>
56. <button id="btn1">GET 获取JSON数据button>
57. <br><br>
58. <textarea id="textarea" cols="30" rows="10">textarea>
59. body>
60. html>

测试请求超时： 

测试网络异常（把自己的浏览器的【网络】设置离线模式）：

6.5 取消请求

使用 XMLHttpRequest 对象的 abort() 函数可以手动取消请求。

xhr.send();

xhr.abort();//取消请求

textarea.innerHTML = "取消了请求";

6.6 重复请求问题

问：什么是 AJAX 重复请求问题？

答：指的是同一个浏览器在某一段时间内发送了多次请求，且前几次的请求都失败了，这样会对后台服务器的压力是很大的，特别是并发量大的系统。因此需要处理重复请求的问题。

处理重复请求问题，可以按照如下步骤：

1. 创建一个标识变量，判断是否正在发送请求。
2. 如果判断该变量正在发送请求，则取消，并且重新创建一个新的请求。
3. 如果请求发送成功且返回数据成功，修改标识变量的值。

1. html>
2. <html lang="zh-CN">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>重复请求问题title>
7. <script>
8. window.onload = function(){//文档加载完成后执行
10. //获取文本域元素
11. let textarea = document.getElementById("textarea");
13. //需求1：点击按钮1，通过 GET 请求获取数据
14. let btn1 = document.getElementById("btn1");
16. //创建标识变量
17. let isSending = false;
19. //绑定按钮1事件
20. btn1.onclick = function(){
21. //1.创建 XMLHttpRequest 对象
22. let xhr = new XMLHttpRequest();
24. //判断标识变量
25. if(isSending){
26. xhr.abort();//取消请求
27. } else {
28. isSending = true;//设置为：正在请求
29. }
31. //设置响应体数据的类型
32. xhr.responseType = 'json';
34. //设置超时时间：5秒
35. xhr.timeout = 5000;
36. //超时回调函数
37. xhr.ontimeout = function() {
38. textarea.innerHTML = "啊噢，超时了，请您去别的地方逛逛吧！";
39. }
41. //网络异常回调
42. xhr.onerror = function(){
43. textarea.innerHTML = "Sorry！网络异常，请您稍后重试！";
44. }
46. //2.初始化，设置请求方式和 url
47. xhr.open("GET", "http://127.0.0.1:8000/getById?id=2");
49. //3.发送请求
50. xhr.send();
51. //4.事件绑定，处理服务器返回的结果。readyState 是 xhr 对象中的属性，表示状态有：0、1、2、3、4
52. xhr.onreadystatechange = function(){
53. if(xhr.readyState === 4){
54. //返回数据成功后，修改变量表示
55. isSending = false;
56. if(xhr.status >= 200 && xhr.status < 300){
57. const userName = xhr.response.userName;
58. const introduction = xhr.response.introduction;
59. textarea.innerHTML = "用户名：" + userName+"，自我介绍：" + introduction;
60. }
61. }
62. }
63. }
65. }
66. script>
67. head>
68. <body>
69. <button id="btn1">GET 获取JSON数据button>
70. <br><br>
71. <textarea id="textarea" cols="30" rows="10">textarea>
72. body>
73. html>

效果：多次快速点击发送请求，后台服务器只接收到了第一个请求并返回数据，其它请求均被取消。

7、jQuery 发送 AJAX 请求

jQuery 发送 AJAX 请求主要有 3 个常用方法

1. $.get()
2. $.post()
3. $.ajax()

其中，$.get() 和 $.post() 都是简单的请求方式，有 4 个参数：url,[data],[callback],[type]

url：请求的 url 地址

data：参数值（键值对格式）

callback：成功时的回调函数

type：返回的数据格式，xml, html, script, json, text, _default

$.ajax() 用于处理比较复杂的请求，它可以设置很多参数，比如：头部信息（headers，注意值不允许包含中文或者说是全角输入法的内容）、成功的回调（success）、失败的回调（error）、超时设置（timeout）等

1. html>
2. <html lang="zh-CN">
4. <head>
5. <meta charset="UTF-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
7. <title>jQuery 发送 AJAXtitle>
9. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
10. <script>
11. $(function () {//文档加载完成后执行
12. //发送 get 请求
13. $("#btn1").click(function () {
14. //get 请求有4个参数：url、参数（键值对）、回调函数、返回的数据类型
15. $.get("http://127.0.0.1:8000/getById", { id: 1 }, function (data) {
16. const userName = data.userName;
17. const introduction = data.introduction;
18. //在文本域中显示信息
19. $("#textarea").val("用户名：" + userName + "，自我介绍：" + introduction);
20. }, "json");
21. });
23. //发送 post 请求
24. $("#btn2").click(function () {
25. //post 请求也有4个参数：url、参数（键值对）、回调函数、返回的数据类型
26. $.post("http://127.0.0.1:8000/getByName", { "userName": "周星驰" }, function (data) {
27. const userName = data.userName;
28. const introduction = data.introduction;
29. //在文本域中显示信息
30. $("#textarea").val("用户名：" + userName + "，自我介绍：" + introduction);
31. }, "json");
32. });
34. //发送 ajax 请求。语法：jQuery.ajax(url,[settings])
35. $("#btn3").click(function () {
36. const myToken = "your token message";
37. const otherHeader = "can no be Chinese!";
38. $.ajax({
39. //url 地址
40. url: "http://127.0.0.1:8000/getByName",
41. //请求类型
42. type: "POST",
43. //头部信息（值不允许包含中文）
44. headers: {
45. token: myToken,
46. other: otherHeader
47. },
48. //参数
49. data: { "userName": "海明威" },
50. //响应体结果
51. dataType: "json",
52. //成功的回调
53. success: function (data) {
54. const userName = data.userName;
55. const introduction = data.introduction;
56. //在文本域中显示信息
57. $("#textarea").val("用户名：" + userName + "，自我介绍：" + introduction);
58. },
59. //失败的回调
60. error: function () {
61. $("#textarea").val("接口调用失败啦！");
62. },
63. //超时时间设置，单位：毫秒
64. timeout: 2000,
65. })
66. });
68. })
69. script>
70. head>
72. <body>
73. <h2>jQuery 发送 AJAX 请求h2>
74. <button id="btn1">GET 请求button>
75. <button id="btn2">POST 请求button>
76. <button id="btn3">通用型方法 ajaxbutton>
77. <br><br>
78. <textarea id="textarea" cols="30" rows="10">textarea>
79. body>
81. html>

效果：

8、axios 发送 AJAX 请求

axios 是现在前端比较流行和热门的 AJAX 工具库，也是 VUE 和 React 推荐的发送 AJAX 请求的工具包。关于 axios 后续博客会继续迭代。

axios 发送 AJAX 请求主要有 3 个常用方法（与 jQuery 类似）：

1. axios.get()
2. axios.post()
3. axios()

axios 在调用 AJAX 有一个 then() 函数用来接收返回数据

1. html>
2. <html lang="zh-CN">
4. <head>
5. <meta charset="UTF-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
7. <title>axios 发送 AJAXtitle>
9. <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js">script>
10. <script>
11. window.onload = function () {//文档加载完成后执行
12. //获取文本域元素
13. let textarea = document.getElementById("textarea");
14. //获取按钮
15. let btn1 = document.getElementById("btn1");
16. let btn2 = document.getElementById("btn2");
17. let btn3 = document.getElementById("btn3");
19. //配置 axios 基础请求路径
20. axios.defaults.baseURL = "http://127.0.0.1:8000";
22. //发送 get 请求
23. btn1.onclick = function () {
24. axios.get("/getById",
25. //参数
26. {
27. params: {
28. id: 1
29. },
30. //请求头信息
31. headers: {
32. token: "your token"
33. }
34. }
35. ).then(response => {
36. //响应状态码
37. console.log(response.status);
38. //响应状态字符串
39. console.log(response.statusText);
40. //响应头信息
41. console.log(response.headers);
42. //响应体
43. console.log(response.data);
44. //在文本域显示信息
45. const userName = response.data.userName;
46. const introduction = response.data.introduction;
47. textarea.innerHTML = "用户名：" + userName + "，自我介绍：" + introduction;
48. }).catch(function (error) {
49. console.log(error);
50. });
51. };
54. //发送 post 请求
55. btn2.onclick = function () {
56. axios.post("/getByName",
57. //请求体参数
58. {
59. userName: "周星驰"
60. },
61. //其它参数
62. {
63. params: {
64. otherParam: "other"
65. },
66. //请求头参数
67. headers: {
68. //注意：后台服务该 POST 方法获取 userName 参数的格式是：@RequestParam String userName，需要增加头部 Content-Type 的配置
69. "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
70. "token": "your token"
71. }
72. }
73. ).then(function (response) {
74. //响应状态码
75. console.log(response.status);
76. //响应状态字符串
77. console.log(response.statusText);
78. //响应头信息
79. console.log(response.headers);
80. //响应体
81. console.log(response.data);
82. //在文本域显示信息
83. const userName = response.data.userName;
84. const introduction = response.data.introduction;
85. textarea.innerHTML = "用户名：" + userName + "，自我介绍：" + introduction;
86. }).catch(function (error) {
87. console.log(error);
88. });
89. };
92. //发送 axios 请求
93. btn3.onclick = function () {
94. axios({
95. //请求方法
96. method: "POST",
97. //url
98. url: "/getByName",
99. //url参数
100. params: {
101. otherParam: "other"
102. },
103. //头信息
104. headers: {
105. //注意：后台服务该 POST 方法获取 userName 参数的格式是：@RequestParam String userName，需要增加头部 Content-Type 的配置
106. "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
107. "token": "your token"
108. },
109. //请求体参数
110. data: {
111. userName: "海明威"
112. }
113. }).then(response => {
114. //响应状态码
115. console.log(response.status);
116. //响应状态字符串
117. console.log(response.statusText);
118. //响应头信息
119. console.log(response.headers);
120. //响应体
121. console.log(response.data);
122. //在文本域显示信息
123. const userName = response.data.userName;
124. const introduction = response.data.introduction;
125. textarea.innerHTML = "用户名：" + userName + "，自我介绍：" + introduction;
126. }).catch(function (error) {
127. console.log(error);
128. });
129. }
130. }
131. script>
132. head>
134. <body>
135. <h2>axios 发送 AJAX 请求h2>
136. <button id="btn1">GET 请求button>
137. <button id="btn2">POST 请求button>
138. <button id="btn3">通用型方法 axiosbutton>
139. <br><br>
140. <textarea id="textarea" cols="30" rows="10">textarea>
141. body>
143. html>

需要注意的是，后台服务接收 POST 请求使用的方式是：

@RequestParam String userName

 因此需要在 POST 请求的头部增加以下信息：

"Content-Type": "application/x-www-form-urlencoded;charset=utf-8"

否则会报错： 

AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

效果：

9、跨域以及处理办法

9.1 什么是跨域？

当一个请求 url 的协议、域名、端口号三者之间任意一个与当前页面 url 不同即为跨域。

跨域也叫违背了“同源策略”，何为“同源”，即：协议、域名、端口号 必须完全相同。

9.2 如何解决跨域问题？

9.2.1 前端解决方案 —— JSONP

1、JSONP 是什么？

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。

2、JSONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img、link、iframe、script。JSONP 就是利用 script 标签的跨域能力来发送请求的。

3、JSONP 的使用

1、动态的创建一个 script 标签，如：

var script = document.createElement("script");

2、设置 script 的 src，设置回调函数，如：

1. script.src = "http://localhost:8000/yourAPI?callback=abc";
2. function abc(data) {
3. alert(data.name);
4. };

3、将 script 添加到 body 中

document.body.appendChild(script);

4、服务器中路由的处理

1. router.get("/yourAPI" , function (req , res) {
2. console.log("收到请求");
3. var callback = req.query.callback;
4. var obj = {name:"马云", world:"让天下没有难做的生意"}
5. res.send(callback+"("+JSON.stringify(obj)+")");
6. });

9.2.2 后台服务解决方案 —— 跨源资源共享（CORS）

9.2.2.1 CORS 是什么？

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 和其它标准的 HTTP 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

官网：跨源资源共享（CORS） - HTTP | MDN

9.2.2.2 CORS 怎么工作的？

CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

92.2.3 CORS 的使用

方式1：如果后台服务是 Java 语言写的，可以加上这个配置类（全局生效）

1. package com.study.config;
3. import org.springframework.context.annotation.Configuration;
4. import org.springframework.web.servlet.config.annotation.CorsRegistry;
5. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
7. /**
8. * @author CSDN 流放深圳
9. * @description 跨域处理配置类
10. * @signature 让天下没有难写的代码
11. * @create 2024-03-24 下午 4:15
12. */
13. @Configuration
14. public class CorsConfig implements WebMvcConfigurer {
16. /**
17. * 允许跨域配置
18. * @param registry
19. */
20. @Override
21. public void addCorsMappings(CorsRegistry registry) {
22. registry.addMapping("/**")//匹配所有的请求
23. .allowedOrigins("*")//允许访问的客户端所有的域名
24. .allowedMethods("GET", "POST", "HEAD", "PUT", "DELETE", "OPTIONS")//允许列出的请求方式（其实就是标准的 HTTP 协议的请求方式）
25. .allowCredentials(true)//允许请求带有验证信息
26. .maxAge(3600)
27. .allowedHeaders("*");//允许客户端所有的请求头
28. }
29. }

方式2：增加自定义过滤器（全局生效）

1. package com.study.config;
3. import org.springframework.context.annotation.Configuration;
5. import javax.servlet.Filter;
6. import javax.servlet.FilterChain;
7. import javax.servlet.FilterConfig;
8. import javax.servlet.ServletException;
9. import javax.servlet.ServletRequest;
10. import javax.servlet.ServletResponse;
11. import javax.servlet.http.HttpServletResponse;
12. import java.io.IOException;
14. /**
15. * @author CSDN 流放深圳
16. * @description 自定义跨域过滤器
17. * @create 2024-03-24 下午 6:15
18. * @since 1.0.0
19. */
20. @Configuration
21. public class CorsFilter implements Filter {
23. @Override
24. public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
25. HttpServletResponse response = (HttpServletResponse) servletResponse;
26. response.setHeader("Access-Control-Allow-Origin", "*");
27. response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, HEAD, OPTIONS, DELETE");
28. response.setHeader("Access-Control-Max-Age", "3600");
29. response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
30. response.setHeader("Access-Control-Expose-Headers", "content-disposition");
32. filterChain.doFilter(servletRequest, servletResponse);
33. }
35. @Override
36. public void init(FilterConfig filterConfig) throws ServletException {
37. Filter.super.init(filterConfig);
38. }
40. @Override
41. public void destroy() {
42. Filter.super.destroy();
43. }
44. }

方式3：在某个 Controller 类或者方法上加注解 @CrossOrigin

比如：

如果在类上加这个注解，表示这个类所有的方法都允许跨域；如果只在某个方法上加这个注解，表示只有该方法允许跨域。