api介面中ajax資料請求與資料返回的小坑

標籤：ajax資料請求   JSON對象和字串   

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

api介面中ajax資料請求與資料返回的小坑