首页 > 代码库 > ajax原理总结附简单实例及其优点

ajax原理总结附简单实例及其优点

在工作中用了Ajax N多次了,也看过一些相关方面的书籍,也算是认识了它,但是一直没有认真总结和整理过相关的东东,失败! 

近有闲情,将之总结如下: 

【名称】 

Ajax是Asynchronous JavaScript and XML(以及 DHTML 等)的缩写。 
详情请移步Ajax: A New Approach to Web Applications 

【原理】 

简单一些,就是通过使用XmlHttpRequest对象向服务器发送异步请求,获取返回的数据,并使用Javascript和DOM操作页面内的元素,从而达到改变页面内容的目的。 
其中XmlHttpRequest对象是关键,因为它支持异步请求。XMLHttpRequest是完全用来向服务器发出一个请求的。它所包含的方法和属性如下所示: 
方法: 
abort() 导致当前正在请求被取消 
getAllResponseHeaders() 返回一个字符串,包含氖 响应标头的名称和值 
getResponseHeader(name) 返回指定的响应标头的值 
open(method, url, async, username, password) 设置请求的方法和目标URL。请求可以声明为同步的(可选),也可以给需要基于窗口谁的请求而提供用户名和口令(可选) 
send(content) 发起带有指定内容(可选)的请求 
setRequestHeader(name, value) 利用指定的名称和值,设置一个请求标头 
属性: 
onreadystatechange 指派在请求的状态发生变化时所使用的事件处理程序 
readyState 一个整数值,指示请求的状态如下: 
0—-未初始化 
1—-正在加载 
2—-已加载 
3—-交互 
4—–完成 
responseText 在响应里所返回的内容 
responseXML 如果内容是XML,就根据内容而创建XML DOM 
status 从服务器所返回的响应状态码。例如:200表示成功,404表示未找到,参考HTTP规范 
statusText 响应所返回的状态文本消息 
对于此对象其它介绍请移步:XMLHttpRequest概述 

【所包含的技术】 

· 基于XHTML和CSS标准的表示; 
· 使用Document Object Model进行动态显示和交互; 
· 使用XMLHttpRequest与服务器进行异步通信; 
· 使用JavaScript绑定一切; 
· 使用XML和XSLT;交换和操作数据。 
以上的技术都是一些广泛使用了的技术,都属于比较旧的技术,ajax是这几种技术的结合体。 

【简单实例】 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript"> 
function ajax() { 
var xmlHttp; 
// 依据对象判断,而不是依据浏览器 
if(window.XMLHttpRequest) { 
xmlHttp=new XMLHttpRequest();//mozilla浏览器 
}else if(window.ActiveXObject){ 
try{ 
xmlHttp=new ActiveXObject("Msxmlx2.XMLHTTP"); //IE老版本 
}catch(e){} 
try{ 
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE新版本 
}catch(e){} 

if(!xmlHttp){ 
window.alert("不能创建XMLHttpRequest对象实列"); 
return false; 
} 
} 

if (!xmlHttp) { 
alert("创建XMLHttpRequest对象失败!"); 
return false; 
} 

xmlHttp.open(POST, index.php?get_a=2&get_b=3, false); 
xmlHttp.setRequestHeader(Content-type, application/x-www-form-urlencoded;charset=UTF-8;); 
xmlHttp.send("post_a=1&post_b=2"); 
xmlHttp.onreadystatechange = function() { 
alert(xmlHttp.readyState); 
} 
if(xmlHttp.readyState == 4){ //判断对象状态 
var content_obj = document.getElementById("content"); 
content_obj.innerHTML = "正在处理数据..."; 
if(xmlHttp.status == 200){ //信息已经成功返回,开始处理信息 
var returnStr = xmlHttp.responseText; 
content_obj.innerHTML = returnStr; 
}else{ //页面不正常 
content_obj.innerHTML = "您所请求的页面存在异常!"; 
} 
} 
} 
</script> 
</head> 
<body> 
<input type="button" value="ajax" onclick="ajax();" /> 
<div id="content">ajax内容显示区</div> 
</body> 
</html> 

切记:当发起一个POST请求时,需要对报头 Content-type(内容类型)进行设置。这样,服务器就知道如何来处理上传的内容。如果要模拟通过HTTP协议的POST方式来发送表单,则应将内容类型设置为application/x-www-form-urlencoded。 

【优点】 

页面无刷新,用户体验好; 
异步,不打断用户操作,响应速度快; 
“按需取数据”,减少冗余请求,减轻服务器负担; 
基于标准化的并被广泛支持的技术,无需额外的插件; 
可以使数据和表现分离; 
【存在的问题】 
一些设备还不支持 
开发成本提高 
使back按钮失效,用户操作后无法返回; 
对流媒体支持没有flash之流好; 
对搜索引擎不友好 
破坏程序的异常机制 
存在一些安全问题,暴露了一些程序接口和数据逻辑

<iframe id="google_ads_frame2" vspace="0" height="250" marginHeight="0" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3447371224873639&output=html&h=250&slotname=8660799060&adk=1970350646&w=300&lmt=1399082475&flash=0&url=http%3A%2F%2Fwww.cnblogs.com%2Franran%2Fp%2F3701643.html&dt=1399082477237&shv=r20140429&cbv=r20140417&saldr=sb&prev_slotnames=4356862740&correlator=1399082477141&frm=20&ga_vid=429972749.1397695120&ga_sid=1399077957&ga_hid=19999440&ga_fc=1&u_tz=480&u_his=322&u_java=1&u_h=768&u_w=1364&u_ah=740&u_aw=1364&u_cd=16&u_nplug=0&u_nmime=0&dff=verdana&dfs=13&adx=0&ady=3239&biw=314&bih=74&eid=317150304&oid=3&rx=0&eae=0&docm=9&vis=0&fu=0&ifi=2&xpc=6a8ZhYKARe&p=http%3A//www.cnblogs.com&dtd=44" frameBorder="0" width="300" allowTransparency="true" name="google_ads_frame2" marginWidth="0" scrolling="no" hspace="0"></iframe><iframe id="google_ads_frame3" vspace="0" height="250" marginHeight="0" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3447371224873639&output=html&h=250&slotname=8660799060&adk=1970350646&w=300&lmt=1399082475&flash=0&url=http%3A%2F%2Fwww.cnblogs.com%2Franran%2Fp%2F3701643.html&dt=1399082477287&shv=r20140429&cbv=r20140417&saldr=sb&prev_slotnames=4356862740%2C8660799060&correlator=1399082477141&frm=20&ga_vid=429972749.1397695120&ga_sid=1399077957&ga_hid=19999440&ga_fc=1&u_tz=480&u_his=322&u_java=1&u_h=768&u_w=1364&u_ah=740&u_aw=1364&u_cd=16&u_nplug=0&u_nmime=0&dff=verdana&dfs=13&adx=305&ady=3489&biw=314&bih=74&eid=317150304&oid=3&rx=0&eae=0&docm=9&vis=0&fu=0&ifi=3&xpc=wRS5vRimlX&p=http%3A//www.cnblogs.com&dtd=40" frameBorder="0" width="300" allowTransparency="true" name="google_ads_frame3" marginWidth="0" scrolling="no" hspace="0"></iframe>