AJAX核心--XMLHttpRequest五步法

標籤：xmlhttprequest   ajax   

引言：

AJAX=非同步Javascript + XML，AJAX是一種用於建立快速動態網頁的技術。

開門見山：

解讀：AJAX使用XHTML和CSS為網頁表示，DOM動態顯示和互動，XML進行資料交換和處理，XMLHttpRequest進行資料檢索，Javascript將以上技術融合。

AJAX與傳統的Web開發有什麼區別？

用一句話總結：在頁面跳轉時，傳統是整個頁面重新整理的；AJAX是一部分資料改變。

思維方式的轉變：傳統web應用時頁面互動為主導、同步響應、非標準方式布局和開發、主要代碼在伺服器端，AJAX是資料互動為主導的、非同步響應、有標準布局、頁面段需要更多地代碼。

AJAX的核心知識點（一）：XMLHttpRequest對象

總結XMLHttpRequest五步使用法：

1、建立XMLHttpRequest對象

2、註冊回呼函數

3、使用open方法設定和服務端互動的基本資料

4、設定發送的資料，開始和伺服器端互動

5、在回呼函數中判斷互動是否結束，響應是否正確，並根據需要擷取伺服器端返回的資料，更新頁面。

/*  * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. *///使用封裝方法的人，只關心提供http的要求方法，url地址，成功和失敗的方法//類的構造定義，主要職責就是建立出XMLRequest對象var MyXMLHttpRequest = function(){    //定義的不同瀏覽器的封裝    var xmlhttprequest;    if(window.XMLHttpRequest){        xmlhttprequest = new XMLHttpRequest();        if(xmlhttprequest.overrideMimeType){            xmlhttprequest.overrideMimeType("text/xml");        }    }else if (window.ActiveXObject){        var activeName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];        for(var i = 0; i < activeName.length;i++){            try{                xmlhttprequest = new ActiveXObject(activeName[i]);                break;            }catch(e){                        }        }    }  if(xmlhttprequest === undefined || xmlhttprequest === null){      alert("XMLHttpRequest對象建立失敗！！");  }else {      this.xmlhttp = xmlhttprequest;  } };//使用者發送請求的方法MyXMLHttpRequest.prototype.send = function(method,url,data,callback,failback) {    if(this.xmlhttp !== undefined && this.xmlhttp !== null){        method = method.toUpperCase();        if(method !== "GET" && method !=="POST"){            alert("HTTP的要求方法必須是GET或POST！！");            return;        }        if(url === null || url === underfined){            alert("HTTP的請求地址必須設定！");            return;        }        var tempxmlhttp = this.xmlhttp;        this.xmlhttp.onreadystatechange = function(){               //請求發生改變的事件觸發程序               if(tempxmlhttp.readyState === 4){                    //4=完成，響應資料接收完成                    if(tempxmlhttp.status === 200){                    var responseText = tempxmlhttp.responseText;                    //伺服器相應的常值內容                    var responseXML = tempxmlhttp.responseXML;                    //伺服器相應的XNL內容對應的DOM對象                        if(callback === undefined || callback === null){                        alert("沒有設定處理資料正確返回的方法！");                        alert("返回的資料：" + responseText);                    }else{                        callback(responseText,responseXML);                    }                }else{                    if(failback === undefined || failback === null){                        alert("沒有設定處理資料返回失敗的處理方法！");                        alert("HTTP的響應碼：" + tempxmlhttp.status + "，響應碼的檔案資訊：" +                                 temphttp.status);                    }else{                        failback(tempxmlhttp.status,tempxmlhttp.statusText);                    }                }            }        };        //解決緩衝的轉換        if(url.indexOf("?") >= 0){            url = url + "&t" + (new Date()).valueOf();        }else{            url = url + "?" + (new Date()).valueOf();        }        //解決跨域問題        if(url.indexOf("http://") >= 0){            url.replace("?","&");            url = "Proxy?url=" + url;        }                this.xmlhttp.open(method,url,true);                //如果是POST方式，需要佈建要求頭        if(method === "POST"){            this.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");                   }                this.xmlhttp.send(data);    }else{        alert("XMLHttpRequest對象建立失敗，無法發送資料！");    }};MyXMLHttpRequest.prototype.abort = function(){    this.xmlhttp.abort();};

分析代碼：

代碼大體上是說：首先對XMLHttpRequest對象的建構函式定義，其中就是對不同瀏覽器的封裝；之後是定義了一個send方法，這個方法有幾個參數：method有兩個數“GET”和“POST”，url表示請求的伺服器的地址，data是向伺服器返回的資料；之後是註冊回調方法onreadystaechange，readstate有5個值，我們只關心值為4的時候，即相應資料接收成功；之後解決了一些小問題：跨域和Post緩衝問題用url轉換；最後封裝了放棄使用request對象的方法，使用的時候，可以調用內部寫的自己的方法。

callback和fallback實在javascript中寫的。

總結：

AJAX會在之後會有更好的東西替代它，它只是我們學習的一個階段。一種新的事物，我們現在看可能是新的，比較傳統的東西，會有它的不同點，一般人看到的可能更多地是它不同的地方，往往會忽略它與傳統的共同點，我們換一種思維方式，就會發現，我們掌握了傳統的基礎之後，新的事物的不同的地方很容易掌握。

AJAX核心--XMLHttpRequest五步法