- 相關(guān)推薦
使用ajax操作JavaScript對象的方法
通過(guò)請求獲取充分格式化的HTML雖然很方便，但這也意味著(zhù)必須在傳輸文本內容的同時(shí)也 傳輸很多HTML標簽。有時(shí)候，我們希望能夠盡量少傳輸一些數據，然后馬上處理這些數據。在這種情況，我們希望取得能夠通過(guò)JavaScript進(jìn)行遍歷的數據結構。使用jQuery的選擇符可以遍歷和操作取得的HTML結構，但是還有一種JavaScript內置的數據 格式，既能減少數據傳輸量，也會(huì )減少編碼量。下面請看yjbys小編的詳細介紹。
1.取得JSON
前面我們曾經(jīng)看到過(guò)，JavaScript對象是由一些“鍵-值”對組成的，而且還可以方便地使 用花括號（{})來(lái)定義。另一方面，JavaScript的數組則可以使用方括號（[])和隱式聲明的 逐漸遞增的鍵進(jìn)行動(dòng)態(tài)定義。將這兩種語(yǔ)法組合起來(lái)，可以輕松地表達復雜而且龐大的數據 結構。
S是synchronous的首字母，即同步。
作者這里的意思是，如果不是Ajax,而是SJAX，即不是異步加載，而是同步加載，那么就不會(huì )有那么大的影響了。
Douglas Crockford為這種簡(jiǎn)單的語(yǔ)法起了一個(gè)名字，叫做JSON (JavaScript Object Notation, JavaScript對象表示法)。通過(guò)這種表示法能夠方便地取代數據量龐大的XML格式：
代碼如下：
{
"key": "value",
"key 2":[
"array",
"of",
"items"
]
}
在對象字面量和數組字面量的基礎上，JSON格式的語(yǔ)法具有很強的表達能力，但對其中的 值也有一定的限制。例如，JSON規定所有對象鍵以及所有字符串值，都必須包含在雙引號中。 而且，函數也不是有效的JSON值。由于存在這些限制，開(kāi)發(fā)人員最好不手工編輯JSON，而應該 用服務(wù)器端語(yǔ)言來(lái)生成。
要了解JSON的語(yǔ)法要求以及它有哪些優(yōu)勢，都有哪些語(yǔ)言支持這種數據格 式，請訪(fǎng)問(wèn) http://json.org/。如果用這種格式對字典中的解釋進(jìn)行編碼，那么可能會(huì )有很多種編碼方式。這里，我們把一 些字典的詞條放在一個(gè)名叫b.json的JSON文件中，這個(gè)文件開(kāi)頭部分的代碼如下：
代碼如下：
[
{
"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 ...
要取得這些數據，可以使用$.getJS0N()方法，這個(gè)方法會(huì )在取得相應文件后對文件進(jìn)行處理。在數據從服務(wù)器返回后，它只是一個(gè)簡(jiǎn)單的JSON格式的文本字符串。$.getJSON()方法 會(huì )解析這個(gè)字符串，并將處理得到的JavaScript對象提供給調用代碼。
2.使用全局jQuery函數
到目前為止，我們使用的所荀Query方法都需要通過(guò)$()函數構建的一個(gè)jQuery對象進(jìn)行調 用。通過(guò)選擇符表達式，我們可以指定一組要操作的DOM節點(diǎn)，然后再用這些jQuery方法以某種 方式對它們進(jìn)行操作。然而，$.getJS〇N()函數卻不一樣。從邏輯上說(shuō)，沒(méi)有該方法適用的DOM 元素；作為結果的對象只能提供給腳本，而不能插人到頁(yè)面中。為此，getJS〇N()是作為全局 jQuery對象（由jQuery庫定義的jQuery*$對象）的方法定義的，也就是說(shuō)，它不是個(gè)別jQuery 對象實(shí)例（即通過(guò)$()函數創(chuàng )建的對象）的方法。
如果JavaScript中有類(lèi)似其他面向對象語(yǔ)言中的類(lèi)，那我們可以把$.getJS〇N()稱(chēng)為類(lèi)方法。 為了便于理解，我們在這里稱(chēng)其為全局函數；實(shí)際上，為了不與其他函數名稱(chēng)發(fā)生沖突，這些全 局函數使用的是jQuery命名空間。
在使用這個(gè)函數時(shí)，我們還需要像以前一樣為它傳遞文件名，如代碼清單6-3所示。
代碼清單6-3
代碼如下：
//未完成的代碼
$(document).ready(function() {
$('#letter-b a').click(function(event) { event.preventDefault();
$.getJSON('b.json');
});
});
當單擊按鈕時(shí)，我們看不到以上代碼的效果。因為雖然函數調用加載了文件，但是并沒(méi)有告 訴JavaScript對返回的數據如何處理。為此，我們需要使用一個(gè)回調函數。
$.getJSON()函數可以接受第2個(gè)參數，這個(gè)參數是當加載完成時(shí)調用的函數。如上所述， Ajax請求都是異步的，回調函數提供了一種等待數據返回的方式，而不是立即執行代碼�；卣{函 數也需要一個(gè)參數，該參數中保存著(zhù)返回的數據。因此，我們的代碼要寫(xiě)成代碼清單6-4這樣。
代碼清單6-4
代碼如下：
//未完成的代碼
$(document).ready(function() {
$('#letter-b a').click(function(event) { event.preventDefault();
$.getJSON('b.json', function(data) {
});
});
});
我們在此使用了匿名函數表達式作為回調函數，這在jQuery代碼中很常見(jiàn)，主要是為了保持 代碼簡(jiǎn)潔。當然，對函數聲明的引用同樣也可以作為回調函數。
這樣，我們就可以在函數中通過(guò)data變量來(lái)遍歷JSON數據結構了。具體來(lái)說(shuō)，需要迭代頂 級數組，為每個(gè)項構建相應的HTML代碼。雖然可以在這里使用標準的for循環(huán)，但我們要借此機會(huì )介紹jQuery的另一個(gè)實(shí)用全局函數$.each(),在第5章中，我們曾看到過(guò)它的對應方 法.each()。$.each()函數不操作jQuery對象，它以數組或對象作為第一個(gè)參數，以回調函數 作為第二個(gè)參數。此外，還需要將每次循環(huán)中數組或對象的當前索引和當前項作為回調函數的兩 個(gè)參數，參見(jiàn)代碼清單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>';
html += '</p>';
});
$('#dictionary').html(html);
});
});
});
這里通過(guò)$.each()函數依次遍歷每個(gè)項，并使用entry對象的內容構建起HTML代碼結構。 構建好HTML之后，通過(guò).html()把它插人到<p id="dictionary">*，替換其中原有的所 有內容。
安全的HTML
這種方法要求數據中包含可以直接用來(lái)構建HTML的安全內容，例如，數據 中不能包含任何<字符。
現在所剩的就是處理詞條中的引用語(yǔ)了，這需要使用另一個(gè)$.each()循環(huán)，參見(jiàn)代碼清 單 6-6。
代碼清單6-6
代碼如下：
$(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=MdefinitionM>'; html += entry.definition; if (entry.quote) {
html += '<p class=，，quote，，>';
$.each(entry.quote, function(lineIndex, line) {
html += '<p class=Hquote-lineH>' + line + '</p>';
})；
if (entry.author) {
html += '<p class=Hquote-authorH>' + entry.author + '</p>';
}
html += '</p>';
}
html += '</p>'; html += '</p>';
});
$('#dictionary').html(html);
});
});
});
編寫(xiě)完這些代碼后，就可以單擊下一個(gè)B鏈接來(lái)驗證我們的成果了，頁(yè)面右側 出現了相應的字典條目。
盡管JSON格式很簡(jiǎn)潔，但它卻不容許任何錯誤。所有方括號、花括號、引號和逗號都必須 合理且正確地使用，否則文件不會(huì )加載。而且，在多數瀏覽器中，當文件加載失敗時(shí)我們看不到 任何錯誤信息；腳本只是靜默地徹底終止運轉。
【使用ajax操作JavaScript對象的方法】相關(guān)文章：
Javascript中arguments對象的詳解和使用方法03-31
關(guān)于javascript對象之內置和對象Math的使用方法03-30
詳解JavaScript中的splice()使用方法04-01
javascript克隆對象深度介紹03-31
JavaScript常用方法匯總03-08
JavaScript中的三種對象04-01
javascript編程異常處理的方法03-31