jQuery Ajax詳解

一、Ajax概述

Ajax即「Asynchronous JavaScript and XML」的縮寫，指的是通過JavaScript進行非同步數據交互的技術。它的優點是可以在不刷新頁面的情況下，通過非同步載入數據實現頁面的部分更新，從而提高用戶體驗。

Ajax可以使用原生的JavaScript進行開發，但是使用jQuery進行開發更加方便。jQuery提供了豐富的Ajax方法，可以顯著地減少代碼量，提高開發效率。

二、Ajax方法

1. $.ajax()

$.ajax()是jQuery中最核心的Ajax方法，它可以完成所有Ajax請求的操作。下面是$.ajax()的基本語法：

$.ajax({
  url: "test.php",
  method: "POST",
  data: { name: "John", age: 30 },
  success: function(data){
    console.log(data);
  },
  error: function(){
    alert("請求出錯");
  }
});

上述代碼表示向test.php發送一個POST請求，請求數據為{name: “John”, age: 30}，成功時輸出返回數據，出錯時彈出提示框。

2. $.get()

$.get()用於發送GET請求。下面是$.get()的基本語法：

$.get("test.php", { name: "John", age: 30 }, function(data){
  console.log(data);
});

上述代碼表示向test.php發送一個GET請求，請求數據為{name: “John”, age: 30}，成功時輸出返回數據。

3. $.post()

$.post()用於發送POST請求。下面是$.post()的基本語法：

$.post("test.php", { name: "John", age: 30 }, function(data){
  console.log(data);
});

上述代碼表示向test.php發送一個POST請求，請求數據為{name: “John”, age: 30}，成功時輸出返回數據。

三、Ajax參數

1. url

url指的是被請求的地址。它可以是一個相對地址，也可以是一個絕對地址。下面是一個相對地址的例子：

$.ajax({
  url: "test.php",
  //...
});

下面是一個絕對地址的例子：

$.ajax({
  url: "https://www.example.com/test.php",
  //...
});

2. method

method表示請求使用的HTTP方法。它可以是”GET”、”POST”、”PUT”、”DELETE”等。默認為”GET”。下面是一個POST請求的例子：

$.ajax({
  url: "test.php",
  method: "POST",
  //...
});

3. data

data表示發送到伺服器的數據。它可以是一個對象，也可以是一個字元串。下面是一個對象的例子：

$.ajax({
  url: "test.php",
  method: "POST",
  data: { name: "John", age: 30 },
  //...
});

4. dataType

dataType表示預期伺服器返回的數據類型。它可以是”xml”、”json”、”script”、”text”等。默認為智能猜測，可以根據返回的MIME類型自動判斷。下面是一個JSON數據的例子：

$.ajax({
  url: "test.php",
  dataType: "json",
  success: function(data){
    console.log(data);
  },
  //...
});

5. success/error

success表示請求成功時的回調函數，error表示請求錯誤時的回調函數。下面是一個完整的例子：

$.ajax({
  url: "test.php",
  method: "POST",
  data: { name: "John", age: 30 },
  dataType: "json",
  success: function(data){
    console.log(data);
  },
  error: function(){
    alert("請求出錯");
  }
});

四、Ajax事件

除了success和error事件之外，還有許多其他的Ajax事件。下面是一些常用的Ajax事件：

• beforeSend: 在發送請求之前觸發。
• complete: 當請求完成時觸發（無論請求成功或失敗）。
• success: 當請求成功時觸發。
• error: 當請求失敗時觸發。

下面是一個使用beforeSend事件的例子：

$.ajax({
  url: "test.php",
  method: "POST",
  beforeSend: function(){
    $("#loading").show();
  },
  success: function(data){
    console.log(data);
  },
  error: function(){
    alert("請求出錯");
  },
  complete: function(){
    $("#loading").hide();
  }
});

上述代碼表示在發送請求之前顯示loading圖標，在請求完成後隱藏loading圖標。

五、Ajax跨域請求

由於瀏覽器的同源策略限制，Ajax只能向同域名下的伺服器發送請求。如果要向其他域名的伺服器發送請求，需要跨域請求。

跨域請求有多種解決方案，其中比較常用的是JSONP和CORS。

1. JSONP

JSONP實現跨域請求的原理是利用標籤可以跨域載入資源的特性。具體思路是：向伺服器請求一個JavaScript文件，該文件會返回一個函數的調用，函數的參數就是需要返回的數據。

下面是一個JSONP請求的例子：

<script>
function handleResponse(data){
  console.log(data);
}

$.ajax({
  url: "https://www.example.com/api?callback=handleResponse",
  dataType: "jsonp",
  //...
});
</script>

上述代碼表示向https://www.example.com/api發送一個JSONP請求，返回的數據將被handleResponse函數處理。

2. CORS

CORS是一種跨域解決方案，它利用HTTP頭部添加額外信息來告訴瀏覽器，允許跨域請求。需要注意的是，伺服器需要允許來自特定域名的跨域請求，否則該解決方案將無效。

下面是一個CORS請求的例子：

$.ajax({
  url: "https://www.example.com/api",
  method: "POST",
  data: { name: "John", age: 30 },
  dataType: "json",
  success: function(data){
    console.log(data);
  },
  error: function(){
    alert("請求出錯");
  },
  xhrFields: {
    withCredentials: true
  }
});

上述代碼表示向https://www.example.com/api發送一個CORS請求，需要withCredentials欄位設置為true，才能允許跨域請求。

六、Ajax技巧

1. 防止重複提交

當用戶頻繁點擊按鈕時，可能會導致重複提交請求，造成不必要的伺服器負擔。為了避免這種情況，可以在發送請求時禁用按鈕，請求完成時再啟用按鈕。

下面是一個實現防止重複提交的代碼：

var submitting = false;

$("#submit-btn").on("click", function(){
  if(!submitting){
    submitting = true;
    $(this).prop("disabled", true);
    
    $.ajax({
      url: "test.php",
      method: "POST",
      data: { name: "John", age: 30 },
      success: function(data){
        console.log(data);
      },
      error: function(){
        alert("請求出錯");
      },
      complete: function(){
        submitting = false;
        $("#submit-btn").prop("disabled", false);
      }
    });
  }
});

上述代碼表示當submitting為false時，才發送請求，完成請求後將submitting重置為false，啟用按鈕。

2. 實現搜索提示

當用戶輸入關鍵詞時，可能需要給出相應的搜索提示。可以通過發送Ajax請求，以輸入關鍵詞為參數，獲取相關的搜索提示信息。

下面是一個實現搜索提示的代碼：

$("#search-input").on("input", function(){
  var keyword = $(this).val();
  
  $.ajax({
    url: "test.php",
    method: "POST",
    data: { keyword: keyword },
    dataType: "json",
    success: function(data){
      var html = "";
      
      for(var i=0; i<data.length; i++){
        html += "<li>" + data[i] + "</li>";
      }
      
      $("#search-list").html(html);
    },
    error: function(){
      alert("請求出錯");
    }
  });
});

上述代碼表示當用戶輸入關鍵詞時，向伺服器發送請求，獲取相關的搜索提示信息，並將提示信息顯示在頁面上。

七、總結

本文對jQuery Ajax進行了詳細的闡述，包括Ajax方法、Ajax參數、Ajax事件、Ajax跨域請求以及Ajax技巧。通過本文的學習，讀者將對Ajax有更深入的理解，能夠更加熟練地使用jQuery進行Ajax開發。