浅看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了