老早就寫好了總結。今天整理發表一下。

　　　XMLHttpRequest對象是AJAX的核心技術，XMLHttpRequest 是XMLHTTP 組件的對象，通過這個對象。AJAX能夠像桌面應用程序一樣僅僅同server進行數據層面的交換。而不用每次都刷新界面，也不用每次將數據處理的工作都交給server來做；這樣既減輕了server負擔又加快了響應速度、縮短了用戶等待的時間。

XMLHttpRequest對象是開發人員的夢想，由於可以：

在不又一次載入頁面的情況下更新網頁

在頁面已載入後從server請求數據

在頁面已載入後從server接收數據

在後臺向server發送數據

XMLHttpRequest對象的方法和屬性就不再這裏進行簡紹了，由於大家都能夠再網上查到。

這裏簡紹一下他的使用。

他的使用有五步：

①建立XMLHttpRequest對象

②註冊回調函數

③使用open方法設置和server端的交互的基本信息

④設置發送的數據，開始和server端進行交互

⑤在回調函數中推斷交互式否結束，對應是否正確，並依據須要獲取server返回的數據，更新頁面內容。

以下我把自己做的視頻樣例的ＪＳ封裝代碼整理的一下。給大家看一下：

<span style="font-family:KaiTi_GB2312;font-size:18px;">//使用封裝方法的人僅僅關心提供http的請求方法。數據，成功，和失敗的回調方法
//類的構造定義，主要職責就是新建出XMLHttpRequest對象
var MyXMLHttpRequest=function(){
    //1、創建XMLHTTPRequest對象
    var xmlhttprequest;
    //不同瀏覽器的封裝
    if(window.XMLHttpReuqest){
        //IE7,IE8,firefox,MOailla,Safari,Opera等瀏覽器創建
        xmlhttprequest=new XMLHttpReuqest();
        //些版本號的Mozilla 瀏覽器處理server返回的未包括XML mime-type 
        //頭部信息的內容時會出錯。因此。要確保返回的內容包括text/xml 信息。 
        if (xmlhttprequest.overrideMineType){
            xmlhttprequest.overrideMineType("text/xml");
        }
    }else if(window.ActiveXObject){
        //IE6。 IE6.6，IE5
        var activeName=["MSML2.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===undefined){
            alert("HTTP的請求地址必須設置。");
            return;
        }
        var tempxmlhttp=this.xmlhttp;
        //2、註冊回調方法(這是當server返回信息是client的處理方式)
        this.xmlhttp.onreadystatechange=function(){
            //5、推斷和server端的交互式否完畢，還要推斷server端是否正確返回了數據
            //readyState 值為4 的時候。代表server已經傳回全部的信息。
            //能夠開始處理信息並更新頁面內容了
            if(tempxmlhttp.readyState===4){
                //表示和server端的交互已經完畢
                //XMLHttpRequest 對成功返回的信息有兩種處理方式：
                //responseText：將傳回的信息當字符串使用；
                //responseXML：將傳回的信息當XML 文檔使用，能夠用DOM 處理。
 

                if(tempxmlhttp.status===200){
                    //表示server的相應代碼是200。正確的返回了數據
                    //純文本數據的接受方法
                var responseText=tempxmlhttp.responseText;
                     //XML數據相應的DOM對象的接受方法
                     //使用的前提是，server端須要設置content-type為text/xml
                    var responseXML=tempxmlhttp.responseXML;
                    //這是對頁面端ＪＳ的處理
                    if (callback===undefined || callback===null){
                        alert("沒有設置處理數據正確的返回方法");
                        alert("返回的數據："+responseText);
                    }else{
                        callback(responseText,responseXML);
                    }
                }else{
                    if (failback ===undefined || failback===null){
                        alert("沒有設置處理數據失敗的返回方法");
                        alert("HTTP的響應嗎："+tempxmlhttp.status+",相依嗎的文本信息："+tempxmlhttp.statusText);
                    }else{
                        failback(tempxmlhttp.status,tempxmlhttp.statusText);;
                    }
                }
            }
        };
        //解決緩存的轉換--添加時間戳
        if (url.indexOf("?")>=0){
            url=url+"&t="+(new Date()).valueOf();
        }else{
            url=url+"?
t="+(new Date()).valueOf();
        }
        
        //解決跨域的問題
        if (url.indexOf("http://")>=0){
            url.replace("?","&");
            url="Proxy?url="+url;
        }
        //3、設置和server端進行交互的參數（向server發出請求）
        this.xmlhttp.open(method,url,true);
        
        //send 的參數假設是以Post 方式發出的話。能夠是不論什麽想傳給server的內容。

        //只是。跟form 一樣，假設要傳文件或者Post 內容給server。
        //必須先調用setRequestHeader 方法，改動MIME 類別。

        if (method ==="POST"){
            this.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        }
        //4、設置項server端發送的數據，啟動和server的交互
        this.xmlhttp.send(data);
    }else{
        alert("XMLHttpRequest對象創建失敗，無法發送數據。");
    }
};

MyXMLHttpRequest.prototype.abort=function(){
    this.xmlhttp.abort();
};</span>

註意：

1、註冊回調方法的方式有兩種：①一種是ＪＳ文件裏的寫法。既是Javascript既是定義函數的方式定義對應函數。

xmlhttp.onreadystatechange=function(){}

②xmlhttp.onreadystatechange=callback;須要指出的時，這個函數名稱不加括號，不指定參數。

2、向server發出請求的時候的

XMLHttpRequest 可以同步或異步地返回Web server的響應，而且可以以文本或者一個 DOM 文檔的形式返回內容。

對於open方法的具體解釋：默覺得true的時候表示異步

對於這個對象的擴展問題：

①添加時間戳的效果，解決瀏覽器的緩存問題。

以下這個事效果圖：紅框裏的就是時間戳

這樣能夠防止網址一樣來訪問緩存的問題HttRequest請求的緩存問題。

時間戳解決別的問題：如用戶發帖的頁面中，惡意程序來重復提交的問題

②解決跨域訪問問題。

跨域：當前網頁訪問的server的域名和port不同了。就稱為跨域訪問。

③解決中英文亂碼問題：

對於這個原理我看的是是懂非懂的，

總之：XMLHTTPRequest對象用來在後臺與server進行交換數據。

AJAX核心XMLHTTPRequest對象