當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

AJAX——基于请求加载数据

發(fā)布時(shí)間：2024/4/11 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 AJAX——基于请求加载数据小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

搞點(diǎn)Demo，利于快速上手...

AJAX——Asynchronous JavaScript and XML(異步JavaScript和XML)

一個(gè)AJAX解決方案中涉及的技術(shù)如下：

JavaScript，通過用戶或其他與瀏覽器相關(guān)事件捕獲交互作用
XMLHttpRequest對象，通過這個(gè)對象可以在不中斷其他瀏覽器任務(wù)的情況下向服務(wù)器發(fā)送請求
服務(wù)器上的XML文件，或者其他類似的數(shù)據(jù)格式
其他JavaScript，解釋來自服務(wù)器的數(shù)據(jù)并將其呈現(xiàn)到頁面上

選擇數(shù)據(jù)格式——4種外部數(shù)據(jù)格式

HTML片段：工作量小，但不靈活
JSON文件：方便重用，但構(gòu)建需認(rèn)真
JavaScript文件：極大靈活性，但它不是一種真正的數(shù)據(jù)存儲機(jī)制。能夠加載JS，意味著可以將很少用到的行為提取到外部文件中，從而在加載該文件之前有效地減少頁面中的代碼量
XML文檔：可移植性高，可重用。文件體積相對較大，解析和操作速度要慢一些

在不需要與其他應(yīng)用程序共享數(shù)據(jù)的情況下，以HTML片段提供外部數(shù)據(jù)一般來說是最簡單的。?
如果數(shù)據(jù)需要重用，而且其他應(yīng)用程序也可能因此受到影響，那么在性能和文件大小方面具有優(yōu)勢的JSON通常是不錯(cuò)的選擇。
而當(dāng)遠(yuǎn)程應(yīng)用程序未知時(shí)，XML則能夠?yàn)榱己玫幕ゲ僮餍蕴峁┳羁煽康谋ＷC。

1. HTML片段——$('#id').load('title.html');

2. JSON:JavaScript Object Notation(JavaScript對象表示法)——$.getJSON()

JavaScript對象就是由一些"鍵-值"對組成的，而且可以方便地使用花括號({})來定義。JavaScript的數(shù)組則可以使用方括號([])進(jìn)行動態(tài)定義。將這兩種語法組合起來，可以輕松地表達(dá)復(fù)雜而且龐大的數(shù)據(jù)結(jié)構(gòu)。Douglas Crockford為利用這種簡單的語法起了一個(gè)名字，叫做 JSON(JavaScript Object Notation，JavaScript對象表示法)。通過這種表示法能夠方便地取代數(shù)據(jù)量龐大的XML格式。 {"key": "value","key2": ["array","of","items"] }

更多關(guān)于JSON的介紹：http://json.org/json-zh.html

$.getJSON()：全局函數(shù)，作為全局jQuery對象的方法定義，不是個(gè)別jQuery對象實(shí)例的方法，作為結(jié)果的對象只能提供給腳本，而不能插入到頁面中。

$.each()：全局函數(shù)，不操作jQuery對象，它以一個(gè)數(shù)組或映射作為第1個(gè)參數(shù)，以一個(gè)回調(diào)函數(shù)作為第2個(gè)參數(shù)。此外，還需要將每次循環(huán)中數(shù)組或映射的當(dāng)前索引和當(dāng)前項(xiàng)作為回調(diào)函數(shù)的兩個(gè)參數(shù)。

仍然以XMPP的roster為例。

新建roster.json：

[{"name": "User1","group": "G1"},{"name": "User2","group": "G1"},{"name": "User3","group": "G2"},{"name": "User4","group": "G2"},{"name": "User5","group": "G1"},{"name": "User6","group": "G3"},{"name": "User7","group": "G2"},{"name": "User8","group": "G3"},{"name": "User9","group": "G1"},{"name": "User10","group": "G1"} ]

注意前后是方括號，不要寫成大括號。鍵值都要用引號。

新建index.html：需要jQuery

<!DOCTYPE html> <html> <head> <script src="jquery-1.8.2.min.js"></script> <script src="script.js"></script> <meta charset=utf-8 /> <title>getJSON Demo</title> </head> <body><button id='get_roster'>Get Roster</button><ul id='roster'></ul> </body> </html>

新建script.js：

$(document).ready(function () {$('#get_roster').click(function () {$.getJSON('roster.json', function (data) {//清空列表$('#roster').empty();//遍歷item$.each(data, function(index, item) {//獲得group值var group = item['group'];if ($('#roster').find('#' + group).length === 0) {var group_html = '<li><span class="group">' + group + '</span><ul id="' + group +'"></ul></li>';$('#roster').append($(group_html));}var item_html = '<li class="item"><span class="name">' + item['name'] + '</span></li>';$('#roster #' + group).append($(item_html));});});}); }); 注意獲得name和group的方式：item['group']和item['name']，也可以寫成item.group和item.name 盡管JSON格式很簡潔，但它卻不容許任何錯(cuò)誤。所有方括號、花括號、引號和逗號都必須合理而且適當(dāng)?shù)卮嬖?#xff0c;否則文件不會加載。而且，在多數(shù)瀏覽器中，當(dāng)文件不會加載時(shí)我們都看不到錯(cuò)誤信息；腳本只是靜默地徹底中止運(yùn)轉(zhuǎn)。

3. JavaScript文件：將不需要馬上執(zhí)行的JS抽象出來——$.getScript()

有時(shí)候，在頁面初次加載時(shí)就取得所需的全部JS也是沒有必要的。具體需要取得哪個(gè)腳本，要視用戶的操作而定。雖然可以在需要時(shí)動態(tài)地引入<script>標(biāo)簽，但注入所需代碼的更優(yōu)雅的方式則是通過jQuery直接加載.js文件。

新建roster.js：將上面對JSON處理的函數(shù)提取到單獨(dú)的JS文件中

4.?XML文檔——$.get()

轉(zhuǎn)載于:https://my.oschina.net/zoey1990/blog/87527

總結(jié)

以上是生活随笔為你收集整理的AJAX——基于请求加载数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。