jQuery學習筆記(四)

jQuery AJAX

AJAX技術的優點不用多說,有優秀的用戶體驗、提高Web程序的性能、減輕服務器和帶寬的負擔。

AJAX的也存在幾項待完善的缺點:

(1)瀏覽器對XMLHttpRequest對象的支持度不足

AJAX的不足之處首先來自於瀏覽器。由於不同瀏覽器之間存在着差異,爲了能讓AJAX應用能在各個瀏覽器中正常運行,程序員必須花費大量精力來兼顧不同瀏覽器之間的差別。開發難度比普通Web開發高出很多。

(2)破壞瀏覽器前進、後退、按鈕的正常功能

在AJAX中前進和後退按鈕的功能都會失效,雖然可以通過一定的方法(添加錨點)來使用戶可以使用該功能,但是這也同樣提高了開發的複雜度。

(3)對搜索引擎的支持的不足

通常搜索引擎都是通過爬蟲程序來對互聯網上的海量數據來進行搜索整理的,但是爬蟲程序現在還不能理解那些奇怪的JS代碼以及由這些代碼引起的頁面內容的變化。


AJAX的XMLHttpRequest對象

AJAX的核心是XMLHttpRequest對象,它是AJAX實現的關鍵——發送異步請求、接收響應及執行回調都是通過它來完成的。

AJAX的使用

(1)定義一個函數,通過函數來一部獲取信息,如:

function Ajax(){

// ...

}

(2)聲明一個空對象來裝入XMLHttpRequest,如:

var xmlHttpReq = NULL;

(3)給XMLHttpRequest對象賦值,如:

if (window.ActiveXObject){       //IE5 IE6 是以ActiveXObject的方式引入XMLHttpRequest對象的

    xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP")

else if{      //除IE5 IE6以外的瀏覽器

    xmlHttpReq = new XMLHttpRequest();  

}

說明:IE5、IE6是以ActiveXObject的方式引入XMLHttpRequest對象的,而其他瀏覽器的XMLHttpRequest對象是window的子對象

(4)使用open()方法初始化XMLHttpRequest對象,指定HTTP方法和要使用的URL,如:

xmlHttpReq.open("GET", "test.php", true)

說明:默認情況下,使用XMLHttpRequest對象發送的HTTP請求時異步進行的,但是可以顯式地把async參數設置爲true

(5)爲XMLHttpRequest註冊一個回調事件處理器。當readyState值改變時,會激發一個readydstatechange事件,可以使用onreadystatechange屬性來註冊該回調事件處理器,如:

xmlHttpReq.onreadystatechange = RequestCallBack;

(6)使用send()方法發送該請求,由於請求使用的是HTTP的GET方式,所以可以在不指定參數或使用null參數的情況下調用send()方法,如:

xmlHttpReq.send(null)

說明:當請求狀態改變時,XMLHttpRequest對象調用onreadystatechange屬性註冊的事件處理器。因此,在處理該響應之前,事件處理器應該檢查readyState的值和HTTP狀態。當請求完成加載(readState的值爲4)並且響應已經成功(HTTP狀態值爲200)時,就可以調用一個JS函數來處理響應內容,如:

function RequestCallBack(){

    if(xmlHttpReq.readyState == 4){

         if(xmlHttpReq.status == 200 ){

            document.getElementById("resText").innerHTML = xmlHttpReq.responseText;

        }

    }

}

jQuery中的AJAX

jQuery對AJAX操作進行了封裝,分爲3層:
第1層(最底層):$.ajax()
第2層:load()、$.get()、$.post()
第3層:$.getScript()、$.getJSON()

第一層
$.ajax()
$.ajax(options)

第二層
(1)load()
load(url [, data] [, callback])
url:請求HTML頁面的URL地址;
data:發送至服務器的key/value數據;
callback:請求完成時的回調函數,無論請求成功或失敗;
回調函數有3個參數,分別代表請求返回的內容、請求狀態、XMLHttpRequest對象
(2)$.get()、$.post()
它們是jQuery中的全局函數,可以傳遞一些參數給服務器中的頁面

$.get(url [, data] [, callback] [, type])
載入成功時回調函數自動將請求結果和狀態傳遞給該方法,回調函數只有兩個參數:data、textStatus
type是指服務器端返回內容的格式,包括xml、html、script、json、text、default

$.post()

GET和POST的區別

GET請求會將參數跟在URL後進行傳遞;而POST請求則是作爲HTTP消息的實體內容發送給Web服務器。

GET方式對傳輸的數據有大小限制(通常不能大於2KB),而使用POST方式傳遞的數據量要比GET方式大得多(理論上不受限制)

GET方式請求的數據會被瀏覽器緩存起來,其他人可以從瀏覽器的歷史記錄中讀取到這些數據,會帶來嚴重的安全問題;POST相對來說能夠避免。

GET方式和POST方式傳遞的數據在服務器端的獲取也不同。


第三層

(1)$.getScript()

用於動態加載JS文件

(2)$.getJSON()

用於加載JSON文件

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章