前端笔记-AJAX

MrsBaek

于 2025-04-21 09:32:22 发布

阅读量916

点赞数 17

文章标签：前端笔记 ajax

本文链接：https://blog.csdn.net/MrsBaek/article/details/147321550

版权

什么是AJAX？

AJAX（Asynchronous JavaScript and XML）就是异步的JS和XML， 是一种无需刷新页面即可与服务器交换数据并更新部分网页内容的技术。它的核心是通过 JavaScript 在后台发送 HTTP 请求，接收服务器返回的数据（如 JSON、XML、HTML），然后动态更新页面。

AJAX的核心特点

1. 异步通信

不阻塞页面，用户操作不受影响。
通过回调函数、Promise 或 async/await 处理响应。

2. 局部更新

用则加载，不用则不加载。只更新页面的某一部分，无需重新加载整个页面（如实时搜索、无限滚动）

3. 数据格式灵活

最初使用 XML，但现在更常用 JSON（轻量且易解析）。

AJAX的工作原理

浏览器：通过 JavaScript 发起 HTTP 请求（如 XMLHttpRequest 或 fetch）。
服务器：处理请求并返回数据（JSON/XML/HTML）。
浏览器：解析数据并动态更新 DOM。

用户操作 → JavaScript 发送请求 → 服务器处理 → 返回数据 → 更新页面

AJAX 的典型应用场景

实时搜索（输入时自动提示）
表单提交（无刷新提交）
无限滚动（滚动到页面底部加载更多内容）
动态加载内容（如点击选项卡切换数据）
用户登录验证（无需跳转页面）

AJAX的优缺点

JAX 的优缺点

优点：

提升用户体验（无刷新交互）。
减少服务器负载（只传输必要数据）。
支持异步处理（不阻塞用户操作）。

缺点：

对 SEO 不友好（动态内容可能不被搜索引擎抓取）对爬虫不友好。
需处理跨域问题。
代码复杂度较高（需管理异步状态）。

XML简介

XML（eXtensible Markup Language，可扩展标记语言） 是一种用于 存储和传输结构化数据 的标记语言，被设计用来传输和存储数据。

下面给一个简单的示例：

<!-- 描述一本书的数据 -->
<book>
  <title>JavaScript 高级编程</title>
  <author>John Doe</author>
  <price currency="CNY">89.00</price>
</book>

可以从写法和框架可以看出来XML和HTML十分相像，但是也有很多的不同：

对比项	XML	HTML
设计目的	存储和传输数据	展示网页内容
标签	自定义（如 `<product>`）	预定义（如 `<table>`）
语法严格性	严格（必须正确嵌套和闭合）	宽松（浏览器会自动纠错）
大小写敏感	是（`<Book>` 和 `<book>` 不同）	否（通常小写）
空格处理	保留空格和换行	合并多余空格
典型应用	配置文件、API 数据交换（如 RSS）	网页开发
与 CSS/JS 关系	通常不直接关联	依赖 CSS 和 JS 实现样式和交互

HTTP协议

HTTP（HyperText Transfer Protocol）是客户端（如浏览器）与服务器通信的基础协议。每次交互都包含 请求报文（Request） 和 响应报文（Response），它们遵循严格的格式规范。

HTTP 请求报文格式

请求报文由 请求行、请求头、空行、请求体 四部分组成：

GET /api/data?id=123 HTTP/1.1       ← 请求行
Host: example.com                   ← 请求头（Headers）
User-Agent: Chrome/120.0
Accept: application/json
Content-Type: application/json
                                      ← 空行（分隔Headers和Body）
{"key": "value"}                     ← 请求体（Body，可选）

1. 请求行（Request Line）

格式：<方法> <路径> <协议版本>
```
GET /index.html HTTP/1.1
```
参数说明：
- 方法：GET（获取资源）、POST（提交数据）、PUT（更新资源）、DELETE（删除资源）等。
- 路径：请求的资源路径（如 /api/data），可包含查询参数（如 ?id=123）。
- 协议版本：HTTP/1.1 或 HTTP/2。

2. 请求头（Headers）

常用请求头：

Header	作用
`Host`	目标服务器域名（必需）
`User-Agent`	客户端标识（如浏览器类型）
`Accept`	声明客户端可接受的响应数据类型（如 `application/json`）
`Content-Type`	请求体的数据类型（如 `application/json`、`application/x-www-form-urlencoded`）
`Authorization`	身份验证凭证（如 `Bearer token`）

3. 请求体（Body）

适用方法：POST、PUT 等需要传递数据的方法。
常见格式：
- JSON：{"name": "Alice", "age": 25}
- 表单数据：name=Alice&age=25
- 文件上传：multipart/form-data

HTTP 响应报文格式

响应报文由 状态行、响应头、空行、响应体 四部分组成：

HTTP/1.1 200 OK                      ← 状态行
Server: nginx/1.18                   ← 响应头（Headers）
Content-Type: application/json
Content-Length: 25
                                      ← 空行
{"message": "Success"}               ← 响应体（Body）

1. 状态行（Status Line）

格式：<协议版本> <状态码> <状态描述>
```
HTTP/1.1 404 Not Found
```
常见状态码：
- 200 OK：请求成功。
- 301 Moved Permanently：永久重定向。
- 400 Bad Request：客户端请求错误。
- 404 Not Found：资源不存在。
- 500 Internal Server Error：服务器内部错误。

2. 响应头（Headers）

常用响应头：

Header	作用
`Content-Type`	响应体的数据类型（如 `text/html`、`application/json`）
`Content-Length`	响应体的字节数
`Set-Cookie`	服务器设置客户端的 Cookie
`Cache-Control`	控制缓存行为（如 `max-age=3600`）

3. 响应体（Body）

数据类型：由 Content-Type 决定。
- HTML：<html>...</html>
- JSON：{"data": [...]}
- 二进制文件：如图片、PDF。

关键参数对比

组成部分	请求报文	响应报文
起始行	`GET /path HTTP/1.1`	`HTTP/1.1 200 OK`
Headers	`Host`, `User-Agent`, `Content-Type`	`Content-Type`, `Set-Cookie`
Body	可选（POST/PUT 时使用）	可选（包含返回的数据或错误信息）

具体示例

在浏览器中搜索，打开F12控制台，这是定位问题十分重要的工具

找到第一个请求文件，主要观察标头和响应

这里有一些具体的示例，将不同的请求放在了同一个页面进行比较，也方便后续翻阅时调用：

前端实战-AJAX-CSDN博客

jQuery中的AJAX

1. 基础语法

$.ajax({
  url: '请求地址',
  type: 'GET/POST/PUT/DELETE', // 请求方法
  data: { key: value },       // 发送的数据（对象或字符串）
  dataType: 'json',           // 预期返回的数据类型（json/xml/text）
  success: function(response) {
    // 请求成功时的回调
  },
  error: function(xhr, status, error) {
    // 请求失败时的回调
  }
});

2. 快捷方法

方法	作用	示例
`$.get()`	发送 GET 请求	`$.get('url', data, callback)`
`$.post()`	发送 POST 请求	`$.post('url', data, callback)`
`$.getJSON()`	获取 JSON 数据	`$.getJSON('url', callback)`
`$.load()`	加载 HTML 片段到元素	`$('#div').load('url #fragment')`

示例：

// GET 请求
$.get('api/data', { id: 1 }, function(response) {
  console.log(response);
});

// POST 请求
$.post('api/save', { name: 'Alice' }, function(response) {
  alert('保存成功');
});

3. 全局 AJAX 事件

// 请求开始前
$(document).ajaxStart(function() {
  $('#loading').show();
});

// 请求结束后
$(document).ajaxComplete(function() {
  $('#loading').hide();
});

// 全局错误处理
$(document).ajaxError(function(event, xhr, settings, error) {
  console.error('请求出错:', error);
});

4. 实战示例

示例 1：获取 JSON 数据

$.getJSON('https://api.example.com/users', function(data) {
  $.each(data, function(index, user) {
    $('#user-list').append(`<li>${user.name}</li>`);
  });
});

示例 2：提交表单数据

$('#myForm').submit(function(e) {
  e.preventDefault();
  $.post('api/submit', $(this).serialize(), function(response) {
    $('#result').html(response.message);
  });
});

示例 3：错误处理

$.ajax({
  url: 'api/data',
  dataType: 'json',
  success: function(data) {
    console.log(data);
  },
  error: function(xhr) {
    if (xhr.status === 404) {
      alert('接口不存在');
    }
  }
});

5. 核心注意事项

跨域问题：
- 如果请求跨域接口，需服务端设置 Access-Control-Allow-Origin。
- 或使用 JSONP（仅限 GET 请求）：
```
$.ajax({
  url: 'http://跨域地址',
  dataType: 'jsonp',
  success: function(data) { /* ... */ }
});
```
数据格式：
- 发送数据：data 可以是对象（自动转 key=value）或字符串。
- 接收数据：通过 dataType 指定预期类型（如 json 会自动解析）。
性能优化：
- 对于频繁请求，使用 .abort() 取消未完成的请求：
```
const xhr = $.ajax({ /* ... */ });
xhr.abort(); // 取消请求
```

6. 对比原生 AJAX（jQuery 优势）

功能	原生 JS 代码量	jQuery 代码量
发送 GET 请求	10+ 行（XMLHttpRequest）	1 行（`$.get()`）
JSON 数据处理	手动 `JSON.parse()`	自动解析（`dataType`）
错误处理	多条件判断	统一 `error` 回调

一句话总结

jQuery AJAX 通过 链式调用 和 简化的 API，让异步请求代码减少 70% 以上，尤其适合快速开发和数据驱动的页面交互。

Axios发送AJAX请求

原生 AJAX vs Axios 对比表

特性	原生 AJAX (XMLHttpRequest)	Axios
语法复杂度	冗长	简洁
浏览器兼容性	所有浏览器	现代浏览器+Node.js
Promise 支持	需手动封装	内置支持
请求/响应拦截	不支持	支持
自动JSON转换	需手动处理	自动处理
取消请求	较复杂	简单易用
并发请求	需自行实现	内置axios.all方法
请求进度跟踪	支持	支持
CSRF防护	需手动处理	内置支持

核心注意事项

Content-Type 默认值：
- POST默认使用application/json
- 发送表单数据需显式设置'Content-Type': 'application/x-www-form-urlencoded'
错误处理：
- 网络错误会触发error.request
- 2xx外的状态码会触发error.response
性能优化：
- 创建实例比修改全局defaults更推荐
- 拦截器中避免阻塞操作
安全实践：
- 敏感信息不应放在URL参数中
- 考虑添加请求速率限制

实用示例

基础示例

// GET请求
axios.get('/api/users')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

// POST请求
axios.post('/api/users', { name: 'John' })
  .then(response => console.log('Created:', response.data));

高级配置示例

// 创建自定义实例
const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  }
});

// 带拦截器的实例
api.interceptors.request.use(config => {
  config.params = { ...config.params, timestamp: Date.now() };
  return config;
});

api.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      // 处理未授权错误
    }
    return Promise.reject(error);
  }
);

表单提交示例

// URL编码表单
const params = new URLSearchParams();
params.append('username', 'john');
params.append('password', 'secret');

axios.post('/login', params, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
});

// FormData表单 (文件上传)
const formData = new FormData();
formData.append('file', fileInput.files[0]);

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});

错误处理最佳实践

async function fetchData() {
  try {
    const response = await axios.get('/api/data');
    return response.data;
  } catch (error) {
    if (error.response) {
      // 服务器响应错误 (4xx, 5xx)
      console.error('Server error:', error.response.status);
    } else if (error.request) {
      // 无响应 (网络问题)
      console.error('No response:', error.request);
    } else {
      // 配置错误
      console.error('Setup error:', error.message);
    }
    throw error; // 继续向上抛出
  }
}