AJAX核心--XMLHttpRequest五步法

引言：

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

開門見山：

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

AJAX與傳統的Web開發有什麼差異？

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

思惟方式的轉變：傳統web應用時頁面交互爲主導、同步響應、非標準方式佈局和開發、主要代碼在server端，AJAX是數據交互爲主導的、異步響應、有標準佈局、頁面段需要不少其它地代碼。

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

總結XMLHttpRequest五步使使用方法：

一、創建XMLHttpRequest對象

二、註冊回調函數

三、使用open方法設置和服務端交互的基本信息

四、設置發送的數據。開始和server端交互

五、在回調函數中推斷交互是否結束，響應是否正確，並依據需要獲取server端返回的數據，更新頁面。

/* 
 * 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;
                    //server對應的文本內容
                    var responseXML = tempxmlhttp.responseXML;
                    //server對應的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表示請求的server的地址，data是向server返回的數據；以後是註冊回調方法onreadystaechange，readstate有5個值，咱們僅僅關心值爲4的時候。即對應數據接收成功。以後攻克了一些小問題：跨域和Post緩存問題用url轉換；最後封裝了放棄使用request對象的方法。使用的時候。可以調用內部寫的本身的方法。

callback和fallback實在javascript中寫的。

總結：

AJAX會在以後會有更好的東西替代它，它僅僅是咱們學習的一個階段。一種新的事物，咱們現在看多是新的，比較傳統的東西。會有它的不一樣點，通常人看到的可能不少其它地是它不一樣的地方，每每會忽略它與傳統的共同點，咱們換一種思惟方式，就會發現，咱們掌握了傳統的基礎以後，新的事物的不一樣的地方很是easy掌握。