Ajax学习总结

一、Ajax概述

Asynchronous 浏览器支持异步通信模式，实现页面局部刷新

Javascript 使用的编程语言

And

Xml 通信数据的承载方式，但实际很少用到XML格式

二、典型的ajax编程模板

1.创建XMLHttpRequest对象

2.open操作初始化请求信息

3.监听事件处理响应结果

4.send操作发出请求

var xhr = createXHR();
xhr.onreadystatechange = function() {
if( xhr.readyState === 4 && xhr.status === 200 ) {
callback(xhr.getResponseHeader("PixelSpacing1"));
}
}
xhr.open("GET", url, true);
xhr.send();三、创建浏览器兼容的XMLHttpRequest
//创建XMLHttpRequest，兼容版
//IE6+ Msxml2.XMLHTTP
//<IE6 Microsoft.XMLHTTP
function createXHR(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
xhr = new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
try{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){}
}
}
return xhr;
}四、响应的接受与处理
通过监听onreadystatechange事件来完成，readyState有五种状态

0：未初始化——执行了open操作，但是还没执行send操作

1：链接建立请求发出——执行send操作之后

2：服务器返回响应——得到服务器的响应，但是响应不一定完成了

3：交互（处理响应数据）

4：完成，数据可交付客户端使用

0～3是在通信的过程，一般不需要进行处理，通常这样写

if(xhr.readyState===4&&xhr.status===200){
//交互完成且正确返回
}如果浏览器支持XMLHttpRequest的Level2，那么可以直接监听onload事件即可，如
xhr.onload = function(){
if(xhr.status===200){

}
}返回数据转化为JSON对象的两种方式：
浏览器有内置JSON对象：JSON.parse(xhr.responseText);

浏览器没有内置JSON对象：eval(xhr.responseText);