使用JavaScript的XMLHttpRequest發送POST、GET請求以及接收返回值

使用XMLHttpRequest對象分爲4部完成:

1.創建XMLHttpRequest組建

2.設置回調函數

3.初始化XMLHttpRequest組建

4.發送請求

實例代碼:

    var userName;  
    var passWord;  
    var xmlHttpRequest;  
      
      
    //XmlHttpRequest對象  
    function createXmlHttpRequest(){  
        if(window.ActiveXObject){ //如果是IE瀏覽器  
            return new ActiveXObject("Microsoft.XMLHTTP");  
        }else if(window.XMLHttpRequest){ //非IE瀏覽器  
            return new XMLHttpRequest();  
        }  
    }  
      
    function onLogin(){  
        userName = document.f1.username.value;  
        passWord = document.f1.password.value;    
          
        var url = "LoginServlet?username="+userName+"&password="+passWord+"";     
              
        //1.創建XMLHttpRequest組建  
        xmlHttpRequest = createXmlHttpRequest();  
          
        //2.設置回調函數  
        xmlHttpRequest.onreadystatechange = zswFun;  
          
        //3.初始化XMLHttpRequest組建  
        xmlHttpRequest.open("POST",url,true);  
          
        //4.發送請求  
        xmlHttpRequest.send(null);    
    }     
      
      
    //回調函數  
    function zswFun(){  
        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){  
            var b = xmlHttpRequest.responseText;  
            if(b == "true"){  
                alert("登錄成功!");  
            }else{  
                alert("登錄失敗!");  
            }         
        }  
    }


================================================================================

var xmlhttp;
function verify1() {
    var username = document.getElementById("username").value;
    //確定瀏覽器
    if(window.XMLHttpRequest) {
        //針對FireFox、Mozillar、Opera、Safari、IE7、IE8
        //創建XMLHttpRequest對象
        xmlhttp = new XMLHttpRequest();
        //修正某些瀏覽器的BUG
        if(xmlhttp.overrideMimeType) {
            xmlhttp.overrideMimeType("text/html");
        }
    }else if(window.ActiveXObject){
        //針對IE5、IE5.5、IE6
        //這兩個爲插件名稱作爲參數傳遞,爲了創建ActiveXObject
        var activeName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for(var i=0;i>activeName.length();i++) {
              try{
                  //非別取出,如果創建成功則終止循環,如果失敗則會拋出異常繼續循環
                  xmlhttp = new ActiveXObject(activeName[i]);
                  break;
              }catch(e){
              }
        }
    }
    //確定XMLHttpRequest是否創建成功
    /*if(!xmlhttp) {
        alert("XMLHttpRequest創建失敗!");
        return;
    }else {
        alert("XMLHttpRequest創建成功!"+xmlhttp);
    }*/
    //註冊回調函數
    xmlhttp.onreadystatechange=callback;
    url = "classisservlet?name="+username;
    //設置連接信息
    //1.是http請求的方式
    //2.是服務器的地址
    //3.是採用同步還是異步,true爲異步
    //xmlhttp.open("GET",url,true);
    //post請求與get請求的區別
    //第一個參數設置成post第二個只寫url地址,第三個不變
    xmlhttp.open("POST","classisservlet",true);
    //post請求要自己設置請求頭
   xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //發送數據,開始與服務器進行交互
    //post發送請求
    xmlhttp.send("name="+username);
}
function callback() {
    //接收響應數據
    //判斷對象狀態是否交互完成,如果爲4則交互完成
    if(xmlhttp.readyState == 4) {
         //判斷對象狀態是否交互成功,如果成功則爲200
        if(xmlhttp.status == 200) {
            //接收數據,得到服務器輸出的純文本數據
            var response = xmlhttp.responseText;
            //得到div的節點將數據顯示在div上
            var divresult = document.getElementById("result");
            divresult.innerHTML = response;
        }
    }
} 


原文鏈接地址:http://www.cnblogs.com/hwx0807/archive/2011/06/28/2092205.html

發佈了53 篇原創文章 · 獲贊 3 · 訪問量 51萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章