真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

ajax操作如何JavaScript對象-創(chuàng)新互聯(lián)

這篇文章主要講解了“ajax操作如何JavaScript 對象”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“ajax操作如何JavaScript 對象”吧!

讓客戶滿意是我們工作的目標,不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴,公司提供的服務(wù)項目有:國際域名空間、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、開化網(wǎng)站維護、網(wǎng)站推廣。

1.取得JSON

  前面我們曾經(jīng)看到過,JavaScript對象是由一些“鍵-值”對組成的,而且還可以方便地使 用花括號({})來定義。另一方面,JavaScript的數(shù)組則可以使用方括號([])和隱式聲明的 逐漸遞增的鍵進行動態(tài)定義。將這兩種語法組合起來,可以輕松地表達復(fù)雜而且龐大的數(shù)據(jù) 結(jié)構(gòu)。
S是synchronous的首字母,即同步。
         作者這里的意思是,如果不是Ajax,而是SJAX,即不是異步加載,而是同步加載,那么就不會有那么大的影響了。
Douglas Crockford為這種簡單的語法起了一個名字,叫做JSON (JavaScript Object Notation, JavaScript對象表示法)。通過這種表示法能夠方便地取代數(shù)據(jù)量龐大的XML格式:

復(fù)制代碼 代碼如下:


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


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

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

復(fù)制代碼 代碼如下:


[
{
"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()方法,這個方法會在取得相應(yīng)文件后對文件進行處理。在數(shù)據(jù)從服務(wù)器返回后,它只是一個簡單的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

復(fù)制代碼 代碼如下:


//未完成的代碼
$(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

復(fù)制代碼 代碼如下:


//未完成的代碼
$(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)建相應(yīng)的HTML代碼。雖然可以在這里使用標準的for循環(huán),但我們要借此機會介紹jQuery的另一個實用全局函數(shù)$.each(),在第5章中,我們曾看到過它的對應(yīng)方 法.each()。$.each()函數(shù)不操作jQuery對象,它以數(shù)組或?qū)ο笞鳛榈谝粋€參數(shù),以回調(diào)函數(shù) 作為第二個參數(shù)。此外,還需要將每次循環(huán)中數(shù)組或?qū)ο蟮漠斍八饕彤斍绊椬鳛榛卣{(diào)函數(shù)的兩 個參數(shù),參見代碼清單6-5。

代碼清單6-5

復(fù)制代碼 代碼如下:


$(document).ready(function() {
$('#letter-b a').click(function(event) { event.preventDefault();
$.getJSON('b.json', function(data) { var html ='';
$.each(data, function(entryIndex, entry) { html += '

';
html += '

' + entry.term + '

';
html += '
' + entry.part + '
';
html += '
';
html += entry.definition;
html += '
';
html += '
';
});
$('#dictionary').html(html);
});
});
});


這里通過$.each()函數(shù)依次遍歷每個項,并使用entry對象的內(nèi)容構(gòu)建起HTML代碼結(jié)構(gòu)。 構(gòu)建好HTML之后,通過.html()把它插人到

*,替換其中原有的所 有內(nèi)容。

安全的HTML

這種方法要求數(shù)據(jù)中包含可以直接用來構(gòu)建HTML的安全內(nèi)容,例如,數(shù)據(jù) 中不能包含任何<字符。

現(xiàn)在所剩的就是處理詞條中的引用語了,這需要使用另一個$.each()循環(huán),參見代碼清 單 6-6。
          代碼清單6-6

復(fù)制代碼 代碼如下:


$(document).ready(function() {
$('#letter-b a').click(function(event) { event.preventDefault();
$.getJSON('b.json', function(data) { var html ='';
$.each(data, function(entryIndex, entry) { html += '

';
html += '

' + entry.term + '

'; html += '
' + entry.part + '
';
html += '
'; html += entry.definition; if (entry.quote) {
html += '
';
$.each(entry.quote, function(lineIndex, line) {
html += '
' + line + '
';
});
if (entry.author) {
html += '
' + entry.author + '
';
}
html += '
';
}
html += '
'; html += '
';
});
$('#dictionary').html(html);
});
});
});


編寫完這些代碼后,就可以單擊下一個B鏈接來驗證我們的成果了,如圖6-4所示,頁面右側(cè) 出現(xiàn)了相應(yīng)的字典條目。

感謝各位的閱讀,以上就是“ajax操作如何JavaScript 對象”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對ajax操作如何JavaScript 對象這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!


名稱欄目:ajax操作如何JavaScript對象-創(chuàng)新互聯(lián)
文章起源:http://weahome.cn/article/ddicss.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部