AJAX工作原理及優缺點詳解_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("Microsoft.XMLHTTP");

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

var xhr;if(XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject("Microsoft.XMLHTTP");}

2、準備請求

初始化該XMLHttpRequest對象，接受三個參數：

xhr.open(method,url,async);

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

GET請求：

xhr.open("GET",demo.php?name=tsrot&age=24,true);

POST請求：

xhr.open("POST",demo.php,true);

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

第三個參數是true或false，表示請求是以非同步還是同步的模式發出。（預設為true，一般不建議為false）

false：同步模式發出的請求會暫停所有javascript代碼的執行，知道伺服器獲得響應為止，如果瀏覽器在串連網路時或者在下載檔案時出了故障，頁面就會一直掛起。
true：非同步模式發出的請求，請求對象收發資料的同時，瀏覽器可以繼續載入頁面，執行其他javascript代碼

3、發送請求

xhr.send();

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

GET請求：

xhr.open("GET",demo.php?name=tsrot&age=24,true);xhr.send(null);

POST請求：

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

xhr.open("POST",demo.php,true);xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");xhr.send("name="+userName+"&age="+userAge);

4、處理響應

xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){console.log(xhr.responseText);}}

onreadystatechange 事件：

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

readyState屬性：

0：已經建立對象，但還沒有調用open()方法。

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

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

3：接收到來自伺服器的響應。

4：接收完請求資料，表示已經完成請求。

status屬性：

200:”OK”

404: 未找到頁面

responseText：獲得字串形式的響應資料

responseXML：獲得 XML 形式的響應資料

傳回值一般為json字串，可以用JSON.parse(xhr.responseText)轉化為JSON對象。

5、完整例子

demo.html

var xhr;if(XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject("Microsoft.XMLHTTP");};xhr.open("GET","./data.json",true);xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){console.log(JSON.parse(xhr.responseText).name);}}

data.json

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

三、ajax應用情境

情境 1. 資料驗證

情境 2. 按需取資料

情境 3. 自動更新頁面

四、ajax優缺點

優點：

1、頁面無重新整理，使用者體驗好。

2、非同步通訊，更加快的響應能力。

3、減少冗餘請求，減輕了伺服器負擔

4、基於標準化的並被廣泛支援的技術，不需要下載外掛程式或者小程式。

缺點：

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

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

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

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

5、無法用URL直接存取。

以上所述是小編給大家介紹的AJAX工作原理及優缺點詳解，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！