ajax 介绍和使用及案例

[TOC]

## 1. Jquery中ajax请求

+ AJAX 是一种异步请求的技术概念，核心实现是 XMLHttpRequest 对象
+ AJAX 使用回调函数处理异步操作，容易产生 "回调地狱"
+ XMLHttpRequest 会自动携带同源 cookies
+ AJAX 可以通过 status 状态码直接判断错误
+ AJAX 的 responseText/responseXML 可以直接获取解析结果

**Ajax 实现的示例:**

```javascript
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error('请求失败');
  }
};
xhr.send();
```

**一个完整的 Ajax 使用示例：**

```javascript
$.ajax({
  url: 'https://api.example.com/data',
  type: 'GET',
  async: false,  // 仅该请求为同步
  // 添加请求头
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your_token_here',
    'Custom-Header': 'custom_value'
  },
  data:{name:"曹孟德",age:56,position:"丞相"}
  success: function(response) {
    console.log(response);
  },
  error: function(xhr, status, error) {
    console.error(error);
  }
});
```

### 1.1. 请求头设置

在 jquery 的 ajax 中设置请求头需要使用 ajax 对象属性`headers`

### 1.2. 同步/异步设置

在 jquery 的 ajax 中设置同步异步需要使用 ajax 对象属性`async`，`async:false` 时同步，`async:ture` 时异步，ajax 默认是异步的

### 1.3. then 方法

then 方法用于在 AJAX 请求成功或失败时执行回调函数。它接受两个可选参数，第一个是成功回调函数，第二个是失败回调函数。

```javascript
$.ajax({
    url: 'your-url',
    method: 'GET'
})
.then(function(response) {
    // 请求成功时执行的代码
    console.log('请求成功:', response);
}, function(error) {
    // 请求失败时执行的代码
    console.log('请求失败:', error);
});
```

### 1.4. always 方法

always 方法无论 AJAX 请求成功还是失败都会执行。它只接受一个回调函数作为参数。

```javascript
$.ajax({
    url: 'your-url',
    method: 'GET'
})
.always(function(dataOrError, textStatus, jqXHR) {
    // 无论请求成功或失败都会执行的代码
    console.log('请求完成，状态:', textStatus);
});
```

### 1.5. 并行请求

使用 $.when 方法可以并行发送多个 AJAX 请求，并在所有请求都完成后执行回调函数。

```javascript
var request1 = $.ajax({
    url: 'first-url',
    method: 'GET'
});
var request2 = $.ajax({
    url: 'second-url',
    method: 'GET'
});

$.when(request1, request2)
.then(function(response1, response2) {
    console.log('第一个请求结果:', response1[0]);
    console.log('第二个请求结果:', response2[0]);
});
```

## 2. 案例

### 2.1. ajax 同步请求使用

在 jQuery 中，可以通过 `$.ajaxSetup()` 方法全局设置 AJAX 请求的同步/异步模式，使用 `async` 参数控制。下面是一个完整示例，展示如何开启同步模式、执行操作，然后关闭同步模式：

```javascript
// 保存当前的 async 设置，以便后续恢复
var originalAsync = $.ajaxSettings.async;

try {
  // 1. 开启同步模式
  $.ajaxSetup({
    async: false  // 设置为 false 表示同步请求
  });

// 2. 执行需要同步处理的 AJAX 操作
  console.log("开始执行同步操作...");

var result1, result2;

// 第一个同步请求
  $.get('data1.json', function(data) {
    result1 = data;
    console.log("第一个请求完成");
  });

// 第二个同步请求（会等待第一个完成后才执行）
  $.get('data2.json', function(data) {
    result2 = data;
    console.log("第二个请求完成");
  });

// 3. 执行依赖于请求结果的操作
  console.log("所有请求完成，开始处理结果");
  console.log("结果1:", result1);
  console.log("结果2:", result2);

} finally {
  // 4. 无论是否发生错误，都恢复原始的 async 设置
  $.ajaxSetup({
    async: originalAsync
  });
  console.log("已恢复异步模式");
}
```

**代码解释：**

1. **保存原始设置**：首先记录当前的 `async` 状态，以便后续恢复，避免影响页面其他 AJAX 操作。

2. **开启同步模式**：通过 `$.ajaxSetup({ async: false })` 全局设置所有 AJAX 请求为同步模式。
   同步模式下，代码会等待当前 AJAX 请求完成后，再执行后续代码。

3. **执行同步操作**：此时所有的 `$.get()`、`$.post()`、`$.ajax()` 都会按顺序同步执行。
   例如示例中的第二个请求会严格等待第一个请求完成后才开始。

4. **恢复异步模式**：在 `finally` 块中恢复原始的 `async` 设置，确保不会影响页面其他部分的 AJAX 行为。
   使用 `finally` 可以保证即使中间代码出错，也能正确恢复设置。

**注意事项：**

- 同步请求会阻塞浏览器，在请求过程中页面会无响应，因此不建议在用户交互频繁的场景使用。
- 尽量避免全局设置 `async: false`，可以在单个 `$.ajax()` 中单独设置 `async: false` 来替代。
- 现代浏览器对主线程的同步请求有严格限制，长时间的同步请求可能会被浏览器终止。

如果只需要单个请求同步执行，更推荐的做法是在具体请求中设置：

```javascript
$.ajax({
  url: 'data.json',
  async: false,  // 仅该请求为同步
  success: function(data) {
    console.log("请求完成", data);
  }
});
```

### 2.2. ajax 链式请求

当有要求一系列 ajax 请求按顺序执行时，就可以使用链式请求的方法，让多个请求按顺序执行，可以使用 jQuery 的 Deferred 和 then() 方法来实现链式调用。这种方式能保证前一个请求完成后再执行下一个，实现顺序执行的效果。

```javascript
// 假设这是已有的多个AJAX请求方法，我们不修改它们
function ajaxRequest1() {
  return $.get("data1.json"); // 返回jQuery的Promise对象
}

function ajaxRequest2() {
  return $.post("data2.json", { param: "value" }); // 返回Promise对象
}

function ajaxRequest3() {
  return $.ajax({
    url: "data3.json",
    type: "PUT"
  }); // 返回Promise对象
}

// 包裹函数：按顺序执行所有AJAX请求
function executeInOrder() {
  // 第一个请求
  ajaxRequest1()
    .then(function(response1) {
      console.log("第一个请求完成:", response1);
      // 第一个请求成功后，执行第二个请求
      return ajaxRequest2();
    })
    .then(function(response2) {
      console.log("第二个请求完成:", response2);
      // 第二个请求成功后，执行第三个请求
      return ajaxRequest3();
    })
    .then(function(response3) {
      console.log("第三个请求完成:", response3);
      console.log("所有请求按顺序执行完毕");
    })
    .catch(function(error) {
      // 任何一个请求失败都会进入这里
      console.error("某个请求失败:", error);
    });
}

// 调用函数开始执行
executeInOrder();
```

**代码解释：**

1. **保留原有AJAX方法**：示例中的 `ajaxRequest1`、`ajaxRequest2`、`ajaxRequest3` 是已有的请求方法，我们没有做任何修改，只确保它们返回了 jQuery 的 AJAX 调用结果（这是关键，因为 jQuery 的 AJAX 方法会返回一个 Promise 兼容的对象）。

2. **使用链式调用实现顺序执行**：
   - 通过 `.then()` 方法将多个请求串联起来
   - 前一个 `.then()` 中返回下一个 AJAX 请求，确保按顺序执行
   - 每个 `.then()` 的回调函数接收上一个请求的响应结果

3. **错误处理**：使用 `.catch()` 可以捕获整个调用链中任何一个请求的错误，避免流程中断且无法排查问题。

**这种方式的优势：**

- 不需要修改原有 AJAX 方法的代码
- 保证请求严格按顺序执行（前一个完成才会执行下一个）
- 不会阻塞浏览器（保持异步特性）
- 可以方便地获取每个请求的返回结果并传递给后续步骤

如果需要支持更复杂的场景（如动态决定下一个请求），也可以在 `.then()` 中根据条件返回不同的请求，实现灵活的流程控制。

### 2.3. ajax Promise 链式请求

如果在一个链式请求中有多AJAX请求，<mark>每个ajax请求完都有比较耗时的其他业务逻辑</mark>，只有这些业务逻辑也执行完毕后才能继续下一个 ajax 请求，那这种链式请求就需要借助 Promise 来完成，下面是一个实现示例：

```javascript
// 假设这些是已有的函数，包含AJAX和其他业务逻辑
function operation1() {
    console.log("开始执行操作1");
    // 内部有AJAX请求和其他业务
    return new Promise(function(resolve) {
        // 原有AJAX逻辑
        $.get("data1.json", function(response) {
            console.log("操作1的AJAX请求完成");
            // 其他业务逻辑
            console.log("执行操作1的后续业务");
            // 标记操作1完成
            resolve(response);
        });
    });
}

// 按顺序执行所有操作的函数
function executeSequentially() {
    operation1()
        .then(function(result1) {
            console.log("操作1完成，结果:", result1);
            return operation2(); // 等待操作1完成后再执行操作2
        })
        .then(function(result2) {
            console.log("操作2完成，结果:", result2);
            return operation3(); // 等待操作2完成后再执行操作3
        })
        .then(function(result3) {
            console.log("操作3完成，结果:", result3);
            console.log("所有操作已按顺序执行完毕");
        })
        .catch(function(error) {
            console.error("执行过程中发生错误:", error);
        });
}

// 启动执行
executeSequentially();
```

**代码解释：**

1. **改造原有函数**：将每个包含AJAX或异步操作的函数改造为返回Promise对象，这是实现顺序执行的关键。

2. **Promise的作用**：
   - 通过`new Promise()`包装原有逻辑
   - 在操作（包括AJAX请求）完成时调用`resolve()`，标记当前操作完成
   - 这样就可以使用`.then()`方法进行链式调用

3. **顺序执行机制**：
   - 使用`.then()`方法将多个操作串联起来
   - 每个`.then()`会等待前一个操作的Promise完成后才会执行
   - 确保了操作1 → 操作2 → 操作3的严格顺序

4. **错误处理**：通过`.catch()`可以捕获整个执行链中出现的任何错误

**这种方式的优点是：**

- 只需对原有函数进行最小改动（包装成Promise）
- 保持异步执行特性，不会阻塞浏览器
- 可以灵活处理既有AJAX又有其他业务逻辑的场景
- 能够清晰地传递每个操作的结果到下一个步骤

如果某些函数确实无法修改，也可以创建一个包装函数来包裹它们并返回Promise，从而实现相同的效果。