ajax
|
AJAX全稱爲“Asynchronous JavaScript and XML”（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。
主要包含了以下幾種技術： Ajax（Asynchronous JavaScript + XML）的定義 基於web標準（standards-based presentation）XHTML+CSS的表示； 使用 DOM（Document Object Model）進行動態顯示及交互； 使用 XML 和 XSLT 進行數據交換及相關操作； 使用 XMLHttpRequest 進行異步數據查詢、檢索； 使用 JavaScript 將所有的東西綁定在一起。英文參見Ajax的提出者Jesse James Garrett的原文a 類似於DHTML或LAMP，AJAX不是指一種單一的技術，而是有機地利用了一系列相關的技術。事實上，一些基於AJAX的“派生/合成”式（derivative/composite）的技術正在出現，如“AFLAX”。 AJAX的應用使用支持以上技術的web瀏覽器作爲運行平臺。這些瀏覽器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式對象，也不支持XSLT。 與傳統的web應用比較 傳統的web應用允許用戶填寫表單(form)，當提交表單時就向web服務器發送一個請求。服務器接收並處理傳來的表單，然後返回一個新的網頁。這個做法浪費了許多帶寬，因爲在前後兩個頁面中的大部分HTML代碼往往是相同的。由於每次應用的交互都需要向服務器發送請求，應用的響應時間就依賴於服務器的響應時間。這導致了用戶界面的響應比本地應用慢得多。 與此不同，AJAX應用可以僅向服務器發送並取回必需的數據，它使用SOAP或其它一些基於XML的web service接口，並在客戶端採用JavaScript處理來自服務器的響應。因爲在服務器和瀏覽器之間交換的數據大量減少，結果我們就能看到響應更快的應用。同時很多的處理工作可以在發出請求的客戶端機器上完成，所以Web服務器的處理時間也減少了。 Ajax應用程序的優勢在於： 1. 通過異步模式，提升了用戶體驗 2. 優化了瀏覽器和服務器之間的傳輸，減少不必要的數據往返，減少了帶寬佔用 3. Ajax引擎在客戶端運行，承擔了一部分本來由服務器承擔的工作，從而減少了大用戶量下的服務器負載。 Ajax的工作原理 Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入，它是一種支持異步請求的技術。簡而言之，XmlHttpRequest使您可以使用JavaScript向服務器提出請求並處理響應，而不阻塞用戶。 在創建Web站點時，在客戶端執行屏幕更新爲用戶提供了很大的靈活性。下面是使用Ajax可以完成的功能： 動態更新購物車的物品總數，無需用戶單擊Update並等待服務器重新發送整個頁面。 提升站點的性能，這是通過減少從服務器下載的數據量而實現的。例如，在某購物車頁面，當更新籃子中的一項物品的數量時，會重新載入整個頁面，這必須下載整個頁面的數據。如果使用Ajax計算新的總量，服務器只會返回新的總量值，因此所需的帶寬僅爲原來的百分之一。 消除了每次用戶輸入時的頁面刷新。例如，在Ajax中，如果用戶在分頁列表上單擊Next，則服務器數據只刷新列表而不是整個頁面。 直接編輯表格數據，而不是要求用戶導航到新的頁面來編輯數據。對於Ajax，當用戶單擊Edit時，可以將靜態表格刷新爲內容可編輯的表格。用戶單擊Done之後，就可以發出一個Ajax請求來更新服務器，並刷新表格，使其包含靜態、只讀的數據。 一切皆有可能！但願它能夠激發您開始開發自己的基於Ajax的站點。然而，在開始之前，讓我們介紹一個現有的Web站點，它遵循傳統的提交/等待/重新顯示的範例，我們還將討論Ajax如何提升用戶體驗。 Ajax的工作原理相當於在用戶和服務器之間加了—箇中間層，使用戶操作與服務器響應異步化。這樣把以前的一些服務器負擔的工作轉嫁到客戶端，利於客戶端閒置的處理能力來處理，減輕服務器和帶寬的負擔，從而達到節約ISP的空間及帶寬租用成本的目的。 我們以兩個驗證通行證帳號是否存在的例子來講述AJAX在實際中的應用： (1)用文本字符串的方式返回服務器的響應來驗證網易通行證帳號是否存在； (2)以XMLDocument對象方式返回響應來驗證金山通行證帳號是否存在； 首先，我們需要用JavaScript來創建XMLHttpRequest 類向服務器發送一個HTTP請求， XMLHttpRequest 類首先由Internet Explorer以ActiveX對象引入，被稱爲XMLHTTP。 後來Mozilla﹑Netscape﹑Safari 和其他瀏覽器也提供了XMLHttpRequest類，不過它們創建XMLHttpRequest類的方法不同。 對於Internet Explorer瀏覽器，創建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瀏覽器，因此我們需要根據不同版本的Internet Explorer瀏覽器來創建XMLHttpRequest類，上面代碼就是根據不同的Internet Explorer瀏覽器創建XMLHttpRequest類的方法。 對於Mozilla﹑Netscape﹑Safari等瀏覽器，創建XMLHttpRequest 方法如下：xmlhttp_request = new XMLHttpRequest(); 如果服務器的響應沒有XML mime-type header，某些Mozilla瀏覽器可能無法正常工作。 爲了解決這個問題，如果服務器響應的header不是text/xml，可以調用其它方法修改該header。 xmlhttp_request = new XMLHttpRequest(); xmlhttp_request.overrideMimeType('text/xml'); 在實際應用中，爲了兼容多種不同版本的瀏覽器，一般將創建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; } 在定義瞭如何處理響應後，就要發送請求了。可以調用HTTP請求類的open()和send()方法，如下所示： xmlhttp_request.open('GET', URL, true); xmlhttp_request.send(null); open()的第一個參數是HTTP請求方式—GET，POST或任何服務器所支持的您想調用的方式。 按照HTTP規範，該參數要大寫；否則，某些瀏覽器(如Firefox)可能無法處理請求。 第二個參數是請求頁面的URL。 第三個參數設置請求是否爲異步模式。如果是TRUE，JavaScript函數將繼續執行，而不等待服務器響應。這就是"AJAX"中的"A"。 用JavaScript來創建XMLHttpRequest 類向服務器發送一個HTTP請求後，接下來要決定當收到服務器的響應後，需要做什麼。這需要告訴HTTP請求對象用哪一個JavaScript函數處理這個響應。可以將對象的onreadystatechange屬性設置爲要使用的JavaScript的函數名，如下所示：xmlhttp_request.onreadystatechange =FunctionName; FunctionName是用JavaScript創建的函數名，注意不要寫成FunctionName()，當然我們也可以直接將JavaScript代碼創建在onreadystatechange之後，例如：xmlhttp_request.onreadystatechange = function(){ // JavaScript代碼段 }; 在這個函數中。首先要檢查請求的狀態。只有當一個完整的服務器響應已經收到了，函數纔可以處理該響應。XMLHttpRequest 提供了readyState屬性來對服務器響應進行判斷。 readyState的取值如下： 0 (未初始化) 1 (正在裝載) 2 (裝載完畢) 3 (交互中) 4 (完成) 所以只有當readyState=4時，一個完整的服務器響應已經收到了，函數纔可以處理該響應。具體代碼如下： if (http_request.readyState == 4) { // 收到完整的服務器響應 } else { // 沒有收到完整的服務器響應 }當readyState=4時，一個完整的服務器響應已經收到了，接着，函數會檢查HTTP服務器響應的狀態值。完整的狀態取值可參見W3C文檔。當HTTP服務器響應的值爲200時，表示狀態正常。 在檢查完請求的狀態值和響應的HTTP狀態值後，就可以處理從服務器得到的數據了。有兩種方式可以得到這些數據：(1) 以文本字符串的方式返回服務器的響應 (2) 以XMLDocument對象方式返回響應 實例一： 用文本字符串的方式返回服務器的響應來驗證網易通行證帳號是否存在 首先，我們登陸網易通行證註冊頁面，可以看到檢測用戶名是否存在是將用戶名提交給checkssn.jsp頁面進行判斷，格式爲： reg.163.com/register/checkssn.jsp?username=用戶名 根據上面講到的方法，我們可以利用AJAX技術對網易通行證用戶名進行檢測： 第一步：新建一個基於Xhtml標準的網頁，在區域插入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) {//定義收到服務器的響應後需要執行的JavaScript函數 url=n+document.getElementById('163id').value; //定義網址參數 xmlhttp_request=getXMLRequester(); //調用創建XMLHttpRequest的函數 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; //將服務器返回的字符串寫到頁面中ID爲message的區域 } else { alert(http_request.status); } } } 在區域建立一個文本框，id爲163id 再建一個id爲messsge的空白區域用來顯示返回字符串(也可以通過Javascript函數截取一部分字符串顯示)： 這樣，一個基於AJAX技術的用戶名檢測頁面就做好了，不過這個頁面將返回服務器響應生成頁面的所有字符串，當然還可以對返回的字符串進行一些操作，便於應用到不同的需要當中。 實例二： 以XMLDocument對象方式返回響應來驗證金山通行證帳號是否存在 在上面的例子中，當服務器對HTTP請求的響應被收到後，我們會調用請求對象的reponseText屬性。該屬性包含了服務器返回響應文件的內容。現在我們以XMLDocument對象方式返回響應，此時將不再需要reponseText屬性而使用responseXML屬性。 首先登陸金山通行證註冊頁面，我們發現金山通行證用戶名的檢測方式爲： pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用戶名,並且返回XML數據: isExistedUid -2 當result值爲-1時表示此用戶名已被註冊，當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節點數據 if(result ==-2){ document.getElementById('message').innerHTML = "用戶名"+document.getElementById('163id').value+"尚未註冊";} else if(result ==-1){ document.getElementById('message').innerHTML = "對不起,用戶名"+document.getElementById('163id').value+"已經註冊";} 通過以上兩個實例說明了AJAX的客戶端基礎應用，採用的是網易和金山現成的服務器端程序，當然爲了開發合適自己頁面的程序，還需要對自己編寫服務器端程序，這設計到程序語言及數據庫的操作，對於有一定程序基礎的讀者一定不是很難的事情。 |
