使用ajax操作JavaScript對象的方法

時間：2024-09-28 13:11:35 AJAX 我要投稿

相關(guān)推薦

　　通過請求獲取充分格式化的HTML雖然很方便，但這也意味著必須在傳輸文本內(nèi)容的同時也傳輸很多HTML標簽。有時候，我們希望能夠盡量少傳輸一些數(shù)據(jù)，然后馬上處理這些數(shù)據(jù)。在這種情況，我們希望取得能夠通過JavaScript進行遍歷的數(shù)據(jù)結(jié)構(gòu)。使用jQuery的選擇符可以遍歷和操作取得的HTML結(jié)構(gòu)，但是還有一種JavaScript內(nèi)置的數(shù)據(jù) 格式，既能減少數(shù)據(jù)傳輸量，也會減少編碼量。下面請看yjbys小編的詳細介紹。

　　1.取得JSON

　　前面我們曾經(jīng)看到過，JavaScript對象是由一些“鍵-值”對組成的，而且還可以方便地使用花括號（{})來定義。另一方面，JavaScript的數(shù)組則可以使用方括號（[])和隱式聲明的逐漸遞增的鍵進行動態(tài)定義。將這兩種語法組合起來，可以輕松地表達復雜而且龐大的數(shù)據(jù) 結(jié)構(gòu)。

　　S是synchronous的首字母，即同步。

　　作者這里的意思是，如果不是Ajax,而是SJAX，即不是異步加載，而是同步加載，那么就不會有那么大的影響了。

　　Douglas Crockford為這種簡單的語法起了一個名字，叫做JSON (JavaScript Object Notation, JavaScript對象表示法)。通過這種表示法能夠方便地取代數(shù)據(jù)量龐大的XML格式：

　　代碼如下：

　　{

　　"key": "value",

　　"key 2":[

　　"array",

　　"of",

　　"items"

　　]

　　}

　　在對象字面量和數(shù)組字面量的基礎(chǔ)上，JSON格式的語法具有很強的表達能力，但對其中的值也有一定的限制。例如，JSON規(guī)定所有對象鍵以及所有字符串值，都必須包含在雙引號中。而且，函數(shù)也不是有效的JSON值。由于存在這些限制，開發(fā)人員最好不手工編輯JSON，而應該用服務器端語言來生成。

　　要了解JSON的語法要求以及它有哪些優(yōu)勢，都有哪些語言支持這種數(shù)據(jù)格式，請訪問 http://json.org/。如果用這種格式對字典中的解釋進行編碼，那么可能會有很多種編碼方式。這里，我們把一些字典的詞條放在一個名叫b.json的JSON文件中，這個文件開頭部分的代碼如下：

　　代碼如下：

　　[

　　{

　　"term": "BACCHUS",

　　"part": "n.",

　　"definition": "A convenient deity invented by the...",

　　"quote": [

　　"Is public worship, then, a sin,",

　　"That for devotions paid to Bacchus",

　　"The lictors dare to run us in,",

　　"And resolutely thump and whack us?"

　　"author": "Jorace"

　　{

　　"term": "BACKBITE",

　　"part": "v.t.",

　　"definition": "To speak of a man as you find him when..."

　　{

　　"term": "BEARD",

　　"part": "n.",

　　"definition": "The hair that is commonly cut off by..."

　　... file continues ...

　　要取得這些數(shù)據(jù)，可以使用$.getJS0N()方法，這個方法會在取得相應文件后對文件進行處理。在數(shù)據(jù)從服務器返回后，它只是一個簡單的JSON格式的文本字符串。$.getJSON()方法會解析這個字符串，并將處理得到的JavaScript對象提供給調(diào)用代碼。

　　2.使用全局jQuery函數(shù)

　　到目前為止，我們使用的所荀Query方法都需要通過$()函數(shù)構(gòu)建的一個jQuery對象進行調(diào) 用。通過選擇符表達式，我們可以指定一組要操作的DOM節(jié)點，然后再用這些jQuery方法以某種方式對它們進行操作。然而，$.getJS〇N()函數(shù)卻不一樣。從邏輯上說，沒有該方法適用的DOM 元素；作為結(jié)果的對象只能提供給腳本，而不能插人到頁面中。為此，getJS〇N()是作為全局 jQuery對象（由jQuery庫定義的jQuery*$對象）的方法定義的，也就是說，它不是個別jQuery 對象實例（即通過$()函數(shù)創(chuàng)建的對象）的方法。

　　如果JavaScript中有類似其他面向?qū)ο笳Z言中的類，那我們可以把$.getJS〇N()稱為類方法。為了便于理解，我們在這里稱其為全局函數(shù)；實際上，為了不與其他函數(shù)名稱發(fā)生沖突，這些全局函數(shù)使用的是jQuery命名空間。

　　在使用這個函數(shù)時，我們還需要像以前一樣為它傳遞文件名，如代碼清單6-3所示。

　　代碼清單6-3

　　代碼如下：

　　//未完成的代碼

　　$(document).ready(function() {

　　$('#letter-b a').click(function(event) { event.preventDefault();

　　$.getJSON('b.json');

　　});

　　當單擊按鈕時，我們看不到以上代碼的效果。因為雖然函數(shù)調(diào)用加載了文件，但是并沒有告訴JavaScript對返回的數(shù)據(jù)如何處理。為此，我們需要使用一個回調(diào)函數(shù)。

　　$.getJSON()函數(shù)可以接受第2個參數(shù)，這個參數(shù)是當加載完成時調(diào)用的函數(shù)。如上所述， Ajax請求都是異步的，回調(diào)函數(shù)提供了一種等待數(shù)據(jù)返回的方式，而不是立即執(zhí)行代碼。回調(diào)函數(shù)也需要一個參數(shù)，該參數(shù)中保存著返回的數(shù)據(jù)。因此，我們的代碼要寫成代碼清單6-4這樣。

　　代碼清單6-4

　　代碼如下：

　　//未完成的代碼

　　$(document).ready(function() {

　　$('#letter-b a').click(function(event) { event.preventDefault();

　　$.getJSON('b.json', function(data) {

　　});

　　我們在此使用了匿名函數(shù)表達式作為回調(diào)函數(shù)，這在jQuery代碼中很常見，主要是為了保持代碼簡潔。當然，對函數(shù)聲明的引用同樣也可以作為回調(diào)函數(shù)。

　　這樣，我們就可以在函數(shù)中通過data變量來遍歷JSON數(shù)據(jù)結(jié)構(gòu)了。具體來說，需要迭代頂級數(shù)組，為每個項構(gòu)建相應的HTML代碼。雖然可以在這里使用標準的for循環(huán)，但我們要借此機會介紹jQuery的另一個實用全局函數(shù)$.each(),在第5章中，我們曾看到過它的對應方法.each()。$.each()函數(shù)不操作jQuery對象，它以數(shù)組或?qū)ο笞鳛榈谝粋€參數(shù)，以回調(diào)函數(shù) 作為第二個參數(shù)。此外，還需要將每次循環(huán)中數(shù)組或?qū)ο蟮漠斍八饕彤斍绊椬鳛榛卣{(diào)函數(shù)的兩個參數(shù)，參見代碼清單6-5。

　　代碼清單6-5

　　代碼如下：

　　$(document).ready(function() {

　　$('#letter-b a').click(function(event) { event.preventDefault();

　　$.getJSON('b.json', function(data) { var html ='';

　　$.each(data, function(entryIndex, entry) { html += '<p class="entry">';

　　html += '<h3 class="term">' + entry.term + '</h3>';

　　html += '<p class="part">' + entry.part + '</p>';

　　html += '<p class="definition">';

　　html += entry.definition;

　　html += '</p>';

　　});