AJAX核心XMLHTTPRequest對象

標籤：發送請求   版本號碼   undefined   亂碼問題   解決   接受   提交   obj   name   

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

　　　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對象