AJAX--XMLHttpRequest五步使使用方法

      傳統瀏覽方式和AJAX方式的不同

 

      多數Web應用程序都使用請求/響應模型從server上獲得完整的HTML頁面。經常是點擊一個button，等待server對應，在點擊還有一個button。然后在等待，這樣一個重復的過程。

       

       而AJAX是一種創建交互式網頁的網頁開發技術。當中XMLHttpRequest是核心的內容，它可以為頁面中的javascript腳本提供特定的通信方式。從而使頁面的javascript腳本和server之間形成動態交互的效果。XMLHTTPRequest的最大的長處是頁面內的javascript腳本可以不用刷新頁面，而直接和server發生交互。

       

       XMLHTTPRequest的五步使使用方法

     1、建立XMLHTTPRequest對象      

//1.創建XMLHTTPRequest對象
                if(window.XMLHttpRequest){
                    //alert("IE7,IE8,FireFox");
                    xmlhttp =new XMLHttpRequest();
                    if(xmlhttp.overrideMimeType){
                        xmlhttp.overrideMimeType("text/xml");
                    }
                }else if(window.ActiveXObject){
                    //alert("IE6,IE5.5,IE5");
                    var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0",
                        "MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0",
                        "MSXML2.XMLHTTP","Miscrosoft XMLHTTP"];
                    for(var i=0;i<activexName.length;i++) {
                        try{
                            xmlhttp=new ActiveXObject(activexName[i]);
                            break;
                        }catch(e){
                            
                        }
                    }
                }
                if(xmlhttp == undefined || xmlhttp == null){
                    alert("當前瀏覽器不支持創建XMLHttpRequest對象，請更換瀏覽器");
                    return;
                }
                array.push(xmlhttp.readyState);

        2、注冊回調函數    

xmlhttp.onreadystatechange=callback;

要注意的是callback不能寫成callback(),我們是想把方法名告訴onreadystatechange這個屬性，假設加了括號，就相當於把返回值告訴了onreadystatechange屬性。

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

        有兩種方法     

      //GET方式交互                
      xmlhttp.open("GET","AJAX?
name=" + userName,true);
                
      //POST方式交互               
      xmlhttp.open("POST","AJAX",true);
      //POST方式交互所需添加的代碼
      xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

        4、設置發送的數據，開始和server端交互 

     //GET方式
     xmlhttp.send(null);

     //POST方式
     xmlhttp.send("name=" + userName);

        5、更新界面

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

     

     array.push(xmlhttp.readyState);
     //推斷和server端的交互是否完畢，還要推斷server端是否正確返回了數據
     if(xmlhttp.readyState == 4){
     //表示和server端的交互已經完畢
        if(xmlhttp.status == 200){
        //表示server的是響應代碼是200。正確返回了數據
           var message=xmlhttp.responseText;
           //XML數據相應的DOM對象的接受方法
           //使用的前提是，server端須要設置contenttype為text/xml
                        
           //記憶像div標簽中填充文本內容的方法
           var div=document.getElementById("message");
           div.innerHTML=message;
           alert(array);
        }
     }

    

   總結

  初步了解XMLHTTPRequest對象的使用，便於以后更深入的去了解和使用。