對學習Ajax的知識總結
1、對Ajax的初步認識
1.1、 Ajax 是一種網頁開發技術,(Asynchronous Javascript + XML)異步 JavaScript 和 XML;
1.2、Ajax 是異步交互,局部刷新;
1.3、Ajax 能減少服務器壓力;
1.4、Ajax 能提高用戶體驗;
2、Ajax交互和傳統交互的比較
傳統交互:網頁整體刷新,服務器壓力大,用戶體驗不好;
Ajax 交互:局部刷新,服務器壓力小,用戶體驗好;
3、Ajax核心知識
3.1 XMLHttpRequest對象的創建
所有現代瀏覽器均支持 XMLHttpRequest 對象(IE5
3.2、XMLHttpRequest對象請求後臺
open(method,url,async):規定請求的類型、URL 以及是否異步處理請求。
- method:請求的類型;GET 或 POST
- url:文件在服務器上的位置
- async:true(異步)或 false(同步)
send(string):將請求發送到服務器。string:僅用於 POST 請求。
GET 還是 POST?
與 POST 相比,GET 更簡單也更快,並且在大部分情況下都能用。
然而,在以下情況中,請使用 POST 請求:
- 無法使用緩存文件(更新服務器上的文件或數據庫)
- 向服務器發送大量數據(POST 沒有數據量限制)
- 發送包含未知字符的用戶輸入時,POST 比 GET 更穩定也更可靠
setRequestHeader(header,value):向請求添加 HTTP 頭。
- header: 規定頭的名稱
- value: 規定頭的值
異步 - True 或 False?
AJAX 指的是異步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
為 True 的話,表示的是異步,異步表示程序請求服務器的同時,程序可以繼續執行;能提高系統的運行效率;
為 False 的話,表示同步,JavaScript 會等到服務器響應就緒才繼續執行。如果服務器繁忙或緩慢,應用程序會掛起或停止。我們一般都是用 True;
3.3、XMLHttpRequest對象響應服務器
onreadystatechange 事件:當請求被發送到服務器時,我們需要執行一些基於響應的任務。
每當 readyState 改變時,就會觸發 onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態信息。下面是 XMLHttpRequest 對象的三個重要的屬性:
onreadystatechange存儲函數(或函數名),每當 readyState 屬性改變時,就會調用該函數。
readyState存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
- 0: 請求未初始化
- 1: 服務器連接已建立
- 2: 請求已接收
- 3: 請求處理中
- 4: 請求已完成,且響應已就緒
status
- 200: "OK"
- 404: 未找到頁面
在 onreadystatechange 事件中,我們規定當服務器響應已做好被處理的準備時所執行的任務。
如需獲得來自服務器的響應,需要使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
屬性 描述:
- responseText 獲得字符串形式的響應數據。
- responseXML 獲得 XML 形式的響應數據。
4、自己對Ajax局部數據交互流程的總結:
相比傳統的數據交互,Ajax的亮點後臺與服務器僅僅進行少量數據交換。換言之就是不重新加載整個網頁的情況下,對網頁的某部分進行更新。我們要實現這個功能的話,首先需要一個XMLHttpRequest的對象,這個對象是目前主流瀏覽器都會內置的一個對象,這個對象就是為了完成局部數據交換而存在的一個對象。為了兼容不同版本的瀏覽器,我們創建這個對象的時候,需要考慮到運行此程序的瀏覽器時候有這個對象。然後要把請求發送到後臺(XMLHttpRequest對象請求後臺)、後臺收到請求之後進行處理、經過處理的結果在返回到前臺進行展示(XMLHttpRequest對象響應服務器),大致就是一個這樣的過程,這期間一直持續維護的一個對象就是XMLHttpRequest對象,這樣就實現了一個完整的局部動態網頁更新的功能。
對學習Ajax的知識總結