AJAX工作原理及優缺點詳解_AJAX相關

來源:互聯網
上載者:User

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工作原理及優缺點詳解,希望對大家有所協助,如果大家有任何疑問請給我留言,小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援!

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.