天天看點

原生AJAX基礎講解及相容處理

  AJAX = Asynchronous JavaScript and XML (異步的JavaScript和XML)。

  AJAX不是新技術 ,但卻是熱門的技術。它可以在不重載(重新整理)整個頁面的情況下與伺服器進行資料互動并更新網頁子產品。

  AJAX的優點有很多:可以局部重新整理、按需加載,這樣就減輕了伺服器的資料流量。并且在頁面更新的同時,使用者可以浏覽器網頁的其它内容而不受影響,也減輕了結構負擔。AJAX也不是萬能的,在有以上優點的同時SEO也受到了影響。

  在學習AJAX之前,必須先有HTML/XHTML、CSS、JavaScript/DOM的基礎。

  AJAX與伺服器進行資料互動,必然涉及到伺服器端,與此同時也就涉及到了伺服器請求對象的建立(new XMLHttpRequest())、确認請求方式(open())、發送請求(send())以及響應請求(responseText)。

  建立對象:

    IE9+及其它浏覽器支援使用new XMLHttpRequest()的建立對象方式,而IE8及以下則使用new ActiveXObject()的方式進行建立。

    看了網上許多人使用如下代碼進行相容:

    筆者用IE11調試功能測試IE10及以下不寫new ActiveXObject("Msxml2.XMLHTTP")也是沒問題的,于是在建立對象時可以使用代碼:

    var xml = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();

  确認請求:

    xml.open('get', 'url', true/false);

    第一個參數表示:string. 通路方式,有兩具值:get/post,大部分的時候使用get

    第二個參數表示:string. 要連接配接的伺服器網址

    第三個參數表示:boolean. 表示是否需要異步請求(true為發起異步加載)

  發送請求:

    xml.send();

    如果需要發送資料則采用xml.send(str);

  響應資料:

    xml.onreadystatechange = function() {

      if (xml.readyState == 4 && xml.status == 200) {

        alert(xml.responseText);

      }

    }

  status傳回連結的狀态,一般傳回200與404,200表示成功傳回,404表示未找到頁面。

  readyState有5個值,分别為:0、1、2、3、4。而每當值改變時都會觸發一次onreadystatechange。

  readyState的5個值含義分别為:

0: 請求未初始化

1: 伺服器連接配接已建立

2: 請求已接收

3: 請求進行中

4: 請求已完成,且響應已就緒

  也就是當請求完成,并且找到頁面時,然後才擷取伺服器上的資料。

繼續閱讀