AJAX 不是一種新的程式設計語言，而是一種用於建立更好更快以及互動性更強的 Web 應用程式的技術。
通過 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 對象來直接與伺服器進行通訊。通過這個對象，您的 JavaScript 可在不重載頁面的情況與 Web 服務器交換資料。
AJAX 在瀏覽器與 Web 服務器之間使用非同步資料轉送（HTTP 要求），這樣就可使網頁從伺服器請求少量的資訊，而不是整個頁面。
2.
在傳統的 JavaScript 編程中，假如您希望從伺服器上的檔案或資料庫中得到任何的資訊，或者向伺服器發送資訊的話，就必須利用一個 HTML 表單向伺服器 GET 或 POST 資料。而使用者則需要單擊“提交”按鈕來發送/擷取資訊，等待伺服器的響應，然後一張新的頁面會載入結果。
由於每當使用者提交輸入後伺服器都會返回一張新的頁面，傳統的 web 應用程式變得運行緩慢，且越來越不友好。
通過利用 AJAX，您的 JavaScript 會通過 JavaScript 的 XMLHttpRequest 對象，直接與伺服器來通訊。
通過使用 HTTP 要求，web 頁可向伺服器進行請求，並得到來自伺服器的響應，而不載入頁面。使用者可以停留在同一個頁面，他或她不會注意到指令碼在後台請求過頁面，或向伺服器發送過資料。
3.
AJAX - 瀏覽器支援AJAX 的要點是 XMLHttpRequest 對象。
不同的瀏覽器建立 XMLHttpRequest 對象的方法是有差異的。
IE 瀏覽器使用 ActiveXObject，而其他的瀏覽器使用名為 XMLHttpRequest 的 JavaScript 內建對象。
使用 XMLHttp=new XMLHttpRequest() 來建立此對象。這條語句針對 Firefox、Opera 以及 Safari 瀏覽器。假如失敗，則嘗試針對 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")，假如也不成功，則嘗試針對 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")。
假如這三種方法都不起作用，那麼這個使用者所使用的瀏覽器已經太過時了，他或她會看到一個聲明此瀏覽器不支援 AJAX 的提示。
4.AJAX - XMLHttpRequest 對象
AJAX - 更多有關 XMLHttpRequest 對象的知識
在向伺服器發送資料之前，我們有必要解釋一下 XMLHttpRequest 對象的三個重要的屬性。
onreadystatechange 屬性onreadystatechange 屬性存有處理伺服器響應的函數。下面的代碼定義一個空的函數，可同時對 onreadystatechange 屬性進行設定：
xmlHttp.onreadystatechange=function(){// 我們需要在這裡寫一些代碼}readyState 屬性存有伺服器響應的狀態資訊。每當 readyState 改變時，onreadystatechange 函數就會被執行。
這是 readyState 屬性可能的值：
| 狀態 | 描述 |
|---|---|
| 0 | 請求未初始化（在調用 open() 之前） |
| 1 | 請求已提出（調用 send() 之前） |
| 2 | 請求已發送（這裡通常可以從響應得到內容標題部） |
| 3 | 請求處理中（響應中通常有部分資料可用，但是伺服器還沒有完成響應） |
| 4 | 請求已完成（可以訪問伺服器響應並使用它） |
我們要向這個 onreadystatechange 函數添加一條 If 語句，來測試我們的響應是否已完成（意味著可獲得資料）：
xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4){// 從伺服器的response獲得資料}}responseText 屬性
可以通過 responseText 屬性來取回由伺服器返回的資料。
在我們的代碼中，我們將把時間文字框的值設定為等於 responseText：
xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4){document.myForm.time.value=xmlHttp.responseText;}}
5.一個完整的例子
AJAX HTML 頁面這是 HTML 頁面。它包含了一個簡單的 HTML 表單，以及一個指向 JavaScript 的連結。
<html><head><script src="clienthint.js"></script></head><body><form>First Name:<input type="text"id="txt1" onkeyup="showHint(this.value)"/></form><p>Suggestions: <spanid="txtHint"></span></p></body></html>
下面列出了 JavaScript 代碼。
AJAX JavaScript這是 JavaScript 代碼，儲存在檔案 "clienthint.js" 中：
var xmlHttpAJAX 伺服器頁面 - ASP 和 PHPfunction showHint(str){if (str.length==0){document.getElementById("txtHint").innerHTML="";return;}xmlHttp=GetXmlHttpObject()if (xmlHttp==null){alert ("您的瀏覽器不支援AJAX！");return;}var url="gethint.asp";url=url+"?q="+str;url=url+"&sid="+Math.random();xmlHttp.onreadystatechange=stateChanged;xmlHttp.open("GET",url,true);xmlHttp.send(null);}function stateChanged(){if (xmlHttp.readyState==4){document.getElementById("txtHint").innerHTML=xmlHttp.responseText;}}function GetXmlHttpObject(){var xmlHttp=null;try{// Firefox, Opera 8.0+, SafarixmlHttp=new XMLHttpRequest();}catch (e){// Internet Explorertry{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}catch (e){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}}return xmlHttp;}
其實不存在什麼“AJAX 伺服器”。AJAX 頁面可以由任一網際網路伺服器提供服務。
在上一節的例子中被 JavaScript 調用的伺服器頁面是一個簡單的名為 "gethint.asp" 的 ASP 檔案。
下面我們列出了這個伺服器頁面代碼的執行個體，使用 ASP 來編寫。
AJAX ASP 執行個體"gethint.asp" 頁面中的代碼針對 IIS 使用 VBScript 編寫。它會檢查一個名字數組，然後向用戶端返回相應的名字：
<%response.expires=-1dim a(30)'用名字為數組賦值a(1)="Anna"a(2)="Brittany"a(3)="Cinderella"a(4)="Diana"a(5)="Eva"a(6)="Fiona"a(7)="Gunda"a(8)="Hege"a(9)="Inga"a(10)="Johanna"a(11)="Kitty"a(12)="Linda"a(13)="Nina"a(14)="Ophelia"a(15)="Petunia"a(16)="Amanda"a(17)="Raquel"a(18)="Cindy"a(19)="Doris"a(20)="Eve"a(21)="Evita"a(22)="Sunniva"a(23)="Tove"a(24)="Unni"a(25)="Violet"a(26)="Liza"a(27)="Elizabeth"a(28)="Ellen"a(29)="Wenche"a(30)="Vicky"'從URL取得參數qq=ucase(request.querystring("q"))'如果q的長度大於0，則尋找所有的hintif len(q)>0 thenhint=""for i=1 to 30if q=ucase(mid(a(i),1,len(q))) thenif hint="" thenhint=a(i)elsehint=hint & " , " & a(i)end ifend ifnextend if'如果找不到hint，則輸出"no suggestion"'或者輸出正確的值if hint="" thenresponse.write("no suggestion")elseresponse.write(hint)end if%>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
