AJAX學習手記

下午一直在看jQuery，其中有一部分是對ajax的封裝。其實以前也有用過阿賈克斯，只是說都是臨時要用採取網上找代碼的。但是一直以來都覺得
蠻簡單的，所以也沒有在意。下午看得時候，發現其實我對AJAX不是很瞭解，只是印象中有那麼個東西，所以下午剛好有空，就順帶看了一下具體內容。下午看
得主要資料還是w3school網站上的教程（http://www.w3school.com.cn/ajax/index.asp），發現我現在越來
越喜歡這個網站了，其實他對內容的整理，條理還是很清晰的，而且例子也做得很好。

***********************************************************************************************************************************************

1、ajax簡介

       AJAX 指非同步 JavaScript 及 XML（Asynchronous JavaScript And XML）。
       AJAX 是一種在 2005 年由 Google 推廣開來的編程模式。他不是一種新的程式設計語言，而是一種使用現有標準的新方法。通過 AJAX，你可以建立更好、更快以及更友好的 WEB 應用程式。
       AJAX 基於 JavaScript 和 HTTP 要求（HTTP requests）。
        通過 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 對象來直接與伺服器進行通訊。通過這個對象，您的 JavaScript 可在不重載頁面的情況與 Web 服務器交換資料。
         AJAX 在瀏覽器與 Web 服務器之間使用非同步資料轉送（HTTP 要求），這樣就可使網頁從伺服器請求少量的資訊，而不是整個頁面。AJAX 可使網際網路應用程式更小、更快，更友好。AJAX 是一種獨立於 Web 服務器軟體的瀏覽器技術。

          AJAX 基於下列 Web 標準：JavaScript XML HTML CSS。在 AJAX 中使用的 Web 標準已被良好定義，並被所有的主流瀏覽器支援。AJAX 應用程式獨立於瀏覽器和平台。

2、ajax基本對象

 AJAX 使用 Http 請求

        在傳統的 JavaScript 編程中，假如您希望從伺服器上的檔案或資料庫中得到任何的資訊，或者向伺服器發送資訊的話，就必須利用一個
HTML 表單向伺服器 GET 或 POST 資料。而使用者則需要單擊“提交”按鈕來發送/擷取資訊，等待伺服器的響應，然後一張新的頁面會載入結果。

        由於每當使用者提交輸入後伺服器都會返回一張新的頁面，傳統的 web 應用程式變得運行緩慢，且越來越不友好。通過利用 AJAX，您的 JavaScript 會通過 JavaScript 的 XMLHttpRequest
對象，直接與伺服器來通訊。

        通過使用 HTTP 要求，web 頁可向伺服器進行請求，並得到來自伺服器的響應，而不載入頁面。使用者可以停留在同一個頁面，他或她不會注意到指令碼在後台請求過頁面，或向伺服器發送過資料。

XMLHttpRequest 對象

           通過使用 XMLHttpRequest 對象，web 開發人員可以做到在頁面已載入後從伺服器更新頁面！

           在 2005 年 AJAX 被 Google 推廣開來（Google Suggest）。

          Google 建議
使用 XMLHttpRequest 對象來建立一種動態性極強的 web 介面：當您開始在 Google 的搜尋方塊中輸入查詢時，JavaScript 會向某個伺服器發出這些字詞，然後伺服器會返回一系列的搜尋建議。

         XMLHttpRequest 對象得到下列瀏覽器的支援：Internet Explorer 5.0+、Safari 1.2、Mozilla 1.0 / Firefox、Opera 8+ 以及 Netscape 7。

3、ajax應用過程

1） AJAX 的要點是 XMLHttpRequest 對象。
不同的瀏覽器建立 XMLHttpRequest 對象的方法是有差異的。
IE 瀏覽器使用 ActiveXObject，而其他的瀏覽器使用名為 XMLHttpRequest 的 JavaScript 內建對象。
如需針對不同的瀏覽器來建立此對象，我們要使用一條 "try and catch" 語句。您可以在我們的 JavaScript 教程中閱讀更多有關 try 和 catch 語句 的內容。

一下是建立XMLHttpRequest的代碼：

2） XMLHttpRequest 對象的知識

在向伺服器發送資料之前，我們有必要解釋一下 XMLHttpRequest 對象的三個重要的屬性。

onreadystatechange 屬性

onreadystatechange 屬性存有處理伺服器響應的函數。下面的代碼定義一個空的函數，可同時對 onreadystatechange 屬性進行設定：

readyState 屬性

readyState 屬性存有伺服器響應的狀態資訊。每當 readyState 改變時，onreadystatechange 函數就會被執行。
這是 readyState 屬性可能的值：

0	請求未初始化（在調用 open() 之前）
1	請求已提出（調用 send() 之前）
2	請求已發送（這裡通常可以從響應得到內容標題部）
3	請求處理中（響應中通常有部分資料可用，但是伺服器還沒有完成響應）
4	請求已完成（可以訪問伺服器響應並使用它）

我們要向這個 onreadystatechange 函數添加一條 If 語句，來測試我們的響應是否已完成（意味著可獲得資料）：

responseText 屬性

可以通過 responseText 屬性來取回由伺服器返回的資料。
在我們的代碼中，我們將把時間文字框的值設定為等於 responseText：

向伺服器發送一個請求

要想把請求發送到伺服器，我們就需要使用 open() 方法和 send() 方法。
open() 方法需要三個參數。第一個參數定義發送請求所使用的方法（GET 還是 POST）。第二個參數規定伺服器端指令碼的 URL。第三個參數規定應當對請求進行非同步地處理。
send() 方法可將請求送往伺服器。如果我們假設 HTML 檔案和 ASP 檔案位於相同的目錄，那麼代碼是這樣的：

4、例子

頁面

表單的 HTML 程式碼：

howHint() 函數是一個位於 HTML 頁面 head 部分的很簡單的 JavaScript 函數。