jquery的ajax的資料載入詳解

ajax現在的應用非常的廣發，當然它的優勢也是非常的突出的，它可以再不重新整理頁面的情況下從可以從伺服器讀取資料，這樣可以有效的節省了網頁的下載內容，對使用者來說也是非常任性話的。

載入HTML:

通常使用載入HTML的方法來載入HTML片段，並插入到指定位置。

當前頁面的程式碼為:

[HTML] 純文字檢視 複製程式碼
<div></div>
<button>load</button>

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

[HTML] 純文字檢視 複製程式碼
<span>test</span>

可以使用 load 方法來載入 HTML，將其繫結到按鈕的點選事件上:

[JavaScript] 純文字檢視 複製程式碼
$('button').click(function() {
  $('div').load('test.html');
});

點選按鈕後:

載入JSON:

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

[JavaScript] 純文字檢視 複製程式碼
{
  "name": "stephenlee", 
  "sex": "male"
}

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

[JavaScript] 純文字檢視 複製程式碼
$('button').click(function() {
  $.getJSON('test.json');
});

由於getJSON方法是作為jQuery的全域性物件而定義的，因此這裡需要使用 $ 來呼叫該方法。這裡的 $ 指的是全域性jQuery物件，而不是$()所指的個別 jQuery物件。因此我們也稱getJSON函式為全域性函式。

但我們會發現上述程式碼只是獲取了JSON資料，但看不出任何效果，這裡我們可以使用getJSON方法的第二引數作為回撥函式來測試效果:

[JavaScript] 純文字檢視 複製程式碼
$('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:

[JavaScript] 純文字檢視 複製程式碼
$(function() {
  alert('test');
})

可以使用全域性函式getScript 來載入該檔案，同樣繫結到按鈕的點選事件上:

[JavaScript] 純文字檢視 複製程式碼
$('button').click(function() {
  $.getScript('test.js');
});

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

載入XML:

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

[XML] 純文字檢視 複製程式碼
<person>
<name>stephenlee</name>
<sex>male</sex>
</person>

載入XML文件可以直接使用get方法，為什麼看上去像一個預設方法，這個可以根據 AJAX 的全稱看出端倪 - Asynchronous JavaScript And XML。

同樣將其繫結在按鈕點選事件上:

[JavaScript] 純文字檢視 複製程式碼
$('button').click(function() {
 $.get('test.xml', function(data) {
   console.log(data);
 });
});

檢視console結果為: