AJAX 可以使網頁實現異步更新，XMLHttpRequest 是 AJAX 的基礎，大部分瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）,XMLHttpRequest對象基於HTTP協議用於在後臺與服務器交換數據。
HTTP/1.1 協議規定的 HTTP 請求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 這幾種。其中 POST 一般用來向服務端提交數據，這裡主要說 POST 提交數據的方式。HTTP 協議是以 ASCII 碼傳輸，建立在 TCP/IP 協議之上的應用層規範。規範把 HTTP 請求分為三個部分：狀態行、請求頭、消息主體。
數據發送出去，需要服務端解析，一般服務端語言如 php、python 等，以及它們的 framework，都內置了自動解析常見數據格式的功能。服務端通常是根據請求頭（headers）中的 Content-Type 字段來獲知請求中的消息主體是用何種方式編碼，再對主體進行解析。所以說到 POST 提交數據方案，包含了 Content-Type 和消息主體編碼方式兩部分。Cntent-Type有以下常見4種類型：
（1） application/x-www-form-urlencoded
這應該是最常見的 POST 提交數據的方式了。瀏覽器的原生 form 表單，如果不設置 enctype 屬性，那麼最終就會以 application/x-www-form-urlencoded 方式提交數據。
（2）multipart/form-data
這又是一個常見的 POST 數據提交的方式。我們使用表單上傳文件時，必須讓 form 的 enctyped 等於這個值。
（3）application/json
現在越來越多的人把它作為請求頭，用來告訴服務端消息主體是序列化後的 JSON 字符串。因為JSON的規範，數據不容易出錯。
（4）text/xml
它是一種使用 HTTP 作為傳輸協議，XML 作為編碼方式的遠程調用規範。
這裡需要注意的是在調用某個接口是，一定要注意接口請求的方式，如果是post，對應的enctype是什麼（即請求時選擇Content-Type為哪種類型）
這裡以某個笑話接口為例，這裡客服端為jquery的ajax，服務端沒有展示：
（1）默認Content-Type 為application/x-www-form-urlencoded：
$.ajax({
type: 'post',
url: 'http://route.showapi.com/jiekou',
dataType: 'json',
data: {
"showapi_appid": '666666', //這裡需要改成自己的appid
"showapi_sign": '67596029af7b4cb8bc7afe1c6ffd2333', //這裡需要改成自己的應用的密鑰secret
"page":"1",
"maxResult":"20"
},
error: function(XmlHttpRequest, textStatus, errorThrown) {
alert("操作失敗!");
},
success: function(result) {
console.log(result) //console變量在ie低版本下不能用
alert(result.showapi_res_code)
}
});
在chorme中調試顯示：
提交的原始數據
（2）content-type:application/json
var jsonstr={
"showapi_timestamp": formatterDateTime(),
"showapi_appid": '66666', //這裡需要改成自己的appid
"showapi_sign": '67596029af7b4cb8bc7afe1c6ffd2333', //這裡需要改成自己的應用的密鑰secret
"page":"1",
"maxResult":"20"
}
$(function(){
$('#create-user').click(function(){
$.ajax({
type: 'post',
url: 'http://route.showapi.com/341-1',
dataType: 'json',
data: JSON.stringify(jsonstr), //轉換為json字符串
contentType:"application/json",
error: function(XmlHttpRequest, textStatus, errorThrown) {
alert("操作失敗!");
},
success: function(result) {
console.log(result) //console變量在ie低版本下不能用
alert(result.showapi_res_code)
}
});
});
在chorme中調試顯示：
客服端提交的原始數據：
補充知識點：
JSON字符串與JSON對象的區別
JSON對象:
var str2 = { "name": "cool", "sex": "man" };
JSON字符串:
var str1 = '{ "name": "haha", "sex": "woman" }';
js中如何轉換：
1、JSON字符串轉換為JSON對象
var obj = eval(‘(’ + str1+ ‘)’);//eval()函數是js自帶方法
var obj = JSON.parse(str1); //瀏覽器支持的轉換方式
var obj = $.parseJSON( str1);//jQuery方式
var obj = str1.parseJSON();//引用json.js
2、JSON對象轉換為JSON字符串
var s=JSON.stringify(str2); //瀏覽器支持的轉換方式
var s=str2.toJSONString(); //引用json.js
轉載地址：https://blog.51cto.com/13238147/2126598
閱讀更多 思夢PHP 的文章
