jQuery使用Ajax操作JSON格式資料說明

JSON(JavaScript Object Notation)是一種輕量級的資料交換格式。JSON儲存了以“Key-Value”為結構的資料。有時候我們需要讀取JSON格式的資料檔案，在jQuery中可以使用Ajax或者 $.getJSON()方法實現。

先看看API中對$.ajax()的介紹

jQuery.ajax(url,[settings])
概述
通過 HTTP 要求載入遠端資料。

jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。$.ajax() 返回其建立的 XMLHttpRequest 對象。大多數情況下你無需直接操作該函數，除非你需要操作不常用的選項，以獲得更多的靈活性。

最簡單的情況下，$.ajax()可以不帶任何參數直接使用。

注意，所有的選項都可以通過$.ajaxSetup()函數來全域設定。

回呼函數

如果要處理$.ajax()得到的資料，則需要使用回呼函數。beforeSend、error、dataFilter、success、complete。

beforeSend 在發送請求之前調用，並且傳入一個XMLHttpRequest作為參數。
error 在請求出錯時調用。傳入XMLHttpRequest對象，描述錯誤類型的字串以及一個異常對象（如果有的話）
dataFilter 在請求成功之後調用。傳入返回的資料以及"dataType"參數的值。並且必須返回新的資料（可能是處理過的）傳遞給success回呼函數。
success 當請求之後調用。傳入返回後的資料，以及包含成功碼的字串。
complete 當請求完成之後調用這個函數，無論成功或失敗。傳入XMLHttpRequest對象，以及一個包含成功或錯誤碼的字串。
資料類型

$.ajax()函數依賴伺服器提供的資訊來處理返回的資料。如果伺服器報告說返回的資料是XML，那麼返回的結果就可以用普通的XML方法或者jQuery的選取器來遍曆。如果見得到其他類型，比如HTML，則資料就以文本形式來對待。

通過dataType選項還可以指定其他不同資料處理方式。除了單純的XML，還可以指定 html、json、jsonp、script或者text。

其中，text和xml類型返回的資料不會經過處理。資料僅僅簡單的將XMLHttpRequest的responseText或responseHTML 屬性傳遞給success回呼函數，

'''注意'''，我們必須確保網頁伺服器報告的MIME類型與我們選擇的dataType所匹配。比如說，XML的話，伺服器端就必須聲明 text/xml 或者 application/xml 來獲得一致的結果。

如果指定為html類型，任何內嵌的JavaScript都會在HTML作為一個字串返回之前執行。類似的，指定script類型的話，也會先執行伺服器端產生JavaScript，然後再把指令碼作為一個文本資料返回。

如果指定為json類型，則會把擷取到的資料作為一個JavaScript對象來解析，並且把構建好的對象作為結果返回。為了實現這個目的，他首先嘗試使用JSON.parse()。如果瀏覽器不支援，則使用一個函數來構建。JSON資料是一種能很方便通過JavaScript解析的結構化資料。如果擷取的資料檔案存放在遠程伺服器上（網域名稱不同，也就是跨域擷取資料），則需要使用jsonp類型。使用這種類型的話，會建立一個查詢字串參數 callback=? ，這個參數會加在請求的URL後面。伺服器端應當在JSON資料前加上回呼函數名，以便完成一個有效JSONP請求。如果要指定回呼函數的參數名來取代預設的callback，可以通過設定$.ajax()的jsonp參數。

注意，JSONP是JSON格式的擴充。他要求一些伺服器端的代碼來檢測並處理查詢字串參數。更多資訊可以參閱 最初的文章。

如果指定了script或者jsonp類型，那麼當從伺服器接收到資料時，實際上是用了<script>標籤而不是XMLHttpRequest對象。這種情況下，$.ajax()不再返回一個XMLHttpRequest對象，並且也不會傳遞事件處理函數，比如beforeSend。

發送資料到伺服器

預設情況下，Ajax請求使用GET方法。如果要使用POST方法，可以設定type參數值。這個選項也會影響data選項中的內容如何發送到伺服器。

data選項既可以包含一個查詢字串，比如 key1=value1&key2=value2 ，也可以是一個映射，比如 {key1: 'value1', key2: 'value2'} 。如果使用了後者的形式，則資料再發送器會被轉換成查詢字串。這個處理過程也可以通過設定processData選項為false來迴避。如果我們希望發送一個XML對象給伺服器時，這種處理可能並不合適。並且在這種情況下，我們也應當改變contentType選項的值，用其他合適的MIME類型來取代預設的 application/x-www-form-urlencoded 。

進階選項

global選項用於阻止響應註冊的回呼函數，比如.ajaxSend，或者ajaxError，以及類似的方法。這在有些時候很有用，比如發送的請求非常頻繁且簡短的時候，就可以在ajaxSend裡禁用這個。更多關於這些方法的詳細資料，請參閱下面的內容。

如果伺服器需要HTTP認證，可以使用使用者名稱和密碼可以通過username和password選項來設定。

Ajax請求是限時的，所以錯誤警告被捕獲並處理後，可以用來提升使用者體驗。請求逾時這個參數通常就保留其預設值，要不就通過jQuery.ajaxSetup來全域設定，很少為特定的請求重新設定timeout選項。

預設情況下，請求總會被發出去，但瀏覽器有可能從他的緩衝中調取資料。要禁止使用緩衝的結果，可以設定cache參數為false。如果希望判斷資料自從上次請求後沒有更改過就報告出錯的話，可以設定ifModified為true。

scriptCharset允許給<script>標籤的請求設定一個特定的字元集，用於script或者jsonp類似的資料。當指令碼和頁面字元集不同時，這特別好用。

Ajax的第一個字母是asynchronous的開頭字母，這意味著所有的操作都是並行的，完成的順序沒有前後關係。$.ajax()的async參數總是設定成true，這標誌著在請求開始後，其他代碼依然能夠執行。強烈不建議把這個選項設定成false，這意味著所有的請求都不再是非同步了，這也會導致瀏覽器被鎖死。

$.ajax函數返回他建立的XMLHttpRequest對象。通常jQuery只在內部處理並建立這個對象，但使用者也可以通過xhr選項來傳遞一個自己建立的xhr對象。返回的對象通常已經被丟棄了，但依然提供一個底層介面來觀察和操控請求。比如說，調用對象上的.abort()可以在請求完成前掛起請求。

下面就使用jQuery解析songs.json。

這是songs.json檔案內容

song.json XHTML
[
{"optionKey":"1", "optionValue":"Canon in D"},
{"optionKey":"2", "optionValue":"Wind Song"},
{"optionKey":"3", "optionValue":"Wings"}
]

我的HTML代碼：

html-json XHTML

代碼如下	複製代碼
<div>點擊按鈕擷取JSON資料</div> <input type="button" id="button" value="確定" /> <div id="result"></div>

使用Ajax擷取JSON資料的jQuery代碼：

代碼如下

複製代碼

js-json JavaScript $(document).ready(function(){  $('#button').click(function(){   $.ajax({    type:"GET",    url:"songs.json",    dataType:"json",    success:function(data){     var song="<ul>";     //i表示在data中的索引位置，n表示包含的資訊的對象     $.each(data,function(i,n){      //擷取對象中屬性為optionsValue的值      song+="<li>"+n["optionValue"]+"</li>";     });     song+="</ul>";     $('#result').append(song);    }   });   return false;  }); });

jQuery.getJSON的API

jQuery.getJSON(url, [data], [callback])
概述
通過 HTTP GET 請求載入 JSON 資料。

在 jQuery 1.2 中，您可以通過使用JSONP形式的回呼函數來載入其他網域的JSON資料，如 "myurl?callback=?"。jQuery 將自動替換 ? 為正確的函數名，以執行回呼函數。 注意：此行以後的代碼將在這個回呼函數執行前執行。

參數
url,[data],[callback]String,Map,FunctionV1.0
url:發送請求地址。

data:待發送 Key/value 參數。

callback:載入成功時回呼函數。

這是更為簡單的實現

代碼如下	複製代碼
$(document).ready(function(){  $('#button').click(function(){   $.getJSON('songs.json',function(data){    var song="<ul>";    $.each(data,function(i,n){     song+="<li>"+n["optionValue"]+"</li>";    });    music+="</ul>";    $('#result').append(song);   });   return false;  }); });