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

编程问答

AJAX——基于请求加载数据

發布時間：2024/4/11 编程问答 32 豆豆

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

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

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

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

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

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

選擇數據格式——4種外部數據格式

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

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

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

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

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

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

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

$.each()：全局函數，不操作jQuery對象，它以一個數組或映射作為第1個參數，以一個回調函數作為第2個參數。此外，還需要將每次循環中數組或映射的當前索引和當前項作為回調函數的兩個參數。

仍然以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格式很簡潔，但它卻不容許任何錯誤。所有方括號、花括號、引號和逗號都必須合理而且適當地存在，否則文件不會加載。而且，在多數瀏覽器中，當文件不會加載時我們都看不到錯誤信息；腳本只是靜默地徹底中止運轉。

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

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

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。