Ajax工作原理

发表于 | 分类于

随着前端领域的快速发展，ajax 的应用越来越广泛，我们更应该了解 ajax 运行背后的机制，以更好的服务我们的应用。ajax 的全称是 Asynchronous JavaScript and XML，其中，Asynchronous 是异步的意思，它有别于传统 web 开发中采用的同步的方式。

Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用 javascript 来操作 DOM 而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest 有所了解。

XMLHttpRequest 是 ajax 的核心机制，它是在 IE5 中首先引入的，是一种支持异步请求的技术。简单的说，也就是 javascript 可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

所以我们先从 XMLHttpRequest 讲起，来看看它的工作原理。首先，我们先来看看 XMLHttpRequest 这个对象的属性。它有以下属性：

属性名 说明
onreadystatechange 每次状态改变所触发事件的事件处理程序
responseText 从服务器进程返回数据的字符串形式
responseXML 从服务器进程返回的 DOM 兼容的文档数据对象
status 从服务器返回的数字代码，比如常见的 404（未找到）和 200（已就绪）
status Text 伴随状态码的字符串信息
readyState 对象状态值

在早些时候，由于有的浏览器不支持，还需要坚持是否支持 ActiveXObject 对象，由于当今浏览器都已经不支持该属性了，这里不做讲解。下面就讲讲怎么实现的吧！

1.实例化一个 XMLHttpRequest 对象

1
var request = new XMLHttpRequert();

2.指定一个请求

request.open()的第一个参数指定请求类型 GET/POST,不区分大小写，但大家通常使用大写的来匹配 HTTP 协议。
request.open()的第二个参数指定请求的 url
如果需要设置请求头，requeat.setRequestHeader(‘Content-Type’, ‘text/plain’);

1
request.open("GET", url);

3.发送请求

1
request.send(msg);

4.取得响应

通过监听 readystatechange 来判断响应的状态。
request.readyState == 4 表示请求完成
request.state 表示状态码，200 为请求成功，404 表示不存在

1
2
3
4
5
request.onreadystatechange = function () {
	if (request.readyState === 4 && request.state === 200) {
		callback(request);
	}
};

最后，将他们组合起来，就可以使用了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var $ajax = function (url, postObj, callback) {
	var xhr = new XMLHttpRequest();
	xhr.open("POST", url, true);
	xhr.responseType = "JSON";
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.send(param(postObj));
	xhr.onreadystatechange = function () {
		if (xhr.readyState === 4 && xhr.status === 200) {
			callback(xhr.response);
		} else {
			console.log(xhr);
			// 这里打印xhr对象
		}
	};
};

[越努力，越幸运！]