使用ajax操作JavaScript 對象詳解_AJAX相關

通過請求擷取充分格式化的HTML雖然很方便，但這也意味著必須在傳輸常值內容的同時也 傳輸很多HTML標籤。有時候，我們希望能夠盡量少傳輸一些資料，然後馬上處理這些資料。在 這種情況，我們希望取得能夠通過JavaScript進行遍曆的資料結構。
          使用jQueiy的選擇符可以遍曆和操作取得的HTML結構，但是還有一種JavaScript內建的資料 格式，既能減少資料轉送量，也會減少編碼量。

1.取得JSON

  前面我們曾經看到過，JavaScript對象是由一些“鍵-值”對組成的，而且還可以方便地使 用花括弧（{})來定義。另一方面，JavaScript的數組則可以使用方括弧（[])和隱式聲明的 逐漸遞增的鍵進行動態定義。將這兩種文法組合起來，可以輕鬆地表達複雜而且龐大的資料 結構。
S是synchronous的首字母，即同步。
         作者這裡的意思是，如果不是Ajax,而是SJAX，即不是非同步載入，而是同步載入，那麼就不會有那麼大的影響了。
Douglas Crockford為這種簡單的文法起了一個名字，叫做JSON (JavaScript Object Notation, JavaScript對象標記法)。通過這種標記法能夠方便地取代資料量龐大的XML格式：

複製代碼 代碼如下:

{
"key": "value",
"key 2":[
"array",
"of",
"items"
]
}

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

         要瞭解JSON的文法要求以及它有哪些優勢，都有哪些語言支援這種資料格 式，請訪問 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 ...

           要取得這些資料，可以使用$.getJS0N()方法，這個方法會在取得相應檔案後對檔案進行處理。在資料從伺服器返回後，它只是一個簡單的JSON格式的文本字串。$.getJSON()方法 會解析這個字串，並將處理得到的JavaScript對象提供給調用代碼。

2.使用全域jQuery函數

           到目前為止，我們使用的所荀Query方法都需要通過$()函數構建的一個jQuery對象進行調 用。通過選擇符運算式，我們可以指定一組要操作的DOM節點，然後再用這些jQuery方法以某種 方式對它們進行操作。然而，$.getJS〇N()函數卻不一樣。從邏輯上說，沒有該方法適用的DOM 元素；作為結果的對象只能提供給指令碼，而不能插人到頁面中。為此，getJS〇N()是作為全域 jQuery對象（由jQuery庫定義的jQuery*$對象）的方法定義的，也就是說，它不是個別jQuery 對象執行個體（即通過$()函數建立的對象）的方法。

如果JavaScript中有類似其他物件導向語言中的類，那我們可以把$.getJS〇N()稱為類方法。 為了便於理解，我們在這裡稱其為全域函數；實際上，為了不與其他函數名稱發生衝突，這些全 局函數使用的是jQuery命名空間。

   在使用這個函數時，我們還需要像以前一樣為它傳遞檔案名稱，如代碼清單6-3所示。
代碼清單6-3

複製代碼 代碼如下:

//未完成的代碼
$(document).ready(function() {
$('#letter-b a').click(function(event) { event.preventDefault();
$.getJSON('b.json');
});
});

當單擊按鈕時，我們看不到以上代碼的效果。因為雖然函數調用載入了檔案，但是並沒有告 訴JavaScript對返回的資料如何處理。為此，我們需要使用一個回呼函數。
              $.getJSON()函數可以接受第2個參數，這個參數是當載入完成時調用的函數。如上所述， Ajax請求都是非同步，回呼函數提供了一種等待資料返回的方式，而不是立即執行代碼。回調函 數也需要一個參數，該參數中儲存著返回的資料。因此，我們的代碼要寫成代碼清單6-4這樣。
代碼清單6-4

複製代碼 代碼如下:

//未完成的代碼
$(document).ready(function() {
$('#letter-b a').click(function(event) { event.preventDefault();
$.getJSON('b.json', function(data) {
});
});
});

我們在此使用了匿名函數運算式作為回呼函數，這在jQuery代碼中很常見，主要是為了保持 代碼簡潔。當然，對函式宣告的引用同樣也可以作為回呼函數。

這樣，我們就可以在函數中通過data變數來遍曆JSON資料結構了。具體來說，需要迭代頂 級數組，為每個項構建相應的HTML代碼。雖然可以在這裡使用標準的for迴圈，但我們要藉此機會介紹jQuery的另一個實用全域函數$.each(),在第5章中，我們曾看到過它的對應方 法.each()。$.each()函數不操作jQuery對象，它以數組或對象作為第一個參數，以回呼函數 作為第二個參數。此外，還需要將每次迴圈中數組或對象的當前索引和當前項作為回呼函數的兩 個參數，參見代碼清單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 += '<div class="entry">';
html += '<h3 class="term">' + entry.term + '</h3>';
html += '<div class="part">' + entry.part + '</div>';
html += '<div class="definition">';
html += entry.definition;
html += '</div>';
html += '</div>';
});
$('#dictionary').html(html);
});
});
});

這裡通過$.each()函數依次遍曆每個項，並使用entry對象的內容構建起HTML代碼結構。 構建好HTML之後，通過.html()把它插人到<div id="dictionary">*，替換其中原有的所 有內容。

安全的HTML

這種方法要求資料中包含可以直接用來構建HTML的安全內容，例如，資料 中不能包含任何<字元。

現在所剩的就是處理詞條中的引用語了，這需要使用另一個$.each()迴圈，參見代碼清 單 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 += '<div class="entry">';
html += '<h3 class="term">' + entry.term + '</h3>'; html += '<div class="part">' + entry.part + '</div>';
html += '<div class=MdefinitionM>'; html += entry.definition; if (entry.quote) {
html += '<div class=，，quote，，>';
$.each(entry.quote, function(lineIndex, line) {
html += '<div class=Hquote-lineH>' + line + '</div>';
})；
if (entry.author) {
html += '<div class=Hquote-authorH>' + entry.author + '</div>';
}
html += '</div>';
}
html += '</div>'; html += '</div>';
});
$('#dictionary').html(html);
});
});
});

編寫完這些代碼後，就可以單擊下一個B連結來驗證我們的成果了，如圖6-4所示，頁面右側 出現了相應的字典條目。

儘管JSON格式很簡潔，但它卻不容許任何錯誤。所有方括弧、花括弧、引號和逗號都必須 合理且正確地使用，否則檔案不會載入。而且，在多數瀏覽器中，當檔案載入失敗時我們看不到 任何錯誤資訊；指令碼只是靜默地徹底終止運轉。