AJax技术

jQuery基礎教程 · 摘要(3)

字号+ 作者:H5之家 来源:H5之家 2018-03-30 16:08 我要评论( )

傳輸數據的方式:在不需要與其他應用程式共享數據的情況下,以HTML片段提供外部數據一般來說是最簡單的。如果數據需要重用,而且其他應用程式也可能因此受到影響,那么在性能和文件大小方面具有優勢的JSON通常是不

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

二十四、JSON(JavaScript Object Notation,JavaScript對象表示法),通過這種表示法能夠方便地取代數據量龐大的XML格式。

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

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

要取得 JSON 數據,可以使用 $.getJSON() 方法,這個方法會在取得相應文件后對文件進行處理。在數據從服務器返回后,它只是一個簡單的JSON格式的文本字符串。 $.getJSON() 方法會解析這個字符串,并將處理得到的JavaScript對象提供給調用代碼。

$.getJSON() 函數可以接受第2個參數(第1個參數為 json 文件),這個參數是當加載完成時調用的函數。Ajax請求都是異步的,回調函數提供了一種等待數據返回的方式,而不是立即執行代碼。回調函數也需要一個參數,該參數中保存著返回的數據。

$.getJSON('b.json', function(data) { });

二十五、 $.each() 函數不操作jQuery對象,它以數組或對象作為第一個參數,以回調函數作為第二個參數。此外,回調函數也需要兩個參數,分別是每次循環中數組或對象的 當前索引 和 當前項。

$.each(data, function(entryIndex, entry) { html += '<divhljs-string">">'; html += '<h3hljs-string">">' + entry.term + '</h3>'; html += '<divhljs-string">">' + entry.part + '</div>'; html += '<divhljs-string">">'; html += entry.definition; html += '</div>'; html += '</div>'; });

二十六、加載XML文檔
$.get() 函數,這個函數只是取得由URL指定的文件,然后將純文本格式的數據提供給回調函數。但是,在根據服務器提供的MIME類型知道響應的是XML的情況下,提供給回調函數的將是XML DOM樹。
遍歷XML文檔的方式同HTML文檔一樣,也可以使用常規的 .find() 、 .filter() 及其他遍歷方法。

// requestdata 該參數是一個用來構建查詢字符串的鍵和值的對象 $.get('e.php', requestData, function(data) { $('#dictionary').html(data); });

.load() 方法在接收到包含數據的對象參數時,會默認使用 POST 方法發送請求。

// requestdata 該參數是一個用來構建查詢字符串的鍵和值的對象 $('#dictionary').load('e.php', requestData);

.serialize() 方法。這個方法作用于一個jQuery對象,將匹配的DOM元素轉換成能夠隨Ajax請求傳遞的查詢字符串。

二十七、有時候多了解一些調用Ajax方法過程中的HTTP請求也會給我們帶來方便。為滿足這種需求,jQuery提供了一組函數,通過它們能夠為各種與Ajax相關的事件注冊回調函數。

.ajaxStart() 、 .ajaxStop() 和 .ajaxError() 方法就是這些“觀察員”函數中的三個例子。所有這些“觀察員”都是全局性的,因為無論創建它們的代碼位于何處,當Ajax通信發生時都需要調用它們。而且這些方法都與 .ready() 方法一樣,只能由 $(document) 調用。

當Ajax請求開始且尚未進行其他傳輸時,會觸發 .ajaxStart() 的回調函數。
當最后一次活動請求終止時,則會執行通過 .ajaxStop() 注冊的回調函數。

$(document).ready($loading = $('<div>Loading...</div>') .insertBefore('#dictionary'); $(document).ajaxStart(function() { $loading.show(); }).ajaxStop(function() { $loading.hide(); }); });

二十八、 $.get() 和 .load() 等快捷的Ajax方法并沒有提供錯誤回調參數,因此我們需要找找其他地方是否有解決方案。

除了使用全局的 .ajaxError() 方法,我們還可以利用jQuery的延遲對象系統。

也可以給 .load() 之外的Ajax方法連綴 .done() 、 .always() 和 .fail() 方法,并通過它們添加相應的回調函數即可。

$(document).ready(function() { $('#letter-e a').click(function(event) { event.preventDefault(); var requestData = {term: $(this).text()}; $.get('z.php', requestData, function(data) { $('#dictionary').html(data); }).fail(function(jqXHR) { $('#dictionary') .html('An error occurred: ' + jqXHR.status) .append(jqXHR.responseText); }); }); });

jqXHR.responseText 的內容根據服務器的配置不同可能會有所不同;
jqXHR.status 內容中包含著服務器返回的狀態碼

二十九、JSONP
JSONP無非就是簡單的JSON加上了服務器支持,讓我們能夠向不同的站點發送請求。在請求JSONP數據時,需要提供一個特殊的查詢字符串參數,發送請求的腳本就是通過該參數來收獲數據的。JSONP服務器可以在認為合適的任何時候調用該參數。對于jQuery API站點而言,這個參數(也是默認的名字)是 callback 。
因為可以使用默認回調函數名,所以通過jQuery發送JSONP請求時,唯一要做的就是說明我們想要的是 jsonp 類型的數據。

$(document).ready($ajaxForm = $('#ajax-form'), $response = $('#response'); $ajaxForm.on('submit', function(event) { event.preventDefault(); $.ajax({ url: 'http://book.learningjquery.com/api/', dataType: 'jsonp', data: { title: $('#title').val() }, success: function(data) { console.log(data); } }); }); });

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JAVA AJAX教程第二章-JAVASCRIPT基础知识(2)

    JAVA AJAX教程第二章-JAVASCRIPT基础知识(2)

    2018-03-29 11:00

  • JQuery学习(5-AJAX)

    JQuery学习(5-AJAX)

    2018-03-12 10:10

  • 【JQuery】Ajax

    【JQuery】Ajax

    2018-03-12 08:01

  • JAVA AJAX教程第一章—初识AJAX

    JAVA AJAX教程第一章—初识AJAX

    2018-03-11 11:00

网友点评