基於$.ajax()方法從服務器獲取json數據的幾種方式總結

壹．什麽是json

json是壹種取代xml的數據結構，和xml相比，它更小巧但描述能力卻很強，網絡傳輸數據使用流量更少，速度更快。

json就是壹串字符串，使用下面的符號標註。

{鍵值對} ： json對象

[{},{},{}] ：json數組

"" ：雙引號內是屬性或值

: ：冒號前為鍵，後為值（這個值可以是基本數據類型的值，也可以是數組或對象），所以 {"age": 18} 可以理解為是壹個包含age為18的json對象，而[{"age": 18},{"age": 20}]就表示包含兩個對象的json數組。也可以使用{"age":[18,20]}來簡化上面的json數組，這是壹個擁有壹個age數組的對象。

二．$.ajax()方法中dataType屬性的取值

$.ajax()方法中dataType屬性要求為String類型的參數，預期服務器返回的數據類型。如果不指定，JQuery將自動根據http包mime信息返回responseXML或responseText在第三部分解釋，並作為回調函數參數傳遞。可用的類型如下：

xml：返回XML文檔，可用JQuery處理。

html：返回純文本HTML信息；包含的script標簽會在插入DOM時執行。

script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。註意在遠程請求時（不在同壹個域下），所有post請求都將轉為get請求。

json：返回JSON數據。

jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換後壹個“?”為正確的函數名，以執行回調函數。

三．Mime數據類型及response的setContentType()方法

什麽是MIME類型?在把輸出結果傳送到瀏覽器上的時候，瀏覽器必須啟動適當的應用程序來處理這個輸出文檔。這可以通過多種類型MIME（多功能網際郵件擴充協議）來完成。在HTTP中，MIME類型被定義在Content-Type header中。

例如，架設妳要傳送壹個Microsoft Excel文件到客戶端。那麽這時的MIME類型就是“application/vnd.ms-excel”。在大多數實際情況中，這個文件然後將傳送給 Execl來處理（假設我們設定Execl為處理特殊MIME類型的應用程序）。在Java中，設定MIME類型的方法是通過Response對象的ContentType屬性。比如常用：response.setContentType("text/html;charset=UTF-8")進行設置。

最早的HTTP協議中，並沒有附加的數據類型信息，所有傳送的數據都被客戶程序解釋為超文本標記語言HTML 文檔，而為了支持多媒體數據類型，HTTP協議中就使用了附加在文檔之前的MIME數據類型信息來標識數據類型。

每個MIME類型由兩部分組成，前面是數據的大類別，例如文本text、圖象image等，後面定義具體的種類。

常見的MIME類型：

超文本標記語言文本 .html,.html text/html

普通文本 .txt text/plain

RTF文本 .rtf application/rtf

GIF圖形 .gif image/gif

JPEG圖形 .ipeg,.jpg image/jpeg

au聲音文件 .au audio/basic

MIDI音樂文件 mid,.midi audio/midi,audio/x-midi

RealAudio音樂文件 .ra, .ram audio/x-pn-realaudio

MPEG文件 .mpg,.mpeg video/mpeg

AVI文件 .avi video/x-msvideo

GZIP文件 .gz application/x-gzip

TAR文件 .tar application/x-tar

客戶程序從服務器上接收數據的時候，它只是從服務器接受數據流，並不了解文檔的名字，因此服務器必須使用附加信息來告訴客戶程序數據的MIME類型。

服務器在發送真正的數據之前，就要先發送標誌數據的MIME類型的信息，這個信息使用Content-type關鍵字進行定義，例如對於HTML文檔，服務器將首先發送以下兩行MIME標識信息,這個標識並不是真正的數據文件的壹部分。

Content-type: text/html

註意，第二行為壹個空行，這是必須的，使用這個空行的目的是將MIME信息與真正的數據內容分隔開。

如前面所說，在Java中，設定MIME類型的方法是通過Response對象的ContentType屬性,設置的方法是使用response.setContentType(MIME)語句，response.setContentType(MIME)的作用是使客戶端瀏覽器，區分不同種類的數據，並根據不同的MIME調用瀏覽器內不同的程序嵌入模塊來處理相應的數據。

Tomcat的安裝目錄\conf\web.xml中就定義了大量MIME類型，可以參考。比如可以設置：

response.setContentType("text/html; charset=utf-8"); html

response.setContentType("text/plain; charset=utf-8"); 文本

application/json json數據

這個方法設置發送到客戶端的響應的內容類型，此時響應還沒有提交。給出的內容類型可以包括字符編碼說明，例如：text/html;charset=UTF-8。如果該方法在getWriter()方法被調用之前調用，那麽響應的字符編碼將僅從給出的內容類型中設置。該方法如果在getWriter()方法被調用之後或者在被提交之後調用，將不會設置響應的字符編碼，在使用http協議的情況中，該方法設置 Content-type實體報頭。

四．使用$.ajax()方法獲取json數據的三種方式

dataType參數的配置決定了jquery如何幫助我們自動解析服務器返回的數據，有幾種方式可以獲取後臺返回的json字符串並解析為json對象，下面是Java為例解釋，下面三中方式的結果都是圖壹所示，項目運行在內網，無法截圖，只能拍照，見諒。

1、$.ajax()參數中不設置dataType，後臺response也不設置返回類型，則默認會以普通文本處理response.setContentType("text/html;charset=utf-8");也是作為文本處理，js中需要手動使用eval()或$.parseJSON()等方法將返回的字符串轉換為json對象使用。

//Java代碼：後臺獲取單個數控定位器的歷史表格的數據

public void getHistorySingleData() throws IOException{

HttpServletRequest request = ServletActionContext.getRequest();

HttpServletResponse response = ServletActionContext.getResponse();

response.setHeader("Content-type", "text/html;charset=UTF-8");

response.setContentType("text/html;charset=utf-8");

String deviceName = request.getParameter("deviceName");

String startDate= request.getParameter("startDate");

String endDate = request.getParameter("endDate");

SingleHistoryData[] singleHistoryData = chartService.getHistorySingleData(deviceName,startDate, endDate);

System.out.println(singleHistoryData.length);

System.out.println(JSONArray.fromObject(singleHistoryData).toString());//打印：[{"time":"2016-11-11 10:00:00","state":"運行","ball":"鎖緊",....},{"time":"2016-11-11 10:00:05","state":"運行","ball":"鎖緊",....},{},{}....]查到幾條singleHistoryData對象就打印幾個對象的信息{"time":"2016-11-11 10:00:05","state":"運行","ball":"鎖緊",....}

response.getWriter().print(JSONArray.fromObject(singleHistoryData).toString());

}

/*js代碼：選擇查詢某壹時間段的數據，點擊查詢之後進行顯示*/

$("#search").click(function () {

var data1 = [];

var n;

var deviceName=$("body").attr("id");

var startDate = $("#startDate").val();

var endDate = $("#endDate").val();

$.ajax({

url:"/avvii/chart/getHistorySingleData",

type:"post",

data:{

"deviceName":deviceName,

"startDate": startDate,

"endDate": endDate

success: function (data) {

alert(data);//---->彈出[{"time":"2016-11-11 10:00:00","state":"運行","ball":"鎖緊",....},{"time":"2016-11-11 10:00:05","state":"運行","ball":"鎖緊",....},{},{}....]，後臺傳過來幾條singleHistoryData對象就打印幾個對象的信息{"time":"2016-11-11 10:00:05","state":"運行","ball":"鎖緊",....}

alert(Object.prototype.toString.call(data)); //--->彈出[object String]，說明獲取的是String類型的數據

var JsonObjs = eval("(" + data + ")"); //或者：var JsonObjs = $.parseJSON(data);

alert(JsonObjs);//alert(JsonObjs);---->彈出[object Object],[object Object],[object Object][object Object],[object Object],[object Object]?後臺傳過來幾條singleHistoryData對象就打印幾個[object Object]

n=JsonObjs.length;

if(n==0){

alert("您選擇的時間段無數據，請重新查詢");

}

for(var i = 0; i < JsonObjs.length; i++){

var name = JsonObjs[i]['time'];//針對每壹條數據：JsonObjs[i]，或者：JsonObjs[i].time

var state = JsonObjs[i]['state'];

var ball = JsonObjs[i]['ball'];

var xd = JsonObjs[i]['xd'];

var yd = JsonObjs[i]['yd'];

var zd = JsonObjs[i]['zd'];

var xf = JsonObjs[i]['xf'];

var yf = JsonObjs[i]['yf'];

var zf = JsonObjs[i]['zf'];

data1[i] = {name:name,state:state,ball:ball,xd:xd,yd:yd,zd:zd,xf:xf,yf:yf,zf:zf};//個數與下面表頭對應起來就可以了，至於叫什麽名字並不影響控件的使用

}

if(JsonObjs.length != 10){

for(var j=0;j<(10-((JsonObjs.length)%10));j++){ //補全最後壹頁的空白行，使表格的長度保持不變

data1[j+JsonObjs.length] = {name:" ",state:"",ball:"",xd:"",yd:"",zd:"",xf:"",yf:"",zf:""};

}

var userOptions = {

"id":"kingTable", //必須表格id

"head":["時間","運行狀態","球頭狀態","X向位置/mm","Y向位置/mm","Z向位置/mm","X向承載力/Kg","Y向承載力/Kg","Z向承載力/Kg"], //必須 thead表頭

"body":data1, //必須 tbody 後臺返回的數據展示

"foot":true, // true/false 是否顯示tfoot --- 默認false

"displayNum": 10, //必須默認 10 每頁顯示行數

"groupDataNum":6, //可選默認 10 組數

sort:false, // 點擊表頭是否排序 true/false --- 默認false

search:false, // 默認為false 沒有搜索

lang:{

gopageButtonSearchText:"搜索"

}

var cs = new KingTable(null,userOptions);

}

});

2、$.ajax()參數中設置dataType="json"，則jquery會自動將返回的字符串轉化為json對象。後臺可以設置為：推薦response.setContentType("text/html;charset=utf-8");或者response.setContentType("application/json;charset=utf-8");

//Java代碼：後臺獲取單個數控定位器的歷史表格的數據

public void getHistorySingleData() throws IOException{

HttpServletRequest request = ServletActionContext.getRequest();

HttpServletResponse response = ServletActionContext.getResponse();

response.setHeader("Content-type", "text/html;charset=UTF-8");

response.setContentType("text/html;charset=utf-8");

String deviceName = request.getParameter("deviceName");

String startDate= request.getParameter("startDate");

String endDate = request.getParameter("endDate");

SingleHistoryData[] singleHistoryData = chartService.getHistorySingleData(deviceName,startDate, endDate);

System.out.println(singleHistoryData.length);

response.getWriter().print(JSONArray.fromObject(singleHistoryData).toString());

}

/*js代碼：頁面首次加載時，顯示規定時間段的數據*/

var data1 = [];

var deviceName=$("body").attr("id");

var startDate = $("#startDate").val("2000-01-01 00:00:00");

var endDate = $("#endDate").val("2018-01-01 00:00:00");

$.ajax({

url:"/avvii/chart/getHistorySingleData",

type:"post",

data:{

"deviceName":deviceName,

"startDate": "2000-01-01 00:00:00",

"endDate": "2018-01-01 00:00:00"

dataType:"json",

success: function (data) {

alert(data);//---->彈出[object Object],[object Object],[object Object][object Object],[object Object],[object Object]?後臺傳過來幾條singleHistoryData對象就打印幾個json對象：[object Object]

for(var i = 0; i < data.length; i++){

var name = data[i]['time'];

var state = data[i]['state'];

var ball = data[i]['ball'];

var xd = data[i]['xd'];

var yd = data[i]['yd'];

var zd = data[i]['zd'];

var xf = data[i]['xf'];

var yf = data[i]['yf'];

var zf = data[i]['zf'];

data1[i] = {name:name,state:state,ball:ball,xd:xd,yd:yd,zd:zd,xf:xf,yf:yf,zf:zf};

}