记一次有关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 是向服务端发送数据”。

如果您觉得阅读本文对您有帮助，欢迎转载本文，但是转载文章之后必须在文章页面明显位置保留此段声明，否则保留追究法律责任的权利。

作　　者：www.jpdou.top

原文链接：http://www.jpdou.top/an-experience-of-debug-about-get-and-post/