ajax 原理是什么？如何实现？

一、什么是 AJAX？

AJAX 的全称是 Asynchronous JavaScript and XML，即异步的 JavaScript 和 XML。它是一种用于创建交互式网页应用的技术，可以在不重新加载整个网页的情况下，与服务器交换数据并更新网页的部分内容。

AJAX 的工作原理

简单来说，AJAX 通过 XMLHttpRequest 对象向服务器发送异步请求，接收服务器的响应数据，然后用 JavaScript 更新页面的 DOM。

示例比喻：
一个领导想找小李汇报工作，他让秘书去叫小李（发起请求），自己继续工作（异步执行），等秘书告诉他小李已经到了（接收响应数据），再与小李沟通。

流程如下：

1. 浏览器发送 HTTP 请求；
2. 浏览器可以同时继续处理其他任务（异步处理）；
3. 服务端处理请求并返回数据；
4. 浏览器接收数据并更新页面。

二、AJAX 的实现过程

实现 AJAX 异步交互需要以下几个步骤：

1. 创建 XMLHttpRequest 对象
2. 与服务器建立连接
3. 发送请求
4. 监听响应
5. 处理响应数据并更新页面

1. 创建 XMLHttpRequest 对象

使用 XMLHttpRequest 构造函数创建一个实例对象：

const xhr = new XMLHttpRequest();

2. 与服务器建立连接

通过 xhr.open() 方法与服务器建立连接：

xhr.open(method, url, [async], [user], [password]);

参数说明：

• method：HTTP 请求方法（常见有 GET 和 POST）。
• url：请求的服务端地址。
• async：是否异步，默认为 true。
• user 和 password：可选，用于认证。

示例：

xhr.open('GET', 'https://example.com/api', true);

3. 发送请求

使用 xhr.send() 方法将数据发送到服务器：

xhr.send([body]);

注意：

• 如果是 GET 请求，请将数据拼接到 URL 中，send 方法的参数设置为 null。
• 如果是 POST 请求，将数据通过 body 参数发送。

示例：

xhr.send(null); // GET 请求
xhr.send(JSON.stringify({ key: 'value' })); // POST 请求

4. 监听响应

监听服务器返回的响应状态，使用 onreadystatechange 事件来处理状态变化：

xhr.onreadystatechange = function () {
	if (xhr.readyState === 4) {
		// 请求完成
		if (xhr.status >= 200 && xhr.status < 300) {
			// 成功响应
			console.log(xhr.responseText); // 服务端返回的结果
		} else {
			// 错误响应
			console.error('Error: ' + xhr.status);
		}
	}
};

readyState 状态值：

值	状态描述
0	请求未初始化
1	连接已建立
2	请求已接收
3	请求处理中
4	请求完成，且响应已就绪

三、封装一个简单的 AJAX 函数

根据上述实现过程，封装一个通用的 AJAX 函数：

function ajax(options) {
	// 创建 XMLHttpRequest 对象
	const xhr = new XMLHttpRequest();

	// 初始化参数
	options = options || {};
	options.type = (options.type || 'GET').toUpperCase();
	const params = options.data
		? new URLSearchParams(options.data).toString()
		: '';

	// 发送请求
	if (options.type === 'GET') {
		xhr.open('GET', options.url + '?' + params, true);
		xhr.send(null);
	} else if (options.type === 'POST') {
		xhr.open('POST', options.url, true);
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		xhr.send(params);
	}

	// 监听响应
	xhr.onreadystatechange = function () {
		if (xhr.readyState === 4) {
			if (xhr.status >= 200 && xhr.status < 300) {
				options.success && options.success(xhr.responseText);
			} else {
				options.fail && options.fail(xhr.status);
			}
		}
	};
}

使用示例：

ajax({
	type: 'POST',
	url: 'https://example.com/api',
	data: { key: 'value' },
	success: function (response) {
		console.log('成功：', response);
	},
	fail: function (status) {
		console.error('失败：状态码', status);
	}
});

四、注意事项

1. 跨域问题：
   使用 AJAX 时需注意跨域请求，可以通过以下方式解决：

   • 使用服务器端代理；
   • 配置服务端支持 CORS；
   • 使用 JSONP（仅支持 GET 请求）。

2. 异步执行：
   默认情况下，AJAX 是异步的。在需要确保请求顺序时，可将 async 设置为 false（不推荐）。

3. 状态码检查：
   在监听响应时，需判断状态码是否在 2xx 范围内。