get 和 post 详解，原生、jQuery、axios

以下为找到的各种资源总结，非原创。

1.http中get和post的区别
GET一般用于获取/查询资源信息，而POST一般用于更新资源信息。
1.根据HTTP规范，GET用于信息获取，而且应该是安全的和幂等的。所谓安全的意味着该操作用于获取信息而非修改信息。换句话说，GET 请求一般不应产生副作用。就是说，它仅仅是获取资源信息，就像数据库查询一样，不会修改，增加数据，不会影响资源的状态
注意：这里安全的含义仅仅是指是非修改信息。
(2).幂等的意味着对同一URL的多个请求应该返回同样的结果（部分浏览器会缓存GET请求的response，以至于相同的GET请求会得到相同的response即使服务端的数据已经改变，POST不会被缓存）
2.根据HTTP规范，POST表示可能修改变服务器上的资源的请求
涉及到数据库的增删改查使用post

表面现像上面看看GET和POST的区别：
1.GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，参数之间以&相连，如：login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0%E5%A5%BD。如果数据是英文字母/数字，原样发送，如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII
POST把提交的数据则放置在是HTTP包的包体中。
2. 提交数据的限制：
（1）”GET方式提交的数据最多只能是1024字节”，因为GET是通过URL提交数据，那么GET可提交的数据量就跟URL的长度有直接关系了。而实际上，URL不存在参数上限的问题，HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系统的支持。
注意这是限制是整个URL长度，而不仅仅是你的参数值数据长度
（2）理论上讲，POST是没有大小限制的，HTTP协议规范也没有进行大小限制，说“POST数据量存在80K/100K的大小限制”是不准确的，POST数据是没有限制的，起限制作用的是服务器的处理程序的处理能力理论上讲，POST是没有大小限制的，HTTP协议规范也没有进行大小限制，说“POST数据量存在80K/100K的大小限制”是不准确的，POST数据是没有限制的，起限制作用的是服务器的处理程序的处理能力
3.POST的安全性要比GET的安全性高。注意：这里所说的安全性和上面GET提到的“安全”不是同个概念。上面“安全”的含义仅仅是不作数据修改，而这里安全的含义是真正的Security的含义，比如：通过GET提交数据，用户名和密码将明文出现在URL上，因为(1)登录页面有可能被浏览器缓存，(2)其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了，除此之外，使用GET提交数据还可能会造成Cross-site request forgery攻击。
　总结一下，Get是向服务器发索取数据的一种请求，而Post是向服务器提交数据的一种请求，在FORM（表单）中，Method默认为”GET”，实质上，GET和POST只是发送机制不同，并不是一个取一个发！

原生发送Http请求：

      <script type="text/javascript">
             //使用http请求的步骤
             //第一步：创建XMLHttpRequest对象
            var request = function(){
          if(window.XMLHttpRequest === undefined){
          //在ie5和ie6中模拟XMLHttpRequest构造函数
            window.XMLHttpRequest = function(){
                try{
                return new ActiveXObject("Msxml2.XMLHTTP.6.0");
                }catch(el){
                try{
                 return new ActiveXObject("Msxml2.XMLHTTP.3.0");
                 }catch(e2){
                  throw new Error("出错了！");
                 }
            }
          }
         }else{
             return new XMLHttpRequest();
         }
     }
   //第二步：调用XMLHttpRequest对象的open()方法指定请求的两个必须部分，即方法和URL
            /* * 第一个参数指定http方法和动作
            * 第二个参数指定是URL是请求的主题，当时跨域请求时会报错
          * */
         request.open("GET", url);           
               /*
     * 第三部：如果有请求头的话，请求进程下个步骤就是设计它
      * 例如POST请求需要“Content-Type”头指定请求主题的MIME*/
      request.setRequestHeader("Content-Type", "text/Plain");
     /* 第四步：使用XMLHttpRequest发起http请求的最后一步是指定可选的请求主题并向
          * 服务器发送它，使用send()方法*/
         request.send(null);
        /*注意GET请求绝对没有主体，所以应该传递null或者省略这个参数
        * POST请求通常拥有主体，同时它应该匹配使用setRequestHeader()指定Content-Type头
            * http求情的顺序：
            * 请求方法和URL首先到达，然后是请求头，
          * 最后是请求主体*/           
      //实例：
          function postMessage(msg){
            var request = new XMLHttpRequest();//新请求
              request.open("POST", "./log.php");//用post向服务器发送脚本
             request.setRequestHeader("Content-Type", "text/Plain;charset=UTF-8");//纯文本请求体
         request.send(msg);
       }
            /*解析http响应
       * 当响应到达时，把它以解析后的XML document对象、解析后的json对象
       * 或字符串形式传递给回调函数*/
       function get(url, callback){
          var request = new XMLHttpRequest();//新请求
             request.open("GET", url);
             request.onreadystatechange = function(){
         if(request.readyState === 4 && request.status === 200){
        var type = request.getResponseHeader("Content-Type");
        //获得响应类型
        if(type.indexof("xml") !== -1 && request.responseXML){
        callback(request.responseXML);//document对象响应
      }else if(type === "application/json"){                                     callback(JSON.parse(request.responseText));//json响应
           }else{
     callback(request.responseText);//字符串响应
          }
        }
    }
   request.send(null);
            }
          /*
        * 表单编码请求
        * 如果html表单的名/值对，使用application/x-www-form-urlencode格式*/
         function encodeFormData(data){
              if(!data){
                   return "";//一直返回字符串
              }
         var pairs = [];
       for(var name in data){           
       if (!data.hasOwnProperty(name)) {//判断一个对象是否有你给出名称的属性或对象
         continue;
     } 
           if(typeof data[name] === "function"){
               continue;
            }
       var value = data[name].toString();
      name = encodeURIComponent(name.replace("%20", "+"));//编码名称           value = encodeURIComponent(value.replace("%20", "+"));
        pairs.push(name + "=" + value);
               }
     return pairs.join('&');
      }
          /*
          *使用表单编码数据发起一个http post请求*/
         function postData(url, data, callback){
           var request = new XMLHttpRequest();//新请求
           request.open("POST", url);//用post向服务器发送脚本
        request.onreadystatechange = function(){
            if(request.readyState === 4 && callback){
                 callback(request);//调用回调函数
                 }
           };
           request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//纯文本请求体
          request.send(encodeFormData(data));//发送表单编码的数据
          }
                      /*
           *使用表单编码数据发起一个http get请求*/
      function postData(url, data, callback){
              var request = new XMLHttpRequest();//新请求
             request.open("GET", url + "?" + encodeFormData(data));//用post向服务器发送脚本
            request.onreadystatechange = function(){
                  if(request.readyState === 4 && callback){
                       callback(request);//调用回调函数
               }
         };
                 request.send(null);//发送表单编码的数据
          }            
           /*
           *使用json编码的请求*/
            function postData(url, data, callback){
                var request = new XMLHttpRequest();//新请求
               request.open("POST", url);//用post向服务器发送脚本

                request.onreadystatechange = function(){
                    if(request.readyState === 4 && callback){
                      callback(request);//调用回调函数
                  }
               };

           request.setRequestHeader("Content-Type", "application/json");//纯文本请求体
              request.send(JSON.stringify(data));//发送表单编码的数据
            }            
           /*
             *使用xml编码的请求*/
           function postQuery(url, what, radius, callback){
               var request = new XMLHttpRequest();//新请求
           request.open("POST", url);//用post向服务器发送脚本
           request.onreadystatechange = function(){
           if(request.readyState === 4 && callback){
             callback(request);//调用回调函数
           }
            };
   var doc   =document.implementation.createDocument("", "query", null);
                var query = doc.documentElement;
             var find = doc.createElement("find");
              query.appendChild(find);
               find.setAttribute("zipcode", where);
                find.setAttribute("radius", radius);
               find.appendChild(doc.createTextNode(what));//并设计<find>的内容

               //向服务器发送XML编码数据
               //注意将自动设置content-type头
                request.send(doc);//发送表单编码的数据
             }

            /*

           * 使用http post请求上传文件
              * 查找有data-uploadto属性的全部<input type="file">元素
            * 并注册onchang事件处理程序
           * 这样任何选择的文件都会自动通过post方法发送到指定的"uploadto" url
           * 服务器的响应式忽略的*/

           window.onload = function(){
                var elts = document.getElementsByName("input");

               for(var i=0; i<elts.length; i++){
                    var input = elts[i];

                  if(input.type != "fild"){
                        continue;
                }

 var url = input.getAttribute("data-uploadto");//获取上传URL

                  if(!url){
                      continue;
                   }
             input.addEventListener("change", function(){
                       var file = this.files[0];
                  if(!file){
                           return;
                     }
                   var xhr = new XMLHttpRequest();//新请求
                  xhr.open("POST", url);//用post向服务器发送脚本
                      xhr.send(file);
                 }, false)
             }
         }
       </script>

原生的比较麻烦，，，使用jQuery发送http请求

1. jQuery load() 方法

   $.load(URL,data,callback) 方法是从服务器加载数据，并且把得到的数据放入被选元素中

   a.  url是要访问的地址。

   b.  可选参数data是与请求一同发送的查询字符串键/值对集合。

   c.  可选参数callback 是回调函数。当load()方法执行完后执行该函数。



2. JQuery  POST()方法

    $.post(URL,data,callback)方法是想服务器发起post请求。

   a.url为要访问的地址

   b.data为与请求一同发送的查询字符串键/值对集合。

   c. 可选参数callback 是回调函数。当post()方法执行完后执行该函数。



3. JQuery  GET()方法

    $.get(URL,callback)方法是想服务器发起get请求。

   a.url为要访问的地址

   b. 可选参数callback 是回调函数。当get()方法执行完后执行该函数。


eg:
     $.post("http://localhost:8080/StrutsTest/loading!loading",
            {
                "userName":userName,
                "passW":passW
            },
            function (data,status) 
            { 
                    //data为服务器返回的数据    status为请求的状态。
            }
            );



          $.get("http://localhost:8080/StrutsTest/loading!loading?userName=xxx&passW=yyy",
        function(data)
           {
            });

jQuery发送Ajax请求
jQuery中ajax的4种常用请求方式：

1.$.ajax()返回其创建的 XMLHttpRequest 对象。
$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。
如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。
实例：
保存数据到服务器，成功时显示信息。 
 $.ajax({
        type: "post",
        dataType: "html",
        url: '/Resources/GetList.ashx',
        data: dataurl,
        success: function (data) {
            if (data != "") {
                $("#pager").pager({ pagenumber: pagenumber, pagecount: data.split("$$")[1], buttonClickCallback: PageClick });
                $("#anhtml").html(data.split("$$")[0]);

            }
        }
    });


2.通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
实例：
$.get("test.cgi", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  }); 



3. 通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
实例：
 $.post("/Resources/addfriend.ashx", { "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames }, function (data) {
        if (data == "ok") {
            alert("添加成功！");
        }
    })


4.通过 HTTP GET 请求载入 JSON 数据。
实例：
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
  $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo("#images");
    if ( i == 3 ) return false;
  });
}); 

axios
基于http客户端的promise，面向浏览器和nodejs
什么是promise
promise
特色
浏览器端发起XMLHttpRequests请求
node端发起http请求
支持Promise API
监听请求和返回
转化请求和返回
取消请求
自动转化json数据
客户端支持抵御

get 请求：

axios.get('/user?ID=1234')
.then(function(respone){
    console.log(response);
})
.catch(function(error){
    console.log(error);
});

//上面的请求也可选择下面的方式来写
axios.get('/user',{
    params:{
        ID:12345
    }
})
    .then(function(response){
        console.log(response);
    })
    .catch(function(error){
        console.log(error)
    });

post 请求：

axios.post('/user',{
    firstName:'friend',
    lastName:'Flintstone'
})
.then(function(response){
    console.log(response);
})
.catch(function(error){
    console.log(error);
});

更多axios的使用请查看：axios使用