jQuery學習筆記之 Ajax操作篇（一） - 資料載入_jquery

載入 HTML

我們通常使用載入 HTML 的方法來載入 HTML 片段，並插入到指定位置，假設當前頁面為：

<div></div><button>load</button>

同目錄下的 test.html 檔案內容為：

<span>test</span>

我們可以使用 load 方法來載入 HTML，將其綁定到按鈕的點擊事件上：

 $('button').click(function() {  $('div').load('test.html'); });

點擊按鈕後：

載入 JSON

JSON 即 Javascript Object Notation，直譯過來即 Javascript 對象標記法，因此它能很方便地表示和傳輸資料，它規定鍵和值都必須包含在雙引號內，且函數為非法 JSON 值。

{  "name": "stephenlee",   "sex": "male"}

將上述 JSON 資料儲存在 test.json 檔案內。我們可以使用 getJSON 方法載入 JSON 資料，同樣將其綁定在按鈕的點擊事件上：

 $('button').click(function() {  $.getJSON('test.json'); });

由於 getJSON 方法是作為 jQuery 的全域對象而定義的，因此這裡需要使用 $ 來調用該方法。這裡的 $ 指的是全域 jQuery 對象，而不是 $() 所指的個別 jQuery 對象。因此我們也稱 getJSON 函數為全域函數。
但我們會發現上述代碼只是擷取了 JSON 資料，但看不出任何效果，這裡我們可以使用 getJSON 方法的第二參數作為回呼函數來測試效果：

 $('button').click(function() {  $.getJSON('test.json', function(data) {   console.log(data);   $.each(data, function(index, content) {    console.log(content);   })  }); });

點擊按鈕後，我們來看下 console 內的輸出：

這裡的 each 函數的第一個參數可以接收數組或對象，第二個參數為值回呼函數，將每次迴圈中數組或對象的當前索引和值做為參數。

載入 JS

有時候我們不希望在頁面初次載入時就載入所有的 JS 檔案,而是動態地根據需求來載入，假設目前的目錄下有一個 JS 檔案，內容為一個簡單的 alert：

$(function() { alert('test');//})

我們可以使用全域函數 getScript 來載入該檔案，同樣綁定到按鈕的點擊事件上：

 $('button').click(function() {  $.getScript('test.js'); });

點擊按鈕後，載入 test.js 檔案，並成功觸發 alert。

載入 XML

對 XML 的載入操作與 JSON 類似，因為 XML 文檔的作用也是與資料存放區相關，在同目錄下建立 text.xml 檔案，內容為：

<person><name>stephenlee</name><sex>male</sex></person>

載入 XML 文檔可以直接使用 get 方法，為什麼看上去像一個預設方法，這個可以根據 AJAX 的全稱看出端倪 - Asynchronous JavaScript And XML。
同樣將其綁定在按鈕點擊事件上：

 $('button').click(function() {  $.get('test.xml', function(data) {    console.log(data);  }); });

查看 console 結果為：

這裡需要注意，如果 XML 文檔內的格式錯誤，雖然不會報錯，但是將無法執行回呼函數。