原生ajax基礎知識筆記

原生ajax基礎知識筆記

一、建立 XMLHttpRequest 對象

---

    全部現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。

    老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveXObject。

代碼示例:

    // Creates a XMLHttpRequest object.

    var xhr = new XMLHttpRequest();

兼容瀏覽器代碼示例:

    var xhr;

    //根據標準的瀏覽器是否支持標準的建立方法來建立對象

    //先判斷瀏覽器是否具有XMLHttpRequest()方法；

    if(window.XMLHttpRequest){

        //有，表示當前是標準瀏覽器；

        xhr = new XMLHttpRequest(); // 支持IE8，9；w3c標準。

    }else{

        //無，表示不是標準瀏覽器, 是 IE 5,6,7;

        //在IE5,6,7這些老版的瀏覽器中，Ajax組件是放在ActiveXObject組件庫中的，須要傳入Micrsoft.XMLHTTP 這個參數才能返回出這個組件。

        xhr = new ActiveXObject('Micrsoft.XMLHTTP');

    }

二、Ajax 向服務器發送請求

---

    建立XHR對象後，將請求發送到服務器,使用 XMLHttpRequest 對象的 open() 和 send()方法:

代碼示例:

    //GET請求

        //若是有參數，則把請求參數直接拼接在url以後

        xhr.open('GET','JSON.html',true);

    //發送請求：

        //GET 請求send()參數能夠不寫,最好在send(null)參數中寫上null

        xhr.send();

        

open(method,url,async)方法:

    method：請求的類型；GET 或 POST

    url：文件在服務器上的位置

    async：true（異步）或 false（同步）

send(string)方法:

    將請求發送到服務器；string：僅用於 POST 請求

三、GET 請求

---

    一個簡單的 GET 請求 (可能獲得的是緩存的結果)：

    xhr.open("GET","/try/ajax/demo_get.php",true);

    xhr.send();

    爲了不這種狀況，請向 URL 添加一個惟一的 ID：

    xhr.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);

    xhr.send();

    但願經過 GET 方法發送信息，請向 URL 添加信息：

    xhr..open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);

    xhr.send();

四、POST 請求

---

    一個簡單 POST 請求：

    xhr..open("POST","/try/ajax/demo_post.php",true);

    xhr.send();

    若是須要像 HTML 表單那樣 POST 數據，就使用 setRequestHeader() 來添加 HTTP 頭。而後在 send() 方法中規定所但願發送的數據：

    xhr.open("POST","/try/ajax/demo_post2.php",true);

    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    xhr.send("fname=Henry&lname=Ford");

setRequestHeader(header,value)方法:

    向請求添加 HTTP 頭；header: 規定頭的名稱

    value: 規定頭的值

五、GET 仍是 POST？

---

    與 POST 相比，GET 更簡單也更快，而且在大部分狀況下都能用。

    然而，在如下狀況中，請使用 POST 請求：

    沒法使用緩存文件（更新服務器上的文件或數據庫）

    向服務器發送大量數據（POST 沒有數據量限制）

    發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

六、url - 服務器上的文件

---

    open() 方法的 url 參數是服務器上文件的地址：

    xhr.open("GET","ajax_test.html",true);

    該文件能夠是任何類型的文件，好比 .txt 和 .xml，或者服務器腳本文件，好比 .asp 和 .php （在傳回響應以前，可以在服務器上執行任務）。

七、Async=true

---

    當使用 async=true 時，規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函數：

    xhr.open("GET","/try/ajax/ajax_info.txt",true);

    xhr.send();

    xhr.onreadystatechange=function()

    {

     if (xhr.readyState==4 && xhr.status==200)

     {

     document.getElementById("myDiv").innerHTML=xhr.responseText;

     }

    }

八、Async=false

---

    不推薦使用 async=false，由於JavaScript 會等到服務器響應就緒才繼續執行。若是服務器繁忙或緩慢，應用程序會掛起或中止。當使用 async=false 時，不要編寫 onreadystatechange 函數 把代碼放到 send() 語句後面便可：：

    xhr.open("GET","/try/ajax/ajax_info.txt",false);

    xhr.send();

    document.getElementById("myDiv").innerHTML=xhr.responseText;

九、Ajax 服務器響應

---

    得到來自服務器的響應，使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

    responseText 屬性: 得到字符串形式的響應數據。

    document.getElementById("myDiv").innerHTML=xhr.responseText;

    responseXML 屬性: 得到 XML 形式的響應數據。且須要做爲 XML 對象進行解析，使用 responseXML 屬性：

    xmlDoc=xmlhttp.responseXML;

    txt="";

    x=xmlDoc.getElementsByTagName("ARTIST");

    for (i=0;i<x.length;i++)

    {

     txt=txt + x[i].childNodes[0].nodeValue + "<br>";

    }

    document.getElementById("myDiv").innerHTML=txt;

十、AJAX - onreadystatechange 事件

---

    當請求被髮送到服務器時，咱們須要執行一些基於響應的任務。

    每當 readyState 改變時，就會觸發 onreadystatechange 事件。

    readyState 屬性存有 XMLHttpRequest 的狀態信息。

    下面是 XMLHttpRequest 對象的三個重要的屬性：

    onreadystatechange : 存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。

    readyState : 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

    0: 請求未初始化

    1: 服務器鏈接已創建

    2: 請求已接收

    3: 請求處理中

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

    status

    200: "OK"

    404: 未找到頁面

    在 onreadystatechange 事件中，咱們規定當服務器響應已作好被處理的準備時所執行的任務。

    當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒：

    xhr.onreadystatechange=function(){

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

     document.getElementById("myDiv").innerHTML=xhr.responseText;

     }

    }

使用回調函數:

    回調函數是一種以參數形式傳遞給另外一個函數的函數。

    若是您的網站上存在多個 AJAX 任務，那麼您應該爲建立 XMLHttpRequest 對象編寫一個標準的函數，併爲每一個 AJAX 任務調用該函數。

    該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）：

    function myFunction(){

     loadXMLDoc("/try/ajax/ajax_info.txt",function(){

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

     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

     }

     });

    }