Ajax简单的工作原理即示例

使用Ajax的主要原因:
1、通过适当的Ajax应用达到更好的用户体验；
2、把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

Ajax工作原理即示例

1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
3. 设置响应HTTP请求状态变化的函数.
4. 发送HTTP请求.
5. 获取异步调用返回的数据.
6. 使用JavaScript和DOM实现局部刷新.

//以POST为例 注：步骤2和3的顺序不影响
const xhr = new XMLHttpRequest();  // 步骤1：创建XMLHttpRequest对象
xhr.onreadystatechange = () => {
    
       // 步骤3监听ajax的状态( 设置响应HTTP请求状态变化的函数.)
	if (xhr.readyState === 4 && xhr.status === 200) {
    
    
		success(JSON.parse(xhr.responseText));//步骤5：获取异步调用返回的数据.
}
xhr.open("POST", /users/login); //步骤2：创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
xhr.setRequestHeader("Content-type", "application/json"); // 设置请求头
xhr.sed(JSON.stringify({
    
    username,password})) // 步骤4：发送HTTP请求.