AJAX简单请求流程

1️⃣ AJAX 基本概念

• AJAX（Asynchronous JavaScript And XML）：异步 JavaScript 与 XML，用于前端向服务器发送请求并处理响应，而无需刷新整个页面。
• 核心特点：
  1. 异步请求（页面不刷新）。
  2. 可以使用 JSON、XML 或文本格式传输数据。
  3. 提升用户体验。

2️⃣ 原生 JavaScript AJAX 请求流程

流程说明

1. 创建对象：XMLHttpRequest()。
2. 配置请求：xhr.open()，指定请求方式、URL、是否异步。
3. 注册事件：监听 onreadystatechange 或 onload。
4. 发送请求：xhr.send()。
5. 处理响应：通过 xhr.responseText（文本）、xhr.responseXML（XML） 或 JSON 解析。

3️⃣ 使用 jQuery 简化 AJAX

jQuery 优势

• 自动处理浏览器兼容性。
• 支持链式调用（$.get(), $.post()）。
• 可直接解析 JSON 数据。

4️⃣ AJAX 简单请求流程图

1. 用户操作（点击按钮/页面加载）
2. 前端 JS 发起 AJAX 请求 → XMLHttpRequest / jQuery
3. 请求发送到服务器
4. 服务器处理请求 → 查询数据库 / 执行逻辑
5. 服务器返回响应数据 → JSON / XML / 文本
6. 前端接收数据 → 处理并更新页面部分内容

💡 特点：整个过程 不刷新页面，用户体验更流畅。

5️⃣ 小技巧

• GET vs POST
  • GET：适合获取数据，数据量小，参数显示在 URL。
  • POST：适合提交数据，数据量大，更安全。
• JSON 格式最常用：xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); xhr.send(JSON.stringify({name: "阿杰"}));
• 超时设置：xhr.timeout = 5000; // 5秒超时 xhr.ontimeout = function(){ console.error('请求超时'); }

https://www.52runoob.com/archives/6629