當前位置:學問君>人在職場>電腦培訓>

AJAX的工作原理及優缺點

學問君 人氣:3.02W

AJAX 是一種用於創建快速動態網頁的技術。透過在後臺與服務器進行少量數據交換,AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。

AJAX的工作原理及優缺點

一、ajax所包含的技術

大家都知道ajax並非一種新的技術,而是幾種原有技術的結合體。它由下列技術組合而成。

使用CSS和XHTML來表示。

使用DOM模型來交互和動態顯示。

使用XMLHttpRequest來和服務器進行異步通信。

使用javascript來綁定和調用。

在上面幾中技術中,除了XmlHttpRequest對象以外,其它所有的技術都是基於web標準並且已經得到了廣泛使用的,XMLHttpRequest雖然目前還沒有被W3C所採納,但是它已經是一個事實的標準,因爲目前幾乎所有的主流瀏覽器都支援它。

二、怎樣創建ajax

Ajax的原理簡單來說透過XmlHttpRequest對象來向服務器發異步請求,從服務器獲得數據,然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從服務器獲得請求數據。原生創建ajax可分爲以下四步。

1、創建XMLHttpRequest對象

所有現代瀏覽器(IE7+、Firefox、Chrome、Safari 以及 Opera)均內建 XMLHttpRequest 對象。

創建 XMLHttpRequest 對象的語法

var xhr = new XMLHttpRequest();

老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 對象:

var xhr = new ActiveXObject("TTP");

爲了應對所有的現代瀏覽器,包括 IE5 和 IE6,請檢查瀏覽器是否支援 XMLHttpRequest 對象。如果支援,則創建 XMLHttpRequest 對象。如果不支援,則創建 ActiveXObject :

var xhr;if(XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject("TTP");}

2、準備請求

初始化該XMLHttpRequest對象,接受三個參數:

(method,url,async);

第一個參數表示請求類型的字元串,其值可以是GET或者POST。

GET請求:

("GET",,true);

POST請求:

("POST",,true);

第二個參數是要作爲請求發送目標的URL。

第三個參數是true或false,表示請求是以異步還是同步的模式發出。(默認爲true,一般不建議爲false)

false:同步模式發出的`請求會暫停所有javascript代碼的執行,知道服務器獲得響應爲止,如果瀏覽器在連接網絡時或者在下載檔案時出了故障,頁面就會一直掛起。

true:異步模式發出的請求,請求對象收發數據的同時,瀏覽器可以繼續加載頁面,執行其他javascript代碼

3、發送請求

();

一般情況下,使用Ajax提交的參數多是些簡單的字元串,可以直接使用GET方法將要提交的參數寫到open方法的url參數中,此時send方法的參數爲null或爲空。

GET請求:

("GET",,true);(null);

POST請求:

如果需要像 HTML 表單那樣 POST 數據,請使用 setRequestHeader() 來添加 HTTP 頭。然後在 send() 方法中規定您希望發送的數據:

("POST",,true);equestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");("name="+userName+"&age="+userAge);

4、處理響應

adystatechange = function(){if(yState == 4 && us == 200){(onseText);}}

onreadystatechange 事件:

當請求被髮送到服務器時,我們需要執行一些基於響應的任務。每當 readyState 改變時,就會觸發 onreadystatechange 事件。

readyState屬性:

0:已經創建對象,但還沒有調用open()方法。

1:已經調用open()方法,但還沒有發送請求。

2:請求已經發送,標題和狀態已經收到,並可用。

3:接收到來自服務器的響應。

4:接收完請求數據,表示已經完成請求。

status屬性:

200:”OK”

404: 未找到頁面

responseText:獲得字元串形式的響應數據

responseXML:獲得 XML 形式的響應數據

返回值一般爲json字元串,可以用e(onseText)轉化爲JSON對象。

5、完整例子

var xhr;if(XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject("TTP");};("GET","./",true);();adystatechange = function(){if(yState == 4 && us == 200){(e(onseText));}}

{"name":"tsrot","age":24}

三、ajax應用場景

場景 1. 數據驗證

場景 2. 按需取數據

場景 3. 自動更新頁面

四、ajax優缺點

優點:

1、頁面無重新載入,用戶體驗好。

2、異步通信,更加快的響應能力。

3、減少冗餘請求,減輕了服務器負擔

4、基於標準化的並被廣泛支援的技術,不需要下載插件或者小程序。

缺點:

1、ajax幹掉了back按鈕,即對瀏覽器後退機制的破壞。

2、存在一定的安全問題。

3、對搜尋引擎的支援比較弱。

4、破壞了程序的異常機制。

5、無法用URL直接訪問。

TAGS:優缺點 Ajax