AJAX基础详解

先来了解一下：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属性，接收服务器端的响应数据