本文已参与「新人创作礼」活动，一起开启掘金创作之路。

JS使用AJAX

AJAX即"Asynchronous Javascript And XML"（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX是一种浏览器通过js异步发起请求。局部更新页面的技术。

在请求更新时，浏览器地址栏不会发生变化，而且局部更新不会舍弃原来页面的内容。

**异步可以带来更好的用户体验：**在同步情况下，当我们向服务器提交申请后，页面代码就会卡死不继续执行，直到服务器进行了响应，才会恢复操作权，这样就造成了点击一个按钮，整个页面卡死的现象，带来很糟糕的用户体验。 而异步时，向服务器提交申请后依旧可以后续代码功能，并不会因服务器未响应而造成卡顿现象，实际业务中更多使用。

通俗的理解就是：“同步就像是打电话，异步就像是发邮件”

JavaScript的AJAX请求

请求四步走：

1. 创建XMLHttpRequest

   var xmlhttprequest = new XMLHttpRequest();
   

2. 调用open方法设置请求参数

   xmlhttprequest.open("GET","http://localhost:8080/web/ajaxServlet?action=javaScriptAjax",true);//baseServlet里的service方法会根据action参数的值调用方法，即action的值就是要调用的方法名
   

3. 调用send方法发送请求

   xmlhttprequest.send();
   

4. 在sand方法前绑定onreadystatechange事件，处理请求完成后的操作

   xmlhttprequest.onreadystatechange = function(){
   	if(xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200){
   		xmlhttprequest.responseText;
   	}
   	
   }
   

XMLHttpRequest对象中的三个重要信息：

1、onreadystatechange：存储函数（或函数名），每当readyState属性改变时，就会调用该函数。

2、readyState：表示XMLHttpRequest的状态从0到4发生变化：

• 0----请求未初始化
• 1----服务器连接已建立
• 2----请求已接收
• 3----请求处理中
• 4----请求已完成，且响应已就绪

3、status状态码：

• 200：“ok”
• 404：未找到页面