XMLHttpRequest五部曲

　　在上一篇部落格中主要講了一下AJAX的基礎知識，對AJAX進行了一下簡單的講解。既然XMLHttpRequest物件是AJAX的核心技術，那麼這篇部落格將學習如何使用XMLHttpRequest物件，實現非同步操作。下面以驗證表單為例說一下。

　　第一部

　　建立XMLHttpRequest物件

　　由於不同的瀏覽器支援XMLHttpRequest物件的建立方式不同，所以我們建立XMLHttpRequest物件的方式要有選擇性。比如：IE6 、IE5等比較舊版本的IE需要使用ActiveXObject來實現建立，IE中比較高階的版本、firefox 、Opera 等就可以直接使用 new XMLHttpRequest 完成建立。

　　JS程式碼：

　　　　　　　//1.建立XMLRequest物件

               if(window.XMLHttpRequest){
                    //IE7,8 fireFox, Opera
                    xmlhttp = newXMLHttpRequest();
                    if(xmlhttp.overrideMimeType){
                       xmlhttp.overrideMimeType("text/xml"）;
                    }elseif(window.ActioveXObject){

                        //IE 老版本的
                        varactiveName==["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0",

                       "MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML.2.XMLHTTP",

                        "Microsoft.XMLHTTP"];    

                   for(var i； i<activexName.length; i++){
                           try{                    
                                varxmlhttp=new ActiveXObject(activexName[i]);
                               break;
                           }catch(e){                           

                            }
                    }                   
                    }
                }
               if(xmlhttp==nudefind || xmlhttp==null){

                    alert("當前瀏覽器不支援建立XMLHttpRequest物件，請更換瀏覽器");
                    return;
                }
 

　　第二部

　　註冊回撥函式

　　設定的毀掉函式不要再函式名後面加括號，括號表示將回調函式的返回值註冊給noreadystatechange屬性。正確的方式應該是將回調函式的名字註冊給這個屬性。

　　JS程式碼：

　　//錯誤的寫法：xmlhttp.onreadystatechange=callback();　　
　　xmlhttp.onreadystatechange=callback;

　　第三部

　　使用open方法設定和伺服器端互動的基本資訊

　　Open(“method”,“url”，boolean)，第一個引數提供呼叫的特定方法（get、post），第二個引數提供所呼叫資源的URL，boolean 表示同步（false）或者非同步操作（true）。

　　GET方法

　　userName為獲取的使用者名稱的id

　　xmlhttp.open("GET","AJAX?name=" + userName,true);

　　POST方法

　　Post方式，open方法後需要先呼叫setRequestHeader方法來設定Content-Type,然後呼叫send方法，send中的引數為請求的資料。

　　　　　　　//設定和伺服器互動的相應引數
              xmlhttp.open("POST","AJAX",true);              
               //POST方式互動所需要增加的程式碼
              xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

　　第四部

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

　　由於open方法使用的方式不同，所以使用send方法傳送資料的引數也有所不同。

　　GET方式：

　　Xmlhttp.send(null);

　　POST方式：

　　Xmlhttp.send(“name”+userName);

　　第五部

　　在回撥函式中判斷互動是否結束，影響是否正確，並根據需要獲取伺服器端返回的資料，更新頁面內容。

　　　　　function callback(){

                //5.判斷和伺服器端的互動是否完成，還要判斷伺服器端是否正確返回

               if(xmlhttp.readyState==4){

                    //表示和伺服器端的互動已經完成

                   if(xmlhttp.status==200){

                        //表示伺服器的響應程式碼是200，正確返回了資料

                        //純文字資料的接受方法

                        varmessage=xmlhttp.responseText;

                        //XML資料對應的DOM物件接受方法

                        //使用的前提是，伺服器端需要設定contenttype為text/xml

                        //vardomXml=xmlhttp.responseXML;                       

                        //記憶向div標籤中填充文字內容的方法

                        var div=document.getElementById("message");

                       div.innerHTML=message;
                    }
                }
            }

　　注意事項

　　1． 由於瀏覽器的問題導致我們建立XMLHttpRequest物件的實現方式不同。Open的方法引數最多有5個（method ,url,Boolean,username,password）其中

　　　method表示HTTP的請求方法，包括GET和POST；

　　　URL表示請求的伺服器的地址；

　　　Boolean中true表示非同步操作、false表示同步；

　　　Username和password 分別表示使用者名稱和密碼，可以不寫。

　　2．設定的回撥函式沒有括號（）。

　　3．使用回撥函式時，判斷readyState==4的時候表示和伺服器完成了互動。