最近互聯(lián)網(wǎng)上比較火熱的話題當(dāng)然是關(guān)于WEB2.0的應(yīng)用，其中AJAX又是WEB2.0的核心之一。AJAX是Asynchronous JavaScript and XML 的縮寫。它并不是一門新的語言或技術(shù)，它實際上是幾項技術(shù)按一定的方式組合在一在同共的協(xié)作中發(fā)揮各自的作用，它包括
　　
　　使用XHTML和CSS標(biāo)準(zhǔn)化呈現(xiàn)；
　　
　　使用DOM實現(xiàn)動態(tài)顯示和交互；
　　
　　使用XML和XSLT進行數(shù)據(jù)交換與處理；
　　
　　使用XMLHttpRequest進行異步數(shù)據(jù)讀取；
　　
　　最后用JavaScript綁定和處理所有數(shù)據(jù)；
　　
　　Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了?個中間層，使用戶操作與服務(wù)器響應(yīng)異步化。這樣把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利于客戶端閑置的處理能力來處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，從而達(dá)到節(jié)約ISP的空間及帶寬租用成本的目的。
　　
　　我們以兩個驗證通行證帳號是否存在的例子來講述AJAX在實際中的應(yīng)用：
　　
　　(1)　　用文本字符串的方式返回服務(wù)器的響應(yīng)來驗證網(wǎng)易通行證帳號是否存在；
　　
　　(2)　　以XMLDocument對象方式返回響應(yīng)來驗證金山通行證帳號是否存在；
　　
　　首先，我們需要用JavaScript來創(chuàng)建XMLHttpRequest 類向服務(wù)器發(fā)送一個HTTP請求， XMLHttpRequest 類首先由Internet Explorer以ActiveX對象引入，被稱為XMLHTTP。 后來Mozilla?Netscape?Safari 和其他瀏覽器也提供了XMLHttpRequest類，不過它們創(chuàng)建XMLHttpRequest類的方法不同。
　　
　　對于Internet Explorer瀏覽器，創(chuàng)建XMLHttpRequest 方法如下：
　　
　　xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
　　xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
　　xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
　　
　　由于在不同Internet Explorer瀏覽器中XMLHTTP版本可能不一致，為了更好的兼容不同版本的Internet Explorer瀏覽器，因此我們需要根據(jù)不同版本的Internet Explorer瀏覽器來創(chuàng)建XMLHttpRequest類，上面代碼就是根據(jù)不同的Internet Explorer瀏覽器創(chuàng)建XMLHttpRequest類的方法。
　　
　　對于Mozilla?Netscape?Safari等瀏覽器，創(chuàng)建XMLHttpRequest 方法如下：
　　
　　xmlhttp_request = new XMLHttpRequest();
　　
　　如果服務(wù)器的響應(yīng)沒有XML mime-type header，某些Mozilla瀏覽器可能無法正常工作。 為了解決這個問題，如果服務(wù)器響應(yīng)的header不是text/xml，可以調(diào)用其它方法修改該header。
　　
　　xmlhttp_request = new XMLHttpRequest();
　　xmlhttp_request.overrideMimeType('text/xml');
　　
　　在實際應(yīng)用中，為了兼容多種不同版本的瀏覽器，一般將創(chuàng)建XMLHttpRequest類的方法寫成如下形式：
　　
　　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;
　　}
　　
　　在定義了如何處理響應(yīng)后，就要發(fā)送請求了。可以調(diào)用HTTP請求類的open()和send()方法，如下所示：
　　
　　xmlhttp_request.open('GET', URL, true);
　　xmlhttp_request.send(null);
　　
　　open()的第一個參數(shù)是HTTP請求方式?GET，POST或任何服務(wù)器所支持的您想調(diào)用的方式。 按照HTTP規(guī)范，該參數(shù)要大寫；否則，某些瀏覽器(如Firefox)可能無法處理請求。
　　
　　第二個參數(shù)是請求頁面的URL。
　　
　　第三個參數(shù)設(shè)置請求是否為異步模式。如果是TRUE，JavaScript函數(shù)將繼續(xù)執(zhí)行，而不等待服務(wù)器響應(yīng)。這就是"AJAX"中的"A"。
　　
　　用JavaScript來創(chuàng)建XMLHttpRequest 類向服務(wù)器發(fā)送一個HTTP請求后，接下來要決定當(dāng)收到服務(wù)器的響應(yīng)后，需要做什么。這需要告訴HTTP請求對象用哪一個JavaScript函數(shù)處理這個響應(yīng)。可以將對象的onreadystatechange屬性設(shè)置為要使用的JavaScript的函數(shù)名，如下所示：
　　
　　xmlhttp_request.onreadystatechange =FunctionName;
　　
　　FunctionName是用JavaScript創(chuàng)建的函數(shù)名，注意不要寫成FunctionName()，當(dāng)然我們也可以直接將JavaScript代碼創(chuàng)建在onreadystatechange之后，例如：
　　
　　xmlhttp_request.onreadystatechange = function(){
　　// JavaScript代碼段
　　};
　　
　　在這個函數(shù)中。首先要檢查請求的狀態(tài)。只有當(dāng)一個完整的服務(wù)器響應(yīng)已經(jīng)收到了，函數(shù)才可以處理該響應(yīng)。XMLHttpRequest 提供了readyState屬性來對服務(wù)器響應(yīng)進行判斷。
　　
　　readyState的取值如下：
　　0 (未初始化)
　　1 (正在裝載)
　　2 (裝載完畢)
　　3 (交互中)
　　4 (完成)
　　
　　所以只有當(dāng)readyState=4時，一個完整的服務(wù)器響應(yīng)已經(jīng)收到了，函數(shù)才可以處理該響應(yīng)。具體代碼如下：
　　
　　if (http_request.readyState == 4) {
　　// 收到完整的服務(wù)器響應(yīng)
　　} else {
　　// 沒有收到完整的服務(wù)器響應(yīng)
　　}
　　
　　當(dāng)readyState=4時，一個完整的服務(wù)器響應(yīng)已經(jīng)收到了，接著，函數(shù)會檢查HTTP服務(wù)器響應(yīng)的狀態(tài)值。完整的狀態(tài)取值可參見W3C文檔。當(dāng)HTTP服務(wù)器響應(yīng)的值為200時，表示狀態(tài)正常。
　　
　　在檢查完請求的狀態(tài)值和響應(yīng)的HTTP狀態(tài)值后，就可以處理從服務(wù)器得到的數(shù)據(jù)了。有兩種方式可以得到這些數(shù)據(jù)：
　　
　　(1)　　以文本字符串的方式返回服務(wù)器的響應(yīng)
　　
　　(2)　　以XMLDocument對象方式返回響應(yīng)
　　
　　實例一： 用文本字符串的方式返回服務(wù)器的響應(yīng)來驗證網(wǎng)易通行證帳號是否存在
　　
　　首先，我們登陸網(wǎng)易通行證注冊頁面，可以看到檢測用戶名是否存在是將用戶名提交給checkssn.jsp頁面進行判斷，格式為：
　　
　　reg.163.com/register/checkssn.jsp?username=用戶名
　　
　　根據(jù)上面講到的方法，我們可以利用AJAX技術(shù)對網(wǎng)易通行證用戶名進行檢測：
　　
　　第一步：新建一個基于Xhtml標(biāo)準(zhǔn)的網(wǎng)頁，在<head>區(qū)域插入Javascript函數(shù)如下：
　　
　　<script type="text/javascript" language="javascript">
　　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) {//定義收到服務(wù)器的響應(yīng)后需要執(zhí)行的JavaScript函數(shù)
　　url=n+document.getElementById('163id').value;//定義網(wǎng)址參數(shù)
　　xmlhttp_request=getXMLRequester();//調(diào)用創(chuàng)建XMLHttpRequest的函數(shù)
　　xmlhttp_request.onreadystatechange = doContents;//調(diào)用doContents函數(shù)
　　xmlhttp_request.open('GET', url, true);
　　xmlhttp_request.send(null);
　　}
　　function doContents() {
　　if (xmlhttp_request.readyState == 4) {// 收到完整的服務(wù)器響應(yīng)
　　if (xmlhttp_request.status == 200) {//HTTP服務(wù)器響應(yīng)的值OK
　　document.getElementById('message').innerHTML = xmlhttp_request.responseText;
　　//將服務(wù)器返回的字符串寫到頁面中ID為message的區(qū)域
　　} else {
　　alert(http_request.status);
　　}
　　}
　　}
　　</script>
　　
　　在<body>區(qū)域建立一個文本框，id為163id
　　
　　<input type="text" id="163id" onpropertychange="IDRequest('http://reg.163.com/register/checkssn.jsp?username=')" />
　　
　　再建一個id為messsge的空白區(qū)域用來顯示返回字符串(也可以通過Javascript函數(shù)截取一部分字符串顯示)：
　　
　　<div id="message"></div>
　　
　　這樣，一個基于AJAX技術(shù)的用戶名檢測頁面就做好了，不過這個頁面將返回服務(wù)器響應(yīng)生成頁面的所有字符串，當(dāng)然還可以對返回的字符串進行一些操作，便于應(yīng)用到不同的需要當(dāng)中。
　　
　　實例二： 以XMLDocument對象方式返回響應(yīng)來驗證金山通行證帳號是否存在
　　
　　在上面的例子中，當(dāng)服務(wù)器對HTTP請求的響應(yīng)被收到后，我們會調(diào)用請求對象的reponseText屬性。該屬性包含了服務(wù)器返回響應(yīng)文件的內(nèi)容。現(xiàn)在我們以XMLDocument對象方式返回響應(yīng)，此時將不再需要reponseText屬性而使用responseXML屬性。
　　
　　首先登陸金山通行證注冊頁面，我們發(fā)現(xiàn)金山通行證用戶名的檢測方式為：
　　pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用戶名,并且返回XML數(shù)據(jù):
　　
　　<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
　　<response>
　　<method>isExistedUid</method>
　　<result>-2</result>
　　</response>
　　
　　當(dāng)result值為-1時表示此用戶名已被注冊，當(dāng)result值為-2時表示此用戶名尚未注冊，因此通過對result值的判斷可以知道用戶名是否被注冊。
　　
　　對上例代碼進行修改：
　　
　　首先找到
　　
　　document.getElementById('message').innerHTML = xmlhttp_request.responseText;
　　
　　改為:
　　
　　var response = xmlhttp_request.responseXML.documentElement;
　　var result = response.getElementsByTagName('result')[0].firstChild.data;//返回result節(jié)點數(shù)據(jù)
　　if(result ==-2){
　　document.getElementById('message').innerHTML = "用戶名"+document.getElementById('163id').value+"尚未注冊";
　　}
　　else if(result ==-1){
　　document.getElementById('message').innerHTML = "對不起,用戶名"+document.getElementById('163id').value+"已經(jīng)注冊";
　　}
　　
　　通過以上兩個實例說明了AJAX的客戶端基礎(chǔ)應(yīng)用，采用的是網(wǎng)易和金山現(xiàn)成的服務(wù)器端程序，當(dāng)然為了開發(fā)合適自己頁面的程序，還需要對自己編寫服務(wù)器端程序，這設(shè)計到程序語言及數(shù)據(jù)庫的操作，對于有一定程序基礎(chǔ)的讀者一定不是很難的事情，本文著重討論了客戶端AJAX的應(yīng)用體驗，廣大讀者可以根據(jù)本文講的原理結(jié)合各種樣式表現(xiàn)手法作出絢麗多彩的應(yīng)用，希望本文能夠起到拋磚引玉的作用。

總結(jié)

以上是生活随笔為你收集整理的WEB 2.0中AJAX应用的详细探讨的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。