AJAX (Asynchronous JavaScript and XML,異步的 JavaScript 和 XML)。它不是新的編程語言,而是一種使用現有標準的新方法,是在不重新加載整個頁面的情況下與服務器交換數據并更新部分網頁的藝術。
那么,讓我們一起走進AJax的世界吧。
基礎語法
學習Ajax之前,我們要明確自己的需求,那就是在不刷新頁面的前提下實現異步的與服務器進行交互,更新頁面信息。使用Ajax其實也是很簡單的,我們只需要遵循一定的步驟即可。
•創建Ajax對象(原生的需要判斷當前瀏覽器的類型)
•設置回調函數 (完成與服務器的交互之后所觸發的函數)
•打開請求,并發送。(根據請求方式的不同,代碼書寫稍有不同)
•客戶端獲得反饋數據,更新頁面
獲取Ajax對象
不同的瀏覽器對Ajax的支持是不一致的,所以我們要區別的對待。
設置回調函數
設置回調函數的目的就是在Ajax完成與服務器的交互之后,將獲取到的數據信息,添加到頁面上。
通常我們會指定onreadystatechange函數作為我們的回調處理函數。
相關于Ajax與服務器交互有如下狀態信息供我們在編碼的過程找中參考。
.readystate
關于加載狀態有如下幾個常用的數值:
•0: 請求未初始化
•1: 服務器連接已建立
•2: 請求已接收
•3: 請求處理中
•4: 請求已完成,且響應已就緒
.status
加載結果的狀態信息有:
•200: “OK”
•404: “未找到此頁面”
開啟交互
一談起交互,映入腦海的就是雙方。也就是我們的ajax客戶端和服務器之間的交互。所以我們需要明確請求數據在服務器上的位置
open(method,url,async)
url的使用會根據method的不同而不同,這一點我們務必要清楚。至于asynchronous這個參數,一般來說對于數據量很小的請求可以采用false,但是建議使用true來進行異步的加載,來避免服務器壓力過大。
•GET方式
只是用這種方式很簡單,指定url在服務器上的位置即可。這里紅色部分的理解相當的重要。我們務必指定url為請求在服務器上的位置,一般采用絕對路徑的方式。
// 對Servlet來說指定其注解上的位置即可xmlhttp.open("GET","/Test/servlet/AjaxServlet?userinput="+str.value,true); xmlhttp.send();
•POST方式
使用POST方式的時候,我們需要額外的多一項處理。如下例:
新聞熱點
疑難解答
圖片精選