Ajax核心技術之XMLHttpRequest對象，ajaxxmlhttprequest

Ajax核心技術之XMLHttpRequest對象，ajaxxmlhttprequest

  XMLHttpRequest對象到底是什嗎？跟Ajax到底有什麼聯絡？在瞭解它之前還是要先瞭解一下Ajax的功能。與以往的技術不同，Ajax是為了實現非同步作業。

         那麼關於非同步，好像一個管理者安排好一個專案計劃後，將這個項目交給下屬去做，而自己再繼續做自己應該做的其他的事兒。在下屬去完成這個項目的過程中，並不影響此管理者的工作狀態或者進程。只是等到項目完成交付時，管理者進行驗收即可。那麼這裡的下屬在非同步作業中就相當於中的Ajax引擎，為了方便理解，也可以直接理解為XMLHttpRequest對象，二者並不衝突。

   ，在非同步作業是時，通過Ajax引擎來進行提交和接收資料，而在此過程中XMLHttpRequest對象則負責非同步資料的檢索，也就是說，它的主要功能是負責在非同步作業中，後台與伺服器之間進行交換資料。

    那麼在使用此對象時，和其他對象使用方法一樣，首先要進行建立，針對於IE和W3C兩種不同的標準，支援的組件不同，需要對其建立過程進行封裝。

 //1.建立XMLHttpRequest對象                if (window.XMLHttpRequest) {                    xmlhttp=new XMLHttpRequest();                    if (xmlhttp.overrideMimeType) {                        xmlhttp.overrideMimeType("text/xml");                    }                }else if (window.ActiveXObject) {                    var activexName=["MSXML.2.XMLHTTP.6.0","MSXML.2.XMLHTTP.5.0",                                    "MSXML.2.XMLHTTP.4.0","MSXML.2.XMLHTTP.3.0",                                    "MSXML.2.XMLHTTP","Miscrosoft.XMLHTTP"];                    for (var i = 0; i <activexName.length; i++) {                        try {                            xmlhttp=new ActiveXObject(activexName[i]);                        } catch (e) {                            }                    }                }                if (xmlhttp==undefined || xmlhttp==null) {                    alert("當前瀏覽器不支援建立XMLHttpRequest對象，請更換瀏覽器");                    return;                }

二、XMLHttpRequest對象使用的五步操作法

       1、建立（上面代碼封裝好的）

       2、為對象註冊回調方法，以便與伺服器進行互動

            xmlhttp.onreadystatechange=callback;

       3、4、擷取參數向伺服器端提交資料

        var userName=document.getElementById("UserName").value;

提交的方式有兩種：

//3.設定和伺服器端互動的相應參數      xmlhttp.open("GET","Ajax?name=" + userName,true );                    //4.設定向伺服器端發送的資料，啟動和伺服器端的交 xmlhttp.send(null);//POST方式進行提交//3.設定和伺服器端互動的相應參數 xmlhttp.open("POST", "Ajax", true);  //post方式互動所需要增加的代碼xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //4.設定向伺服器端發送的資料，啟動和伺服器端的互動xmlhttp.send("name=" + userName);

5、接收，判斷是否成功即回呼函數的編寫

function callback(){                    if (xmlhttp.readyState == 4) {                    //表示和伺服器端的互動已經完成                    if (xmlhttp.status==200) {                        //表示和伺服器的響應代碼是200，正確的返回了資料                        //純文字資料的接受方法                         var message =xmlhttp.responseText;                        //Xml資料對應的Dom對象的接受方法                        //使用的前提是，伺服器端需要設定content-type為text/xml                        //var domXml=xmlhttp.responseXML;                        //向div標籤中填充常值內容的方法                        var div=document.getElementById("message");                        div.innerHTML=message;                    }                }            }

     在這裡涉及到了get和post兩種用戶端提交方式，從代碼中能明顯的看出二者之間的不同之處。Get方式會將參數直接顯示在連結中，不安全，post方式則通過send在後台進行提交。那麼在伺服器端二者有什麼不同呢？在XMLHttp對象中在伺服器端接收這兩者並沒有什麼區別，都是通過processRequest方法進行接收，通過request對象擷取用戶端提交的參數，通過response來對用戶端的請求作出響應。具體使用總結見下篇部落格。