AJAX

Ajax

一．用途：以异步的方式从服务器取得相关数据，既不必刷新页面就可以取得相应的数据，并解析呈现

 

到web页面中（浏览器与服务器之间的通讯）

 

二．XMLHttpRequest对象

实例化对象： var xhr = new XMLHttpRequest();

此对象的含有的方法：

启动发送：open(method,url,true/false,name,pwd) method为交互方方式，常见的有get/post，url为请求地址，true/false为是否进行异步请求异步请求是发送请求后继续执行后面的代码，同步请求则等服务器端响应完成后才继续执行后面的代码,name和pwd是基于http验证时的用户名和密码（可选）

设置发送时http头部信息：setRequestHeader(),采用参数为键值对当以get方式发送时不需要设置，当以post方式发送时必须设置setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

发送信息send(),参数同为键值对类型，多对值用&分隔，当时get请求时参数为null

响应状态改变：onreadystatechange ,当响应为响应状态改变绑定一个函数，每当状态改变时就调用函数

属性：status响应的http状态为200时表示响应完成，可以使用了

请求/响应过程所处状态：readyState，有五个值

0  未初始化，尚未调用open方法

1  启动，调用open，但未使用send方法

2  发送，send方法已触发

3  接收到部分响应数据

4  已接受全部响应数据，可以使用了

响应数据：responseText 可接受所有的响应类型

三．看代码

Get请求

var test = document.getElementById("test");

var xhr = new XMLHttpRequest();//实例化对象

xhr.open("get","test.php",true);//启动发送

xhr.onreadystatechange = change;//状态改变时调用change函数（后面定义）

xhr.send(null);

function change(){

if(xhr.status == 200 && xhr.readyState==4){//响应就绪

var result = xhr.responseText;//取得响应数据

test.innerHTML = result;//在web页面输出响应数据

}else{

alert(xhr.status+"/"+xhr.readyState);

}

}

 

 

 

Post请求：

var test = document.getElementById("test");

var xhr = new XMLHttpRequest();//实例化对象

var st = "type=test&value=ha";//要发送的数据，键值对类型，多对用&分隔

xhr.open("post","test.php",true);//启动发送

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置http头部信息，必须的

xhr.onreadystatechange = change;

xhr.send(st);

function change(){

if(xhr.status == 200 && xhr.readyState==4){

var result = xhr.responseText;

test.innerHTML = result;

alert("has success to send ajax");

}else{

alert(xhr.status+"/"+xhr.readyState);

}

四．另外的问题：

Ajax有时因为url格式不正确而出错，所以在涉及到url的值是最好都进行url编码

Get请求时传送的键值对也需要进行url编码编码函数为：encodeURLComponent();

五．思想

Ajax之前要刷新某个位置的内容时必须把整个网页都刷新一遍，造成了流量的浪费以及页面的童虎体验比较差，而ajax则是仅仅请求要刷新的部分，不用重载整个页面，从而提高用户体验和节省流量，

以此观之做事没必要完全重复之前做过的，只需要把变动过的地方做一遍就ok了