當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

AJAX——基于请求加载数据

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

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

2019獨角獸企業(yè)重金招聘Python工程師標準>>>

搞點Demo，利于快速上手...

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

一個AJAX解決方案中涉及的技術如下：

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

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

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

在不需要與其他應用程序共享數(shù)據(jù)的情況下，以HTML片段提供外部數(shù)據(jù)一般來說是最簡單的。?
如果數(shù)據(jù)需要重用，而且其他應用程序也可能因此受到影響，那么在性能和文件大小方面具有優(yōu)勢的JSON通常是不錯的選擇。
而當遠程應用程序未知時，XML則能夠為良好的互操作性提供最可靠的保證。

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

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

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

更多關于JSON的介紹：http://json.org/json-zh.html

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

$.each()：全局函數(shù)，不操作jQuery對象，它以一個數(shù)組或映射作為第1個參數(shù)，以一個回調(diào)函數(shù)作為第2個參數(shù)。此外，還需要將每次循環(huán)中數(shù)組或映射的當前索引和當前項作為回調(diào)函數(shù)的兩個參數(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格式很簡潔，但它卻不容許任何錯誤。所有方括號、花括號、引號和逗號都必須合理而且適當?shù)卮嬖?#xff0c;否則文件不會加載。而且，在多數(shù)瀏覽器中，當文件不會加載時我們都看不到錯誤信息；腳本只是靜默地徹底中止運轉。

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

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

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

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

轉載于:https://my.oschina.net/zoey1990/blog/87527

總結

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

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