天天看點

Ajax 異步加載

AJAX (Asynchronous JavaScript and XML,異步的 JavaScript 和 XML)。它不是新的程式設計語言,而是一種使用現有标準的新方法,是在不重新加載整個頁面的情況下與伺服器交換資料并更新部分網頁的藝術。

那麼,讓我們一起走進AJax的世界吧。

<a href="#%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95">基礎文法</a>

<a href="#%E8%8E%B7%E5%8F%96ajax%E5%AF%B9%E8%B1%A1">擷取Ajax對象</a>

<a href="#%E8%AE%BE%E7%BD%AE%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0">設定回調函數</a>

<a href="#readystate">readystate</a>

<a href="#status">status</a>

<a href="#%E5%BC%80%E5%90%AF%E4%BA%A4%E4%BA%92">開啟互動</a>

<a href="#%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%9B%B4%E6%96%B0%E9%A1%B5%E9%9D%A2">用戶端更新頁面</a>

<a href="#%E5%AE%9E%E4%BE%8B%E4%BD%93%E9%AA%8C">執行個體體驗</a>

<a href="#%E4%BD%BF%E7%94%A8servlet%E6%96%B9%E5%BC%8F">使用Servlet方式</a>

<a href="#ajaxservletjava">AjaxServletjava</a>

<a href="#webxml">webxml</a>

<a href="#ajaxhtml">ajaxhtml</a>

<a href="#%E5%AE%9E%E9%AA%8C%E7%BB%93%E6%9E%9C">實驗結果</a>

<a href="#%E4%BD%BF%E7%94%A8jsp%E6%96%B9%E5%BC%8F">使用JSP方式</a>

<a href="#receiveparamsjsp">receiveParamsjsp</a>

<a href="#ajaxhtml-1">ajaxhtml</a>

<a href="#jquery-%E4%B8%AD%E7%9A%84ajax">JQuery 中的Ajax</a>

<a href="#%E6%80%BB%E7%BB%93">總結</a>

學習Ajax之前,我們要明确自己的需求,那就是在不重新整理頁面的前提下實作異步的與伺服器進行互動,更新頁面資訊。使用Ajax其實也是很簡單的,我們隻需要遵循一定的步驟即可。

建立Ajax對象(原生的需要判斷目前浏覽器的類型)

設定回調函數 (完成與伺服器的互動之後所觸發的函數)

打開請求,并發送。(根據請求方式的不同,代碼書寫稍有不同)

用戶端獲得回報資料,更新頁面

不同的浏覽器對Ajax的支援是不一緻的,是以我們要差別的對待。

浏覽器名稱

IE5,IE6

Chrome,Firefox,Opera,Safari

擷取Ajax方式

new ActiveXObject(“Microsoft.XMLHTTP”);

new XMLHttpRequest();

設定回調函數的目的就是在Ajax完成與伺服器的互動之後,将擷取到的資料資訊,添加到頁面上。

通常我們會指定onreadystatechange函數作為我們的回調處理函數。

相關于Ajax與伺服器互動有如下狀态資訊供我們在編碼的過程找中參考。

關于加載狀态有如下幾個常用的數值:

0: 請求未初始化

1: 伺服器連接配接已建立

2: 請求已接收

3: 請求進行中

4: 請求已完成,且響應已就緒

加載結果的狀态資訊有:

200: “OK”

404: “未找到此頁面”

一談起互動,映入腦海的就是雙方。也就是我們的ajax用戶端和伺服器之間的互動。是以我們需要明确請求資料在伺服器上的位置

open(method,url,async)

url的使用會根據method的不同而不同,這一點我們務必要清楚。至于asynchronous這個參數,一般來說對于資料量很小的請求可以采用false,但是建議使用true來進行異步的加載,來避免伺服器壓力過大。

GET方式

隻是用這種方式很簡單,指定url在伺服器上的位置即可。這裡紅色部分的了解相當的重要。我們務必指定url為請求在伺服器上的位置,一般采用絕對路徑的方式。

POST方式

使用POST方式的時候,我們需要額外的多一項處理。如下例:

對于Ajax來說,顧名思義。是采用xml形式來傳輸資料的。但是目前而言,這不再是唯一的一種形式了。那麼我們怎麼将擷取到的資料更新到網頁上呢?有如下兩種方式。

如果來自伺服器的響應并非 XML,請使用 responseText 屬性。

如果來自伺服器的響應是 XML,而且需要作為 XML 對象進行解析,請使用 responseXML 屬性:

了解了這些基礎文法之後,我們就可以在實際的開發中簡單的應用了。為了更好的完成此次實驗,我先做了一個簡單的JavaWeb,來處理我們的Ajax請求。

長度小于6時:

Ajax 異步加載

長度大于等于6:

Ajax 異步加載

效果一緻。

前面介紹的是原生的Ajax實作方式,我們需要做的工作還是很多的,而JQuery幫助我們完成了平台無關性的工作,我們隻需要專注于業務邏輯的開發即可。直接用jquery的.post或者.get或者.ajax方法,更友善更簡單,js代碼如下:

<code>.POST方式</code>

<code>.ajax方式</code>

<code>.get方式</code>

今天的示範對于實際開發的過程中,伺服器端的使用者輸入資料驗證,或者即時更新頁面而又減少網絡流量是非常的有必要的。而且用處也很廣泛,還能有效的提升使用者體驗。

這次的案例,就當是抛磚引玉,給你的應用也添加上異步加載吧。