记一次有关GET/POST请求的Debug经历

Bug描述

电商网站, 产品列表页面，加入购物车按钮，当连续点击“加入购物车”按钮时，在MAC上的Safari上，只会有部分请求通过 Ajax 被发送出去，而在 Chrome/IE/Firefox 上是没有这个问题的(每点击一次就发送一次请求)。

分析

首先怀疑是浏览器兼容的问题, 因为其他浏览器上都是没问题的, 但是这个功能是由 jQuery.ajax 实现的, 对于jQuery来说, 这么明显的缺陷是不会出现的, 所以这种可能排除；既然不是兼容问题, 那么最有可能就是我的jQuery.ajax请求写的有问题, 代码如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


$.ajax({
    url: 'http://www.mydomain.com/checkout/cart/ajaxAdd',
    data: {product: product, form_key: form_key, qty: qty},
    complete: function (xhr, event) {
        var response = JSON.parse(xhr.responseText);

        if(response.status){
            //TODO something when success
        }else{
            //TODO something when failure
        }
    }
});

看起来没有显示声明 async: true, 添加上之后Bug没有改善

后来突然灵光一现, GET 是从服务端上获取数据, POST 是向服务端发送数据, 虽然 GET 请求也可以传参，但是 GET 本质上是为了获取数据，会不会是 Safari 上的 GET 比较特殊，当上一次请求未完成时会忽略后面相同的请求? 添加上 type: ‘POST’后, 刷新页面, 果然问题解决了。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


$.ajax({
    type: 'POST',
    async: true,
    url: 'http://www.mydomain.com/checkout/cart/ajaxAdd',
    data: {product: product, form_key: form_key, qty: qty},
    complete: function (xhr, event) {
        var response = JSON.parse(xhr.responseText);

        if(response.status){
            //TODO something when success
        }else{
            //TODO something when failure
        }
    }
});

总结

有关 GET 和 POST 的区别网上说的很多了, 比如 GET 请求的参数是直接编码在 URL 里的, 而 POST 请求的参数经过编码后保存在报文主体里; GET 请求传输数据量大小有限而 POST 请求传输数据量无限, 等等, 以上都是各种浏览器或者客户端对 HTTP 协议中的 GET 和 POST 的实现, 其实都不是 GET 和 POST 的本质区别，HTTP 协议中规定的 GET 和 POST 的区别很简单，就是 “GET 是从服务端上获取数据, POST 是向服务端发送数据”。