ajax必會知識

                       AJAX
1.什麼是AJAX(Asynchronous JavaScript and XML)?
允許瀏覽器和服務器通信而無需刷新頁面的技術都被叫做AJAX.(數據在客戶端和服務端通信,而不再需要刷新整個頁面)

2.XMLHttpRequest:該對象是對JavaScript的一個擴展,可使網頁與服務器進行通信,是創建AJAX應用的最佳選擇。實際上通常把AJAX當成XMLHttpRequest對象的代名詞。

3.AJAX工具包:
(1)服務器語言:需要具備向瀏覽器發送特定信息的能力,AJAX與服務器端語言無關。
(2)XML:AJAX需要某種格式化的格式來在服務器端和客戶端之間傳遞信息,XML是其中的一種選擇。
(3)XHTML和CSS:標準化呈現
(4)DOM實現動態顯示和交互
(5)使用XMLHttp組件的HttpRequest進行異步數據的讀取
(6)使用JavaScript綁定和處理所有數據


4.AJAX缺陷:兼容性、支持性差,對流媒體的支持沒有flash和Java Applet好,會導致回退功能失效。

5.利用XMLHttpRequest解析text文本數據:
①創建XMLHttpRequest對象。
②如果是超級鏈接應該在響應函數中return false,以取消默認行爲
③準備發送請求的數據:URL(通常在URL的後面加上一個時間戳以起到禁用瀏覽器緩存的作用)、method
④調用XMLHttpRequest的open()方法
⑤調用XMLHttpRequest的send()方法(get請求沒有請求體既:send(null))
⑥爲XMLHttpRequest對象添加onreadystatechange響應函數
⑦判斷響應是否完成:XMLHttpRequest對象的readystate屬性值爲4的時候響應完成
⑧判斷響應是否可用:XMLHttpRequest對象的status屬性值爲200的時候或者爲304的時候
⑨得到響應結果:Request.responseText

6.服務器端返回的狀態碼:200表示OK,304表示未修改,404表示不存在,500表示內部錯誤。

7.使用XMLHttpRequest解析HTML格式數據:
①步驟同解析text一樣,但是可以直接利用:標籤.innerHTML=Request.responseText的方式直接解析數據。
②提示:MyEclipse自帶的瀏覽器不能實現此效果,應該其他瀏覽器訪問。

8.使用XMLHttpRequest解析XML格式的數據:
(1)基本步驟同解析HTML
(2)不同點:
①結果爲XML格式,所以需要使用responseXML來獲取結果.eg:
var result=responseXML;
var name=result.getElementByTagName("name")[0].firstChild.nodeValue;(從XML文件中以DOM的方式獲取數據)
②同時用DOM的方式構建目標節點.eg:
var aNode=document.createElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href="mailto:"+email;
③結果不能行直接使用,必須先創建對應的節點,再把節點加入對應的HTML標籤中。
標籤.innerHTML="";(用於清空內容)
(2)優缺點:①XML是一種通用的數據格式
②不必數據強加到已定義好的格式中,而是要爲數據自定義合適的標記。
③利用DOM可以完全掌控文檔
④缺點:如果文檔來自於服務器就必須得保證文檔含有正確的首部信息,如果文檔的類型不正確,那麼responseXML的值將是空的,當瀏覽器收到較長的XML文檔時,DOM解析將會十分複雜。

9.利用XMLHttpRequest解析JSON(JavaScript Object Nation)格式的數據
(1)json是一種簡單的數據格式,是JavaScript的原生格式,所以不需要任何特殊的API或者工具包
(2)json的規則很簡單:對象是一個無序的"名稱/值"集合,一個對象以"{"開始,以"}"結束,每個"名稱"後跟一個":","名稱/值"對之間用","分隔。eg:
var jsonObject={
"name":"趙劉保",
"age":"22",
"address":{"city":"武漢","學校":"中南名族大學"},
"major":function(){…}
};
(3)如何把字符串轉化爲json對象?
使用eval(參數)方法就能將任何類型的格式轉化爲對象。
(4)優缺點:json與XML相似,但比XML更靈活,json不需要從服務器端發送含有特定內容類型的首部信息。
缺點:語法過於嚴格,代碼不易讀,eval()函數存在風險。

10.使用JQuery實現Ajax
(1)JQuery對Ajax操作進行了封裝,在JQuery中最頂層的方法是$.ajax(),第二層是load(),$.get()和$.post(),第三層是$.getscript()和$.getJSON()
(2)load()方法是JQuery中最簡單和最常用的方法,能載入遠程的HTML代碼,並插入到DOM中,它的結構是:load(URL[,Data][,callback]),如果只想返回HTML文檔的一部分可以使用選擇器。
(3)任何一個HTML節點都可以是load()方法將另一個HTML節點加進來作爲它的子節點。

11.實現三級聯動的效果

12.Ajax使用BlockUI
Ajax請求發出時執行$.blockUI,Ajax響應送達時執行$.unblockUI
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章