Ajax 是一种让网页“不用刷新页面，也能和服务器通信”的技术。

比如：

• 搜索框自动提示
• 点赞后数字立即变化
• 提交表单后局部刷新

这些功能背后通常都用了 Ajax。

什么是 Ajax？

Ajax 全称 Asynchronous JavaScript and XML，意思是 JS 异步请求服务器数据，虽然名字里有 XML，但实际开发里更多使用 JSON。

传统网页的工作流程：

1. 点击按钮
2. 浏览器请求服务器
3. 服务器返回完整页面
4. 浏览器整体刷新

问题：

• 页面会闪一下
• 速度较慢
• 用户体验不好
• 浪费带宽

Ajax 出现后：

• 页面无需整体刷新
• 后台获取数据
• 只更新局部区域
• 交互体验更流畅

Ajax 的实现方式

1. 创建 XMLHttpRequest 对象
2. 配置请求
3. 发送请求
4. 等待服务器响应
5. 更新页面内容

GET 获取数据

function loadUser() {
  // 创建 XMLHttpRequest 对象
  var xhr = new XMLHttpRequest();

  // 配置请求
  xhr.open("GET", "/api/user", true);

  // 监听状态变化
  xhr.onreadystatechange = function () {
    // 请求完成
    if (xhr.readyState == 4) {
      // 请求成功
      if (xhr.status == 200) {
        // 输出服务器返回的数据
        console.log(xhr.responseText);
      } else {
        console.log("请求失败");
      }
    }
  };

  // 发送请求
  xhr.send();
}

POST 提交数据

function submitData() {
  var xhr = new XMLHttpRequest();

  xhr.open("POST", "/api/user", true);

  // 设置请求头
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      console.log("提交成功");
    }
  };

  // 提交数据
  xhr.send("name=Tom&age=18");
}

IE 浏览器兼容

IE6/IE7 需要使用：

ActiveXObject;