原生JavaScript中的Ajax异步网络请求中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   不能跨域请求    ---    AJAX请求具有同源策略的特点,不能进行跨域请求

//   同源:必须协议,服务器地址(域名),端口号都一样,叫做同源

原生AJAX的post请求过程：

//ajax网络请求，将数据传输给后台

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

            }

         }

       }

声明:个人才疏学浅，是一个热爱文学的前端程序员，平日喜欢推敲文字，初入前端的世界，一切都是新的，如有错误欢迎大佬们指出，洗耳恭听！！本人喜交朋友，有打算做自媒体。欢迎指教！

微信公众号：青衫北笙

微博：尔嵘