AJAX學習手記

來源:互聯網
上載者:User

下午一直在看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 函數。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.