ajax通信原理

Ajax通信实质上是js创建了一个XMLHttpRequest对象，这个对象有个open（）方法，其参数包含url，methods，callback等，通过这个方法设置其属性，而后通过send()方法向后台发送请求。

XMLHttpRequest对象用于在后台与服务器交换数据。

XMLHttpRequest作用：
	在不重新加载页面的情况下更新网页。
	在页面已加载后从服务器请求数据。
	在页面已加载后从服务器接收数据。
	在后台向服务器发送数据。

XmlHttpRequest方法：

Open(url,method,async) ————打开与服务器的连接
参数说明:
	url:服务器的访问地址，或者资源的访问路径
	method:请求方法
	axync：是否执行异步请求，true为异步，false为同步
Send() 将请求发往服务器

onreadystatechange事件：

• 当请求对象的准备状态发生改变时触发
• 发送给服务器时，状态发生变化
• 服务器响应时，状态发生变化

readyState属性：

• readyState表示请求与服务器之间的状态信息。
• 每当readyState改变时，onreadystatechange事件就会触发。

readyState属性值：

• 0 —— 请求未初始化（在调用open之前）
• 1 —— 请求已提出 （调用send之前）
• 2 —— 请求已发送 （这里通常可以从响应得到内容头部）
• 3 —— 请求处理中 （响应中通常有部分数据可用，但是服务器还没有完成响应）
• 4 —— 请求已完成 （可以访问服务器响应并使用它）

Status状态码：
Status表示服务器响应结果状态码，常见以下几种状态：

• 200 —— 表示响应正确，服务器成功返回。
• 404 —— 服务器找不到请求的资源，通常是url地址错误。
• 500 —— 服务器异常，无法完成请求，通常是服务端错误。

responseText属性：

通过responseText属性来取回由服务器返回的数据，数据为文本格式。

步骤

1. 创建XMLHttpRequest对象
2. Open方法打开请求，（地址，方式，是否异步）
3. Send发送请求
4. Onreadystatechange监听请求状态改变事件，判断响应是否已经完成
5. 如果readyState ===4 && status ===200表示请求完成，并响应成功。
6. 通过responseText从服务器取出响应数据

示例：

	let xhr = new XMLHttpRequest()
	xhr.open(url,method,async)
	xhr.onreadystatechange = function(){
		if(xhr.readyState ===4){	//如果请求已完成
			if(xhr.status ===200){	//并响应成功
				console.log(xhr.responseText)
			}
		}
	}
	xhr.send(null)