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

水深无声 2022-05-15 22:11 179阅读 0赞

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

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请求：

原生的比较麻烦，，，使用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使用][axios]

[promise]: https://blog.csdn.net/baidu_34449164/article/details/70059737
[axios]: https://blog.csdn.net/garyhu1/article/details/73188165