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);

            }

         }

       }