简单理解 Ajax_ajaxx-优快云博客

　　Ajax 不是用于浏览器与服务端进行通信的工具，而是以 XMLHttpRequest 为核心，包括 HTML/XHTML、CSS、JavaScript、DOM、XML以及XSLT的一种用于实现网页局部刷新的集合技术。

　　Ajax 中的 x 表示 XML，是 Ajax 早期接收响应数据的形式，但由于 JSON 的流行，XML 已经基本被 JSON 替代。

1、Ajax 基本流程

通过 JavaScript 创建 XMLHttpRequest 对象
利用 XMLHttpRequest 对象向 web 服务器发送请求
通过 JavaScript 读取并处理服务端响应的数据
根据处理结果操作 DOM 刷新页面的相应区域

2、核心：XMLHttpRequest 对象

　　XMLHttpRequest 用于与服务器交互，是浏览器与服务端进行通信的工具。通过 XMLHttpRequest 对象可以在不刷新页面的情况下请求特定 URL，获取数据。

　　要使用 XMLHttpRequest 对象与服务端交互，首先需要创建一个 xhr 对象

	// 通过构造函数创建 xhr 对象
	// 所有现代浏览器都内置了该构造函数
	let xhr = new XMLHttpRequest();

　　然后调用 xhr 对象的 open() 方法初始化一个请求

	// open() 方法最多可接收五个参数
	// 其中最常用的是前两个，分别表示请求方式和请求地址
	const method = 'GET';
	const url = 'https://www.bilibili.com/index/ding.json';
	
	// 第三个参数表示是否异步请求，默认为 true，一般不用这个参数
	const async = true;
	
	// 初始化一个请求
	xhr.open(method, url);

　　初始化请求之后就可以调用 xhr.send() 方法发送请求了，但此时我们还应该为 xhr 对象绑定一些事件处理函数，以对服务端的响应进行处理。处理响应的方法可以根据需求绑定在 readystatechange 、loadend 或其他事件上面。

　　绑定的方式有两种，一是通过 xhr.addEventListener() 方法绑定事件处理函数，如

	// 这种方式可以为同一事件绑定多个事件处理函数
	xhr.addEventListener('readystatechange', function () {
	    if (xhr.readyState === 4) {
			if (xhr.status >= 200 && xhr.status < 300) {
				console.log(xhr.response);
			} else {
				console.log(xhr.status)
			}
		}
	})

　　二是通过设置 xhr 对象相应的属性来绑定事件处理函数，如

	xhr.onreadystatechange = function () {
		if (xhr.readyState === 4) {
			if (xhr.status >= 200 && xhr.status < 300) {
				console.log(xhr.response);
			} else {
				console.log(xhr.status)
			}
		}
	}

　　事件处理函数并非一定要在 xhr.send() 方法调用之前绑定，也可以在 xhr.send() 调用之后，或者 xhr.open() 调用之前，具体要看个人习惯。

　　xhr 对象需要调用 send() 才会发起请求。xhr.send() 方法接收一个可选的参数做为请求的主体，但是当请求方式为 GET 或 HEAD 时，请求主体会被忽略。

	xhr.send();
	xhr.send('foo=bar&lorem=ipsum');
	xhr.send(new Blob());
	
	// 不支持 Object、Array 类型的参数，需转化为 JSON 字符串
	xhr.send({name: '六月初六'}); // 错误的方式
	xhr.send(JSON.stringify{name: '六月初六'}); // 正确的方式