JavaScript中get和post的差別

淺談get和post請求的差別：

首先這兩種請求方式名字都有所差別；其次在AJAX異步網絡請求中，get和post的傳參方式不同，get是在url中，而post是在send裡面。get請求因為資料參數是報錄在url中的，是以安全性較低，假如密碼是不允許暴露的情況，則不能使用get請求方式，post的請求參數是放在請求頭的，是以安全性較高。兩者的另外一個差別是post請求必須有請求頭：setRequestHeader('Content-type','application/x-www-form-urlencoded');

注意:我所使用的是在Hbuilder編輯器裡面配置好了的PHP背景環境，必須同域，127.0.0.1

原生AJAX的get請求過程：

AJAX網絡請求步驟:(以打電話為例)

//1.建立網絡請求對象 - XMLHttpRequest(首先,得有部手機);     
var ajax;
if(window.XMLHttpRequest){
//現代浏覽器建立對象
    ajax=new XMLHttpRequest();
} else{
    //IE浏覽器
    ajax=new ActiveXObject("Microsoft.XMLHTTP");
}

//2.建立請求對象 ===(撥号)
//方法:open(請求方式,請求的url位址,是否異步請求)  
//為了防止緩存,添加事件戳
var nowTime=new Date();
var time=nowTime.getTime();//擷取時間戳
ajax.open("get","17Ajax.php?t="+time,true);//get傳參方式 

//3.發送請求,向伺服器發送請求  --  (打電話)
ajax.send(null);

//4.檢測狀态 --- 為的是接收伺服器傳回的資料(等待電話的結果)
ajax.onreadystatechange=function(){
    //網絡請求的狀态 1  2  3  4
    console.log(ajax.readyState);
    if(ajax.readyState==4){
        //4.說明資料接收成功
        //ajax.status  伺服器傳回的狀态碼
        console.log(ajax.status);
        //200~206請求成功傳回狀态碼
        //304請求成功,處理緩存
        //400~404請求失敗
        if(ajax.status>=200&&ajax.status<=206||ajax.status==304){
            //資料請求成功,傳回請求的資料
            //ajax.responseText  接收背景傳回的資料
            var data=ajax.responseText;
            console.log("背景傳回的資料為:"+data);//擷取到的是JSON字元串               
            //p1.innerHTML=data[0];
            //将JSON字元串轉換為JSON對象
            var jsonData=JSON.parse(data);
            console.log(jsonData.data.yesterday.type);
            p1.innerHTML=jsonData.data.yesterday.type;
            //顯示風力
            for(var i=0;i<jsonData.data.forecast.length;i++){
                //建立li,顯示風力等級
                var li=document.createElement("li");
                li.innerHTML=jsonData.data.forecast[i].fengli;
                ul1.appendChild(li);
                //var li=document.createElement(li);
                var p=document.createElement("p");
                p.innerHTML=jsonData.data.forecast[i].data;
                document.body.appendChild(p);
            }

         }else{
            //請求失敗
            console.log("error:"+ajax.status);
         }
       }
     }      

原生AJAX的post請求過程：

//1.建立ajax對象
       var ajax;
       if(window.XMLHttpRequest) {
         //現代浏覽器建立對象
         ajax = new XMLHttpRequest();
       } else {
         //IE浏覽器
         ajax = new ActiveXObject("Microsoft.XMLHTTP");
       }

       //2.建立請求對象
       ajax.open("POST","22register.php",true);
       //如果是get請求方式，傳參方式（下面注釋了）
       //ajax.open("get","17Ajax.php?t="+time,true);//get傳參方式,url中寫
       //如果是post請求方式，則需要設定請求頭
       ajax.setRequestHeader('Content-type','application/x-www-form-urlencoded');

       //3.發送請求傳遞給背景
       //user = 123&pw=234 
 ajax.send("username="+userInput.value+"&password="+passInput.value+"&phone="+phoneInput.value+"&email="+emailInput.value);

       //4.檢測狀态

       ajax.onreadystatechange = function(){

         if(ajax.readyState == 4){

            if(ajax.status >= 200 && ajax.status <= 206 || ajax.status == 304){

              //擷取請求到的背景傳回的資料

              console.log(ajax.responseText);

              //JSON解析

              var obj = JSON.parse(ajax.responseText);

              if(obj.msg == "ok"){

                location.href = "23login.html";

              }else{//注冊失敗

                alert(obj.msg);

              }

            }else{

              //請求失敗

              console.log(ajax.status);

            }

         }

       }