ajax

// 创建xhr对象（兼容IE7以下），这里利用DOM0级的方式为xhr对象添加了事件处理程序，因为并非
// 所有浏览器都支持DOM2级方法
function createXHR(){
if(typeof XMLHttpRequest != "undefined"){
return new HMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
//适用于IE7之前的版本
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
i,
len;

for(i = 0,len = versions.length; i < len; i++){
try{
new ActiveXObject(vuersions[i]);
arguments.callee.activeXString = versions[i];
break;
}catch(ex){
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("NO XHR object available.")
}
}

//新建一个xhr对象
var xhr = new createXHR();
//注册onreadystatechange事件检测每次状态变化之后readyState的值。
//在接收响应之前还可以调用xhr.abort()方法来取消异步请求。调用该方法后xhr对象会停止触发事件，
//而且也不再允许访问任何与响应哟管的对象属性。
//该事件必须在open之前调用才能确保跨浏览器兼容性。
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(( xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 ){
// console.log(xhr.responseText);
var data = JSON.$.parseJSON(xhr.responseText);
function DOMHandler(data){
//update DOM 
}
}else{
console.log("Request was unsuccessful:" + xhr.status);
}
}
};
//启动一个请求
//GET请求，通常用于向服务器查询某些信息。
var url = "demo.php";
url = addURLParam(url ,"name", "zhangyanling");
url = addURLParam(url ,"book", "Javascript");

xhr.open("get",url ,false);
xhr.send(null);
//POST请求，通常用于向服务器发送应该被保存的数据。POST请求应该把数据作为请求的主体提交，它的主体可以包含很多数据，且格式不限。
xhr.open("post",url ,false);
//可以使用setRequestHeader()设置自定义的请求头部信息，参数为：1.头部字段名称 2.头部字段值；
//该方法只能在open之后send之前调用。
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//调用getResponseHeader()方法并传入头部字段名称，可以获取响应的响应头部信息；
//调用getAllResponseHeaders()方法可以取得一个包含所有头部信息的长字符串。
//可使用serialize()对发送的数据进行序列化。
xhr.send(null);

function addURLParam(url ,name ,value){
url += (url.indexOf("?")) == -1 ? "?" : "&";
url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
}