一、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 @H_404_42@的Level2,那么可以直接监听onload事件即可,如
xhr.onload = function(){ if(xhr.status===200){ } }返回数据转化为JSON对象的两种方式:
浏览器有内置JSON对象:JSON.parse(xhr.responseText);
浏览器没有内置JSON对象:eval(xhr.responseText);
原文链接:https://www.f2er.com/ajax/162790.html