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

出處： https://takhello.github.io/

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

1.創建XMLHttpRequest組建

2.設置回調函數

3.初始化XMLHttpRequest組建

4.發送請求

實例代碼：

[javascript]  

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("登錄失敗！");    

        }           

    }    

}  

 

 

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

[javascript]  

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() {  

    //接收響應數據  www.2cto.com

    //判斷對象狀態是否交互完成，如果為4則交互完成  

    if(xmlhttp.readyState == 4) {  

         //判斷對象狀態是否交互成功,如果成功則為200  

        if(xmlhttp.status == 200) {  

            //接收數據,得到服務器輸出的純文本數據  

            var response = xmlhttp.responseText;  

            //得到div的節點將數據顯示在div上  

            var divresult = document.getElementById("result");  

            divresult.innerHTML = response;  

        }  

    }  

}   

[javascript]  

<span style="color:#ffffff;"></span>  

[plain]

出處： https://takhello.github.io/