HTTP請求中的form data和request payload的區別

今天幫朋友調試一個程序時發現用jQuery的ajax方法和post方法分別發送請求，在後臺Servlet進行處理時結果是不同的，好比用$.ajax方法發送請求時（data參數是一個JSON.stringify()處理後的字符串，而不是一個JSON對象），servlet裏能夠這樣使用Gson來解析：

new Jsonparser().parse(request.getReader())

但此時是不可用request.getParam(key) 來取值的。

若是用$.post方法來發送請求（data參數是一個JSON對象,而不要再用JSON.stringify()處理爲字符串了），結果偏偏相反。

在Chrome中調試發現，$.ajax發送的請求顯示在request payload下面，而使用$.post方法發送的請求顯示在form data下面。有什麼區別呢？在萬能的stackoverflow上找到答案了，有人問了這個問題What is the difference between form data and request payload?：

When I send an AJAX Post request and send parameters in queryString in send() method,Chrome Developer Tool’s XHR capture tool shows the parameters under request payload. and when I use jquery’s post function, The tool shows parameters under Form Data section.

What is the difference ?

回答是：

you have not provided enough information how you use the send function, but I assume that you do not set mime type to specify you are sending form data

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

the data sent are in this case encoded as you encode a query string

xhr.send("name=foo&value=bar");

otherwise it will not be interpreted as form data by Developer Tools. jquery does majority of work for you in this regard.

關鍵就是設置Content-type這個Header爲application/x-www-form-urlencoded，實際上對於常規的HTML頁面上的form的Content-type默認就是這個值。

類似的問題還發生在AngularJS的$http方法中，How can I make angular.js post data as form data instead of a request payload? 這個問題居然有77個「頂」，看來遇到此問題的人還真很多。

注：這個問題裏說jQuery的ajax方法是能夠的，我今天遇到是不能夠的，這個須要再驗證一下。

固然解決的方法是同樣的：

$http({ method: 'POST', url: url, data: xsrf, headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

ArgularJS的$http方法還支持全局設置：

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

還有人專門針對這個問題寫了篇博客，分析了緣由Make AngularJS $http service behave like jQuery.ajax()

The difference is in how jQuery and AngularJS serialize and transmit the data. Fundamentally, the problem lies with your server language of choice being unable to understand AngularJS’s transmission natively—that’s a darn shame because AngularJS is certainly not doing anything wrong. By default, jQuery transmits data using Content-Type: x-www-form-urlencoded and the familiar foo=bar&baz=moe serialization. AngularJS, however, transmits data using Content-Type: application/json and { 「foo」: 「bar」, 「baz」: 「moe」 } JSON serialization, which unfortunately some Web server languages—notably PHP—do not unserialize natively.

固然文章了給出了另外的一種處理方案，還沒細讀，這個問題先記錄在這裏，之後再作些例子來詳細研究一下。

另外,若是作Server端的API，默認支持哪一種請求爲好呢？