當前位置:才華齋>設計>網頁設計>

使用ajax操作JavaScript物件的方法

網頁設計 閱讀(3.15W)

通過請求獲取充分格式化的HTML雖然很方便,但這也意味著必須在傳輸文字內容的同時也 傳輸很多HTML標籤。有時候,我們希望能夠儘量少傳輸一些資料,然後馬上處理這些資料。在這種情況,我們希望取得能夠通過JavaScript進行遍歷的資料結構。使用jQuery的選擇符可以遍歷和操作取得的HTML結構,但是還有一種JavaScript內建的資料 格式,既能減少資料傳輸量,也會減少編碼量。下面請看yjbys小編的詳細介紹。

使用ajax操作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的語法要求以及它有哪些優勢,都有哪些語言支援這種資料格 式,請訪問 。如果用這種格式對字典中的解釋進行編碼,那麼可能會有很多種編碼方式。這裡,我們把一 些字典的詞條放在一個名叫的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 ...

要取得這些資料,可以使用$S0N()方法,這個方法會在取得相應檔案後對檔案進行處理。在資料從伺服器返回後,它只是一個簡單的JSON格式的文字字串。$SON()方法 會解析這個字串,並將處理得到的JavaScript物件提供給呼叫程式碼。

  2.使用全域性jQuery函式

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

如果JavaScript中有類似其他面嚮物件語言中的類,那我們可以把$S〇N()稱為類方法。 為了便於理解,我們在這裡稱其為全域性函式;實際上,為了不與其他函式名稱發生衝突,這些全 局函式使用的是jQuery名稱空間。

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

程式碼清單6-3

程式碼如下:

//未完成的程式碼

$(document)y(function() {

$('#letter-b a')k(function(event) { entDefault();

$SON('');

});

});

當單擊按鈕時,我們看不到以上程式碼的效果。因為雖然函式呼叫載入了檔案,但是並沒有告 訴JavaScript對返回的資料如何處理。為此,我們需要使用一個回撥函式。

$SON()函式可以接受第2個引數,這個引數是當載入完成時呼叫的函式。如上所述, Ajax請求都是非同步的,回撥函式提供了一種等待資料返回的方式,而不是立即執行程式碼。回撥函 數也需要一個引數,該引數中儲存著返回的資料。因此,我們的程式碼要寫成程式碼清單6-4這樣。

程式碼清單6-4

程式碼如下:

//未完成的程式碼

$(document)y(function() {

$('#letter-b a')k(function(event) { entDefault();

$SON('', function(data) {

});

});

});