AjAX學習總結

標籤：sof   obj   修改   ie7   接收   服務   change   return   參數   

[1] AJAX簡介
    > 全稱： Asynchronous JavaScript And XML
    > 非同步JavaScript和XML

    > AJAX就是通過JavaScript向伺服器發送請求，並接收響應，然後我們在通過DOM來修改頁面。
    > XML指的是伺服器響應的資料的格式。
    > 目前AJAX已經很少使用XML作為響應的格式。因為XML的解析效能及傳輸效能較差。

[2] 同步和非同步
    > 同步：
        當我們通過瀏覽器向伺服器發送一個請求時，瀏覽器會重新整理整個頁面。
    > 非同步：
        當我們向伺服器發送請求時，不是重新整理整個網頁，而是只重新整理網頁的一部分。

[3] XMLHttpRequest對象
    > 我們AJAX的所有操作都是圍繞著XMLHttpRequest對象進行。
    > 在XMLHttpRequest對象中封裝發送給伺服器請求報文，同時在伺服器發迴響應時，響應資訊也會在對象中封裝。
    > 如何擷取XMLHttpRequest對象
    - var xhr = new XMLHttpRequest();

[4] 使用步驟
    1.建立XMLHttpRequest對象
    大部分比較新的瀏覽器都支援的方式（IE7以上）
    var xhr = new XMLHttpRequest();
    IE6以下的
    var xhr = new ActiveXObject("Msxml2.XMLHTTP");
    IE5.5以下的
    var xhr = new ActiveXObject("Microsoft.XMLHTTP");

    通用的擷取XMLHttpRequest對象的方法：

    //寫一個擷取XHR的方法
    function getXMLHttpRequest(){
    try{
    //大部分瀏覽器都支援的方式
    return new XMLHttpRequest();
    }catch(e){
    try{
    //IE6以下瀏覽器支援的方式
    return new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
    try{
    //IE5以下的瀏覽器
    return new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e){
    alert("你是火星來的吧！你的瀏覽器不支援AJAX！");
        }

    }

    }
    }


[5].佈建要求資訊（請求地址，請求方式，請求參數）
    xhr.open(請求方式,請求地址);
    在發送post請求時，還需要設定一個要求標頭，如下：
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

[6]發送請求
xhr.send(請求體);
get請求沒有請求體，所以send中可以傳null或什麼都不傳。
post請求需要通過send來佈建要求參數。


[7].接收響應資訊
    //xhr綁定一個onreadystatechange響應函數，這個函數會在readyState屬性發生改變時調用
    xhr.onreadystatechange = function(){
    //判斷當前readyState是否為4 ， 且響應狀態代碼為200
    if(xhr.readyState==4 && xhr.status==200){
    //讀取響應資訊，做相關操作。

    //如果資訊為純文字
    xhr.responseText

    //如果資訊為XML
    xhr.responseXML
     }
    };

[8] 響應資料的格式
    - 響應一個XML
    - 當我們想通過servlet給ajax返回一個比較大量的資訊，返回一個對象。
    - 返回 User ：username：sunwukong age：18 gender：男
    username:sunwukgon,age:18,gender:男
    - 我們可以通過一個XML格式來返回一個大量的資訊
    <user>
    <name></name>
    <age></age>
    <gender></gender>
    </user>

- 響應一個JSON對象

 

AjAX學習總結