jQuery | AJAX 完整参考

AJAX (Asynchronous JavaScript and XML) 是一种用于通过浏览器向服务器发送异步请求并获取数据的技术。jQuery 是一个流行的 JavaScript 库，提供了对 AJAX 的简化封装。在本文中，我们将介绍如何使用 jQuery 和 AJAX 来实现网页的异步请求。

1. jQuery AJAX 方法

jQuery 提供了多个方法来执行 AJAX 请求：

1.1 jQuery.ajax()

jQuery.ajax() 方法是最基本的 AJAX 方法，用于向服务器发送一个异步请求并获取数据。该方法接受一个对象作为参数，可以设置请求的类型、URL、数据、成功回调函数等参数。

$.ajax({
  type: "GET",
  url: "data.php",
  data: { name: "John", location: "Boston" },
  success: function(data){
    alert("Data Loaded: " + data);
  }
});

此处是 ajax 方法的代码片段

1.2 jQuery.get()

jQuery.get() 方法用于向服务器发送一个 GET 请求并获取数据。该方法接受三个参数：URL、数据、成功回调函数。

$.get("data.php", { name: "John", location: "Boston" }, function(data){
  alert("Data Loaded: " + data);
});

此处是 get 方法的代码片段

1.3 jQuery.post()

jQuery.post() 方法用于向服务器发送一个 POST 请求并获取数据。该方法接受三个参数：URL、数据、成功回调函数。

$.post("data.php", { name: "John", location: "Boston" }, function(data){
  alert("Data Loaded: " + data);
});

此处是 post 方法的代码片段

1.4 jQuery.load()

jQuery.load() 方法用于从服务器加载 HTML 并将其插入到元素中。该方法接受一个 URL 参数和一个可选的回调函数。

$("#result").load("data.html", function(){
  alert("Load was performed.");
});

此处是 load 方法的代码片段

2. AJAX 请求设置

除了基本的请求方法外，jQuery 还提供了一些设置选项，可以自定义 AJAX 请求的各种参数。

2.1 async

默认情况下，AJAX 请求是异步的。如果你需要发送一个同步请求，可以将 async 参数设置为 false。

$.ajax({
  async: false,
  // other options
});

此处是 async 设置参数的代码片段

2.2 cache

默认情况下，GET 请求会被浏览器缓存。如果你需要禁用缓存，可以将 cache 参数设置为 false。

$.ajax({
  cache: false,
  // other options
});

此处是 cache 设置参数的代码片段

2.3 contentType

contentType 参数用于设置发送数据的 MIME 类型。

$.ajax({
  contentType: "application/json",
  // other options
});

此处是 contentType 设置参数的代码片段

2.4 dataType

dataType 参数用于指定服务器返回的数据类型。常见的类型有 "xml"、"json"、"text" 等。

$.ajax({
  dataType: "json",
  // other options
});

此处是 dataType 设置参数的代码片段

2.5 headers

headers 参数用于设置请求头。

$.ajax({
  headers: { "X-My-Header": "value" },
  // other options
});

此处是 headers 设置参数的代码片段

2.6 timeout

timeout 参数用于设置请求超时时间（毫秒）。

$.ajax({
  timeout: 5000,
  // other options
});

此处是 timeout 设置参数的代码片段

2.7 processData

processData 参数用于指定是否处理发送的数据（默认为 true）。

$.ajax({
  processData: false,
  // other options
});

此处是 processData 设置参数的代码片段

2.8 beforeSend

beforeSend 参数用于在发送请求之前调用的函数。

$.ajax({
  beforeSend: function(xhr){
    xhr.setRequestHeader("X-My-Header", "value");
  },
  // other options
});

此处是 beforeSend 设置参数的代码片段

3. AJAX 回调函数

AJAX 方法允许你指定多个回调函数，以便在请求成功、失败、完成等不同阶段执行特定代码。

3.1 success

success 回调函数在请求成功时执行。

$.ajax({
  success: function(data){
    // handle data
  }
});

此处是 success 回调函数的代码片段

3.2 error

error 回调函数在请求失败时执行。

$.ajax({
  error: function(xhr, status, error){
    // handle error
  }
});

此处是 error 回调函数的代码片段

3.3 complete

complete 回调函数在请求完成时执行，无论请求成功或失败。

$.ajax({
  complete: function(){
  }
});

此处是 complete 回调函数的代码片段

4. AJAX 示例

下面是一个完整的 AJAX 示例，用于向服务器发送一个 POST 请求并获取 JSON 数据。

$.ajax({
  type: "POST",
  url: "url",
  dataType: "json",
  data: { name: "John", location: "Boston" },
  success: function(data){
    // handle success
  },
  error: function(xhr, status, error){
    // handle error
  }
});

此处是草稿片段。