Ajax 系列：简单理解 Ajax

1 概述

Ajax 是一种异步请求数据的 Web 开发技术，在无需重新加载整个页面的情况下，通过异步请求加载后台数据，并在页面上呈现出来，提高了用户体验。

---

2 Ajax 的使用

2.1 创建对象

var ajax = new XMLHttpRequest();

XMLHttpRequest 对象的重要属性和事件：

• readyState：请求状态码
• status：以数字形式返回 HTTP 状态码
• statusText：以文本的形式返回 HTTP 状态码
• responseText：获取响应主体的文本形式
• responseXML：获取响应主体的 Document 形式
• readystatechange：readyState 属性的改变会触发该事件

---

2.2 指定请求方法和URL

通过 open(method, url, async) 方法指定请求方法和URL：

• method：指定请求方法（get 或 post），不区分大小。
• url：指定请求的 url，可以是相对 url，也可以是绝对 url。
• async：指定请求是异步（true）还是同步（false），默认异步。

ajax.open('get', 'userInfo.php');

---

2.3 发送请求

通过 send() 方法指定请求主体并且发送请求。

// get 请求：没有请求主体，所以 send() 方法参数为 null 或省略参数
ajax.send(null);
// 或
ajax.send();

// post 请求：通常有请求主体，同时应该匹配使用 setRequestHeader() 方法指定 Content-Type 头
ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
send(data);

---

2.4 服务器响应处理

通过 readystatechange 事件监听请求的状态变化。

ajax.onreadystatechange = function () {
	if (ajax.readyState !== 4 ) return;

	if (ajax.status === 200) {
		// 请求成功
		console.log(ajax.responseText);
	} else {
		// 请求失败
		console.log('请求失败...');
	}
}

---

2.5 中断请求

可以通过 XMLHttpRequest 对象的 abort() 方法来取消正在进行的 HTTP 请求。

function timedGetText(url, timeout, callback) {
  var ajax = new XMLHttpRequest();

  // 启动计时器，在 timeout 毫秒后将中止请求
  var timer = setTimeout(function () {
    ajax.abort(); // 中止请求
  }, timeout);

  ajax.open("GET", url);
  ajax.onreadystatechange = function () {
    if (ajax.readyState == 4) {
      // 此时请求已完成，取消中止请求操作
      clearTimeout(timer);
      if (ajax.status === 200) callback(ajax.responseText);
    }
  };
  ajax.send();
}

---

3 知识点补充

『HTTP 请求由 4 部分组成』

• 请求方法
• URL
• 请求头集合（可选）
• 请求主体（可选）

『HTTP 响应由 3 部分组成』

• 状态码
• 响应头集合
• 响应主体

『readyState 是什么？』

readyState 是 XMLHttpRequest 对象的一个属性，用来标识当前请求处于什么状态。

值	含义
0	请求未初始化
1	与服务器建立连接
2	服务器已接收请求
3	服务器处理请求中
4	请求完成，且响应已就绪

『HTTP 状态码（status）分五大类』

状态码	作用	描述
1xx	信息提示	通告信息，可能还需要进一步交互
2xx	成功	成功完成客户请求的操作，并进行响应
3xx	重定向	表示资源已移走，需要向新 URL 发请求
4xx	客户端错误	由于客户端请求错误，无法成功响应
5xx	服务器端错误	由于服务器错误，无法成功响应

---

4 参考资料

了解AJAX五步骤

AJAX原理及常见面试题