AJAX详解

半似星辰半似月

已于 2025-04-07 08:45:36 修改

阅读量4.4k

点赞数 41

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： ajax 前端

于 2025-03-16 10:00:00 首次发布

本文链接：https://blog.csdn.net/ajiaming/article/details/146286953

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

文章目录

一、什么是 Ajax？
二、AJAX 的特点
- 1. AJAX 的优点
- 2. AJAX 的缺点
三、Ajax 工作原理
四、Ajax 实现步骤
五、Ajax 应用场景
六、Ajax 常见问题
七、常见的Ajax 三种请求方式

一、什么是 Ajax？

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和XML。通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

二、AJAX 的特点

1. AJAX 的优点

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

2. AJAX 的缺点

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

三、Ajax 工作原理

Ajax 的目的是提高用户体验，较少网络数据的传输量。Ajax 在客户端和服务器之间加了一个**中间层**，使客户端操作与服务器响应异步化，一些数据验证和数据处理交给 Ajax 引擎自己来做，而不需要交给服务器，只有确定需要从服务器读取新数据时才会通过 Ajax 引擎代为向服务器提交请求。

四、Ajax 实现步骤

在这里插入图片描述

创建 XMLHttpRequest 核心对象 xhr

const xhr = new XMLHttpRequest();
// 设置响应体数据的类型(可有可无)
xhr.responseType = 'json';

通过 XMLHttpRequest 对象的 open() 方法给当前对象提供访问方式、URL 等与服务端建立连接
```
xhr.open(method, url, [async][, user][, password])
```
method：表示当前的请求方式，常见的有GET、POST
url：服务端地址
async：布尔值，表示是否异步执行操作，默认为true
user: 可选的用户名用于认证用途；默认为null
password: 可选的密码用于认证用途，默认为null

可以设置请求头，一般不设置
```
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
```
通过 XMLHttpRequest 对象的 send() 方法发送给服务端
```
xhr.send([body])
```
body: 在 xhr 请求中要发送的数据体，如果不传递数据则为 null
如果使用GET请求发送数据的时候，需要注意如下：
- 将请求数据添加到open()方法中的url地址中
- 发送请求数据中的send()方法中参数设置为null
接受返回值并处理
```
request.onreadystatechange = function(e){
    if(request.readyState === 4){ // 整个请求过程完毕
        if(request.status >= 200 && request.status <= 300){
            console.log(request.responseText) // 服务端返回的结果
        }else if(request.status >=400){
            console.log("错误信息：" + request.status)
        }
    }
}
```
readyState 属性一共有5个值，分别表示不同的请求响应阶段：
- 0：表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。
- 1：表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定HTTP请求的头信息。
- 2：表示 send()方法已经执行，并且头信息和状态码已经收到。
- 3：表示正在接收服务器传来的 body 部分的数据。
- 4：表示服务器数据已经完全接收，或者本次接收已经失败了

五、Ajax 应用场景

动态加载内容：Ajax 可以在不刷新整个页面的情况下，通过异步请求从服务器获取数据并动态更新页面的部分内容，从而实现更流畅的用户体验
表单验证：Ajax 可以在不刷新整个页面的情况下，实时验证表单数据的合法性（如手机号、唯一性校验）并提供反馈信息
搜索建议：当用户在搜索框中输入内容时，Ajax 可以在输入框下方实时显示相关的搜索建议，帮助用户更快速地找到自己需要的信息
购物车更新：Ajax 可以在不刷新整个页面的情况下，实时更新购物车中的商品数量以及总价等信息
实时聊天：Ajax 可以实现与服务器的实时通信，让用户在不刷新页面的情况下，实时接收到其他用户的消息（如直播评论、点赞、礼物等）

六、Ajax 常见问题

1. 解决 IE 缓存问题

在一些浏览器中存在缓存机制，Ajax 只会发送一次请求，剩余请求则不会再发送给浏览器，而是直接读取缓存中的数据

解决方案：浏览器缓存是通过 URL 地址记录，只需更改 URL 地址即可解决缓存问题

const xhr = new XMLHttpRequest();
xhr.open("GET", "http://127.0.0.1:8000/demo?t=" + Date.now());
xhr.send();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status >= 200 && xhr.status < 300) {
      console.log("xhr.response", xhr.response);
    }
  }
};

2. 请求超时与网络异常

当请求时间过长或网络出现问题时，可单独做一些特殊处理

const xhr = new XMLHttpRequest();

//超时设置 2s
xhr.timeout = 2000;

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

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

xhr.open("GET", "http://127.0.0.1:8000");
xhr.send();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status >= 200 && xhr.status < 300) {
      console.log("xhr.response", xhr.response);
    }
  }
};

3. 取消请求

当请求发出但并未响应时，可通过 abort()取消请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>取消请求</title>
  </head>
  <body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
      //获取元素对象
      const btns = document.querySelectorAll("button");
      let x = null;

      btns[0].onclick = function () {
        x = new XMLHttpRequest();
        x.open("GET", "http://127.0.0.1:8000");
        x.send();
      };

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

4. 跨域问题

同源策略
同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。
同源：协议、域名、端口号必须完全相同。违背同源策略就是跨域。
解决办法
- 后台 Http 请求转发
- 后台配置 Cors
- 使用 SpringCloud 网关
- 使用 Nginx 转发