前端笔记-AJAX

MrsBaek2025-04-23 15:00

什么是AJAX？

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

AJAX的核心特点

  1. 异步通信
  • 不阻塞页面，用户操作不受影响。
  • 通过回调函数、Promise 或 async/await 处理响应。
  1. 局部更新
  • 用则加载，不用则不加载。只更新页面的某一部分，无需重新加载整个页面（如实时搜索、无限滚动）
  1. 数据格式灵活
  • 最初使用 XML，但现在更常用 JSON（轻量且易解析）。

AJAX的工作原理

  1. 浏览器 ：通过 JavaScript 发起 HTTP 请求（如 XMLHttpRequest 或 fetch）。

  2. 服务器：处理请求并返回数据（JSON/XML/HTML）。

  3. 浏览器：解析数据并动态更新 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. 核心注意事项​

  1. ​跨域问题​：

    • 如果请求跨域接口，需服务端设置 Access-Control-Allow-Origin。

    • 或使用 JSONP（仅限 GET 请求）：

      复制代码 
      $.ajax({
  url: 'http://跨域地址',
  dataType: 'jsonp',
  success: function(data) { /* ... */ }
});

  2. ​数据格式​：

    • 发送数据：data 可以是对象（自动转 key=value）或字符串。
    • 接收数据：通过 dataType 指定预期类型（如 json 会自动解析）。

  3. ​性能优化​：

    • 对于频繁请求，使用 .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防护 需手动处理 内置支持

核心注意事项

  1. ​Content-Type 默认值​：

    • POST默认使用application/json
    • 发送表单数据需显式设置'Content-Type': 'application/x-www-form-urlencoded'

  2. ​错误处理​：

    • 网络错误会触发error.request
    • 2xx外的状态码会触发error.response

  3. ​性能优化​：

    • 创建实例比修改全局defaults更推荐
    • 拦截器中避免阻塞操作

  4. ​安全实践​：

    • 敏感信息不应放在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; // 继续向上抛出
  }
}
相关推荐
莫的感情8 分钟前
下载按钮点击一次却下载两个文件问题
前端
一个很帅的帅哥11 分钟前
JavaScript事件循环
开发语言·前端·javascript
摇滚侠12 分钟前
Spring Boot 3零基础教程，WEB 开发 自定义静态资源目录 笔记31
spring boot·笔记·后端·spring
摇滚侠13 分钟前
Spring Boot 3零基础教程，WEB 开发 Thymeleaf 遍历 笔记40
spring boot·笔记·thymeleaf
小宁爱Python16 分钟前
Django Web 开发系列（二）：视图进阶、快捷函数与请求响应处理
前端·django·sqlite
fox_16 分钟前
深入理解React中的不可变性：原理、价值与实践
前端·react.js
Github项目推荐18 分钟前
你的错误处理一团糟-是时候修复它了-🛠️
前端·后端
Code小翊23 分钟前
C语言bsearch的使用
java·c语言·前端
云枫晖24 分钟前
Webapck系列-初识Webpack
前端·javascript
慧一居士27 分钟前
HTML5 功能介绍，使用场景，对应功能点完整使用示例
前端
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南07一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示08在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）092025软件测试面试八股文（含答案+文档）10XXE 注入漏洞全解析：从原理到实战