AJAX全称?#8220;Asynchronous JavaScript and XML”Q异步JavaScript和XMLQ，是指一U创Z互式|页应用的网开发技术?
AjaxQAsynchronous JavaScript + XMLQ的定义
Zweb标准Qstandards-based presentationQXHTML+CSS的表C；
使用 DOMQDocument Object ModelQ进行动态显C及交互Q?
使用 XML ?XSLT q行数据交换及相x作；
使用 XMLHttpRequest q行异步数据查询、检索；
使用 JavaScript 所有的东西l定在一赗?a target="_blank">英文参见Ajax的提Jesse James Garrett的原文?br />
cM于DHTML或LAMPQAJAX不是指一U单一的技术，而是有机地利用了一pd相关的技术。事实上Q一些基于AJAX?#8220;z/合成”式（derivative/compositeQ的技术正在出玎ͼ?#8220;AFLAX”?
AJAX的应用用支持以上技术的web览器作行^台。这些浏览器目前包括Q?a target="_blank">Mozilla?a target="_blank">Firefox?a target="_blank">Internet Explorer?a target="_blank">Opera?a target="_blank">Konqueror?a target="_blank">Safari。但是Opera不支持XSL格式对象Q也不支持XSLT?br />
传统的web应用允许用户填写表单(form)Q当提交表单时就?a target="_blank">web
服务?/a>发送一个请求。服务器接收q处理传来的表单Q然後返回一个新?a target="_blank">|页。这个做法浪费了许多带宽Q因为在前後两个面中的大部分HTML代码往往是相同的。由于每ơ应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器?a target="_blank">响应旉。这D了用L面的响应比本地应用慢得多?
与此不同QAJAX应用可以仅向服务器发送ƈ取回必需的数据，它用SOAP或其它一些基于XML的web service接口Qƈ在客L采用JavaScript处理来自服务器的响应。因为在服务器和览器之间交换的数据大量减少Q结果我们就能看到响应更快的应用。同时很多的处理工作可以在发求的客户端机器上完成Q所以Web服务器的处理旉也减了?br />
Ajax应用E序的优势在于：
1. 通过异步模式Q提升了用户体验
2. 优化?a target="_blank">览?/a>和服务器之间的传输，减少不必要的数据往q，减少了带宽占?br />
3. Ajax引擎在客Lq行Q承担了一部分本来由服务器承担的工作，从而减了大用户量下的服务器负载?br />
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首ơ引入，它是一U支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出hq处理响应，而不d用户?br />
在创建Web站点Ӟ在客L执行屏幕更新为用h供了很大的灵zL。下面是使用Ajax可以完成的功能：
动态更新购物R的物品LQ无需用户单击Updateq等待服务器重新发送整个页面?
提升站点的性能Q这是通过减少从服务器下蝲的数据量而实现的。例如，在某购物车页面，当更新篮子中的一物品的数量Ӟ会重新蝲入整个页面，q必M载整个页面的数据。如果用Ajax计算新的总量Q服务器只会q回新的总量|因此所需的带宽仅为原来的癑ֈ之一?消除了每ơ用戯入时的页面刷新。例如，在Ajax中，如果用户在分列表上单击NextQ则服务器数据只h列表而不是整个页面?
直接~辑表格数据Q而不是要求用户导航到新的面来编辑数据。对于AjaxQ当用户单击EditӞ可以静态表格刷Cؓ内容可编辑的表格。用户单击Done之后Q就可以发出一个Ajaxh来更新服务器Qƈh表格Q其包含静态、只ȝ数据?br />
一切皆有可能！但愿它能够激发您开始开发自qZAjax的站炏V然而，在开始之前，让我们介l一个现有的Web站点Q它遵@传统的提?{待/重新昄的范例，我们q将讨论Ajax如何提升用户体验?br />
Ajax的工作原理相当于在用户和服务器之间加了—个中间层，使用h作与服务器响应异步化。这h以前的一些服务器负担的工作{嫁到客户端，利于客户端闲|的处理能力来处理，减轻服务器和带宽的负担，从而达到节UISP的空间及带宽U用成本的目的?br />
我们以两个验证通行证帐h否存在的例子来讲qAJAX在实际中的应用：
(1)用文本字W串的方式返回服务器的响应来验证|易通行证帐h否存在；
(2)以XMLDocument对象方式q回响应来验证金山通行证帐h否存在；
首先Q我们需要用JavaScript来创?a target="_blank">XMLHttpRequest cd服务器发送一个HTTPhQ?XMLHttpRequest c首先由Internet Explorer以ActiveX对象引入Q被UCؓXMLHTTP?后来MozillaHNetscapeHSafari 和其他浏览器也提供了XMLHttpRequestc，不过它们创徏XMLHttpRequestcȝҎ不同?br />
对于Internet Explorer览器，创徏XMLHttpRequest Ҏ如下Q?br />
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0?.0, 5.0
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
׃在不同Internet Explorer览器中XMLHTTP版本可能不一_Z更好的兼容不同版本的Internet Explorer览器，因此我们需要根据不同版本的Internet Explorer览器来创徏XMLHttpRequestc，上面代码是Ҏ不同的Internet Explorer览器创建XMLHttpRequestcȝҎ?br />
对于MozillaHNetscapeHSafari{浏览器Q创建XMLHttpRequest Ҏ如下Qxmlhttp_request = new XMLHttpRequest();
如果服务器的响应没有XML mime-type headerQ某些Mozilla览器可能无法正常工作?Z解决q个问题Q如果服务器响应的header不是text/xmlQ可以调用其它方法修改该header?br />
xmlhttp_request = new XMLHttpRequest();
xmlhttp_request.overrideMimeType('text/xml');
在实际应用中Qؓ了兼容多U不同版本的览器，一般将创徏XMLHttpRequestcȝҎ写成如下形式Q?br />
try{
if( window.ActiveXObject ){
for( var i = 5; i; i-- ){
try{
if( i == 2 ){
xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" ); }
else{
xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
xmlhttp_request.setRequestHeader("Content-Type","text/xml");
xmlhttp_request.setRequestHeader("Content-Type","gb2312"); }
break;}
catch(e){
xmlhttp_request = false; } } }
else if( window.XMLHttpRequest )
{ xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType)
{ xmlhttp_request.overrideMimeType('text/xml'); } } }
catch(e){ xmlhttp_request = false; }
在定义了如何处理响应后，p发送请求了。可以调用HTTPhcȝopen()和send()ҎQ如下所C：
xmlhttp_request.open('GET', URL, true);
xmlhttp_request.send(null);
open()的第一个参数是HTTPh方式—GETQPOST或Q何服务器所支持的您惌用的方式?按照HTTP规范Q该参数要大写；否则Q某些浏览器(如Firefox)可能无法处理h?
W二个参数是h面的URL?br />
W三个参数设|请求是否ؓ异步模式。如果是TRUEQJavaScript函数l执行，而不{待服务器响应。这是"AJAX"中的"A"?br />
用JavaScript来创建XMLHttpRequest cd服务器发送一个HTTPh后，接下来要军_当收到服务器的响应后Q需要做什么。这需要告诉HTTPh对象用哪一个JavaScript函数处理q个响应。可以将对象的onreadystatechange属性设|ؓ要用的JavaScript的函数名Q如下所C：
xmlhttp_request.onreadystatechange =FunctionName;
FunctionName是用JavaScript创徏的函数名Q注意不要写成FunctionName()Q当然我们也可以直接JavaScript代码创徏在onreadystatechange之后Q例如：
xmlhttp_request.onreadystatechange = function(){
// JavaScript代码D?br />
};
首先要检查请求的状态。只有当一个完整的服务器响应已l收CQ函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来Ҏ务器响应q行判断?br />
readyState的取值如下：
0 (未初始化)
1 (正在装蝲)
2 (装蝲完毕)
3 (交互?
4 (完成)
所以只有当readyState=4Ӟ一个完整的服务器响应已l收CQ函数才可以处理该响应。具体代码如下：
if (http_request.readyState == 4) { // 收到完整的服务器响应 }
else { // 没有收到完整的服务器响应 }
当readyState=4Ӟ一个完整的服务器响应已l收CQ接着Q函C查HTTP服务器响应的状态倹{完整的状态取值可参见W3C文档。当HTTP服务器响应的gؓ200Ӟ表示状态正常?br />
在检查完h的状态值和响应的HTTP状态值后Q就可以处理从服务器得到的数据了。有两种方式可以得到q些数据Q?br />
(1) 以文本字W串的方式返回服务器的响?br />
(2) 以XMLDocument对象方式q回响应
实例一Q?用文本字W串的方式返回服务器的响应来验证|易通行证帐h否存?br />
首先Q我们登陆网易通行证注册页面，可以看到用户名是否存在是将用户名提交给checkssn.jsp面q行判断Q格式ؓQ?br />
reg.163.com/register/checkssn.jsp?username=用户?
Ҏ上面讲到的方法，我们可以利用AJAX技术对|易通行证用户名q行：
W一步：新徏一个基于Xhtml标准的网，在区域插入Javascript函数如下Q?br />
function getXMLRequester( )
{ var xmlhttp_request = false;
try
{ if( window.ActiveXObject )
{ for( var i = 5; i; i-- ){
try{
if( i == 2 )
{ xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" ); }
else
{ xmlhttp_request = new ActiveXObject
( "Msxml2.XMLHTTP." + i + ".0" );
xmlhttp_request.setRequestHeader("Content-Type","text/xml");
xmlhttp_request.setRequestHeader("Content-Type","gb2312"); }
break;}
catch(e){ xmlhttp_request = false; } } }
else if( window.XMLHttpRequest )
{ xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType)
{ xmlhttp_request.overrideMimeType('text/xml'); } } }
catch(e){ xmlhttp_request = false; }
return xmlhttp_request ; }
function IDRequest(n) { //定义收到服务器的响应后需要执行的JavaScript函数
url=n+document.getElementById('163id').value;//定义|址参数
xmlhttp_request=getXMLRequester();//调用创徏XMLHttpRequest的函?br />
xmlhttp_request.onreadystatechange = doContents;//调用doContents函数
xmlhttp_request.open('GET', url, true);
xmlhttp_request.send(null); }
function doContents()
{ if (xmlhttp_request.readyState == 4) {// 收到完整的服务器响应
if (xmlhttp_request.status == 200) {//HTTP服务器响应的值OK
document.getElementById('message').innerHTML = xmlhttp_request.responseText;
//服务器q回的字W串写到面中ID为message的区?}
else { alert(http_request.status); } } }
在区域徏立一个文本框Qid?63idQ再Z个id为messsge的空白区域用来显C回字W串(也可以通过Javascript函数截取一部分字符串显C?Q?
<input type=text id="163id">
<span id="message"></span>
q样Q一个基于AJAX技术的用户名检页面就做好了，不过q个面返回服务器响应生成面的所有字W串Q当然还可以对返回的字符串进行一些操作，便于应用C同的需要当中?br />
实例二： 以XMLDocument对象方式q回响应来验证金山通行证帐h否存?br />
在上面的例子中，当服务器对HTTPh的响应被收到后，我们会调用请求对象的reponseText属性。该属性包含了服务器返回响应文件的内容。现在我们以XMLDocument对象方式q回响应Q此时将不再需要reponseText属性而用responseXML属性?br />
首先登陆金山通行证注册页面，我们发现金山通行证用户名的检方式ؓQ?pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用户?q且q回XML数据:
isExistedUid -2
当resultgؓ-1时表C此用户名已被注册，当resultgؓ-2时表C此用户名尚未注册，因此通过对result值的判断可以知道用户名是否被注册?br />
对上例代码进行修改：
首先扑ֈ
document.getElementById('message').innerHTML = xmlhttp_request.responseText;
改ؓ:
var response = xmlhttp_request.responseXML.documentElement;
var result = response.getElementsByTagName('result')[0].firstChild.data;//q回result节点数据
if(result ==-2){
document.getElementById('message').innerHTML = "用户?+document.getElementById('163id').value+"未注册";}
else if(result ==-1){
document.getElementById('message').innerHTML = "对不?用户?+document.getElementById('163id').value+"已经注册";}
通过以上两个实例说明了AJAX的客L基础应用Q采用的是网易和金山现成的服务器端程序，当然Z开发合适自己页面的E序Q还需要对自己~写服务器端E序Q这设计到程序语a及数据库的操作，对于有一定程序基的读者一定不是很隄事情?br />
补充Q?/strong>
1.AjaxQ著名希腊史诗伊利亚特中英雄埃阿斯的名字?br />
2.AjaxQ荷兰著名球俱乐部阿贾克斯Q以培养青年球员而著Uͼq多ơ夺得欧z冠军杯?br />
微Y为我们提供的最好的入R工具。首先让我们来看一看它都有那些子命令，键入net /?回R如图6。?br />
~辑词条