先来了解一下：AJAX

AJAX是Asynchronous Javascript and Xml的缩写，可以理解为客户端与服务器端进行交互，而无需刷新当前页面的技术称为AJAX

同步交互：

客户端向服务器端发送请求，到服务器端进行响应的过程中，用户不能做其他事情（只能进行等待）

异步交互：

客户端向服务器端发送请求，到服务器端进行响应的过程中，用户可以做其他事情

同步交互与异步交互的区别：

同步交互：

• 执行速度相比较慢

• 响应的是完整的HTML页面

异步交互：

• 执行速度相比较快

• 响应的是部分数据

实质使用XMLHttpRequest对象异步的向服务器发送请求

创建XMLHttpRequest对象

function getXhr(){

var xhr=null //声明XMLHttpRequest对象

// 根据不同的浏览器进行创建

if(window.XMLHttpRequest)

{

//表示除IE外的其他浏览器

xhr= new XMLHttpRequest();

}else{

//表示IE浏览器

xhr=new ActiveXObject(‘Microsoft.XMLHttp’);

}

return xhr;

}

创建核心对象就可以复制上面的代码进行创建：： var xhr=getXhr();

XMLHttpRequest对象常用方法：

open(“method”,”url”,[asyncFlag])方法//用于设置进行异步请求目标的URL

1. method为请求类型（GET，POST）

2. url：目标路径,

3. asyncFlag:可选参数，指定请求方式，异步为true，同步为fasle(同步已经不再使用，默认就好)

send(content)方法//用于向服务器发送请求

content格式：key=value 例如：xhr.send(“user=zhangsan”);

//注意：如果请求类型为GET方式的话send()方法不能向服务器端发送请求数据de

但是send()方法不能省略，应该这样写 ：xhr.send(NULL);

但是如果发送数据就应该这样写：xhr.open(“GET”,”01.jsp?user=zhangsan”);

XMLHttpRequest对象常用属性：

onreadystatechange事件–监听服务器//状态改变时就会触发此事件

readyState属性—获取请求的状态（属性值介绍）

1. 0—未初始化（服务器端）

2. 1—正在加载 （服务器端正在接收请求）

3. 2—已加载 （服务器端接收完成）

4. 3—交互中 （正在响应）

5. 4—完成 （响应完成）

status属性：

1. 200—表示成功

2. 202—表示请求被接受，但尚未成功

3. 400—错误的请求

4. 404—文件未找到

5. 500—内部服务器错误

responseText属性：用于获取服务器的响应，表示为字符串

实现AJAX异步交互步骤：

1. 创建XMLHttpRequest核心对象（以上的写法）

2. 与服务器端建立连接：使用XMLHttpRequest对象的open()方法

3. 向服务器端发送请求：使用XMLHttpRequest对象的send()方法

4. 接受服务器端的响应数据：使用XMLHttpRequest对象的onreadystatechange事件，监听服务器端的通信状态。

使用XMLHttpRequest对象的readyState属性，判断服务器端的当前状态（0-4）

使用XMLHttpRequest对象的status属性，判断服务器端的当前状态（0-4）

使用XMLHttpRequest对象的responseText属性，接收服务器端的响应数据