ajax

一，什么是AJAX ？

1.AJAX 是异步的javaScript和xml,不是一门新的语言，是一种现有标准方法的称呼。

2.AJAX用于向服务端发送请求，接受服务端返回的数据，并且在不用刷新整个页面的情况下，更新局部页面。

3.AJAX请求阶段和对readyState状态的监控是运行在浏览器的异步http请求线程下，事件运行在js引擎线程下。

二，AJAX工作原理

1.在所有现代浏览器中都内置了XMLHttpRequest 构造函数，用于生成XMLHttpRequet 对象，在ie5和ie6使用ActiveXObject对象, XMLHttpRequet 对象是AJAX的基础，用于和服务器交换数据。

2.要实现AJAX功能，第一步先创建XMLHttpRequst对象。

if(window.XMLHttpRequest)
{
	let xmlHttp = new XMLHttpRequest()
}
else
{
	let xmlHttp = new ActiveXObject()
}

3.第二歩使用XMLHttpRequst对象的open()和send()向服务端发送数据。

4.open(method,url,async) ：规定请求的类型、URL 以及是否异步处理请求。
method是请求的方法，
url是文件在服务器地址，
async同步或异步。

5.send(string)： 向服务端发送数据，只有使用post请求时才可以使用string传递数据

xmlHttp.open('GET','/xxx/xxx?xx&XX',true) // true 代表是异步
xmlHttp.send()

6.由于AJAX请求是异步的（js会继续往下执行），我们需要一个状态xmlHttp.readyState来跟踪请求阶段，一个事件XMLHttpRequest.prototype.onreadystatechange来处理服务端发送的数据。一个status状态码表示http请求最后响应状态。

7.readyState：0：初始化未完成； 1：服务器连接已建立； 2：请求已接收； 3: 请求处理中 4: 请求已完成，且响应已就绪。 当readyState发生改变时就会触发 onreadystatechange事件。所以第三歩：

xmlHttp.onreadystatechange=function()
{
	if(xmlHttp.readState===4 && xmlHttp.status===200)
	{
		// 接受数据
	}
	else{
		// 返回状态码
	}
}

8.最后一步是获得来自服务器的响应数据。AJAX使用 XMLHttpRequest 对象的 responseText 或 responseXML属性来获取响应数据。AJAX并不能指定后端返回的数据类型，因此我们通常使用responseXML接收数据，然后根据数据类型自己解析。

let data;
let err;
xmlHttp.onreadystatechange=function()
{
	if(xmlHttp.readState===4 && xmlHttp.status===200)
	{
		data=xmlHttp.responseText
	}
	else{
		err=xmlHttp.status
	}
}

三，网页请求的一般过程

图片来自：https://www.runoob.com/ajax/ajax-intro.html

这是自己的学习笔记，如果对您有帮助，点个赞鼓励一下!