目录

• 基本的AJAX请求
• 简化方法
• 使用.done(), .fail(), .always()处理结果
• 发送JSON数据
• JSONP跨域请求
• AJAX全局事件
• 设置请求头和超时
• 序列化表单数据
• 错误处理与调试
• 防止XSS攻击
• [使用KaTeX parse error: Expected 'EOF', got '#' at position 25: …p()配置全局AJAX选项](#̲使用.ajaxSetup()配置全局AJAX选项)
• [使用KaTeX parse error: Expected 'EOF', got '#' at position 16: .param()序列化对象](#̲使用.param()序列化对象)
• 使用$.ajaxPrefilter()和$.ajaxTransport()进行预处理和传输层定制
• 文件上传
• CORS跨源资源共享
• 异常处理与错误码解读
• Promise与Deferred对象

---

jQuery的AJAX功能极大地简化了前端与后端的数据交互过程，使得开发者能够异步地从服务器请求数据，更新页面内容，而无需刷新整个页面。

基本的AJAX请求

使用$.ajax()方法是最通用的AJAX请求方式，它提供了丰富的配置选项来满足各种需求。

$.ajax({
  url: "example.php", // 请求地址
  type: "GET", // 请求类型，默认为GET
  data: { name: "John", city: "New York" }, // 发送到服务器的数据
  dataType: "json", // 预期服务器返回的数据类型
  success: function(response) {
    console.log("Success:", response);
  },
  error: function(xhr, status, error) {
    console.error("Error:", error);
  }
});

简化方法

对于常见的GET和POST请求，jQuery提供了.get()和.post()等简化方法。

// GET请求
$.get("example.php", function(data, status) {
  console.log("Data: " + data + "\nStatus: " + status);
});

// POST请求
$.post("example.php", { name: "John" }, function(data) {
  console.log("Response:", data);
});

使用.done(), .fail(), .always()处理结果

从jQuery 1.8开始，推荐使用Promise接口处理AJAX结果。

$.ajax({
  url: "example.php"
})
  .done(function(data) {
    console.log("Success:", data);
  })
  .fail(function(xhr, status, error) {
    console.error("Error:", error);
  })
  .always(function() {
    console.log("Request completed.");
  });

发送JSON数据

当需要发送JSON格式的数据到服务器时，确保设置dataType和contentType。

$.ajax({
  url: "api/saveData.php",
  type: "POST",
  data: JSON.stringify({ user: "Alice", age: 30 }),
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(response) {
    console.log("Data saved:", response);
  }
});

JSONP跨域请求

对于跨域请求，JSONP是一种常用的解决方案。使用.getJSON()或直接在.ajax()中设置dataType: "jsonp"。

$.getJSON("http://api.example.com/data?callback=?", function(data) {
  console.log("Received data:", data);
});

AJAX全局事件

可以在文档级别绑定事件，监听所有AJAX请求的状态。

$(document).ajaxStart(function() {
  $("#loading").show();
});

$(document).ajaxStop(function() {
  $("#loading").hide();
});

设置请求头和超时

可以自定义请求头和设置请求超时。

$.ajax({
  url: "example.php",
  headers: { "Authorization": "Bearer yourTokenHere" },
  timeout: 3000, // 设置超时时间，单位为毫秒
  success: function(data) {
    console.log("Response:", data);
  },
  error: function(xhr, status, error) {
    if (status === "timeout") {
      console.error("Timeout occurred.");
    } else {
      console.error("Error:", error);
    }
  }
});

序列化表单数据

使用serialize()方法可以快速将表单数据转换成字符串，以便于通过AJAX发送。

$("#myForm").submit(function(event) {
  event.preventDefault();
  $.ajax({
    url: "submit.php",
    type: "POST",
    data: $(this).serialize(),
    success: function(response) {
      console.log("Form submitted successfully.");
    }
  });
});

错误处理与调试

• 检查HTTP状态码：在.error()回调中，xhr.status提供了HTTP状态码。
• 使用开发者工具：浏览器的网络面板可以查看详细的请求和响应信息。
• 错误提示：对于用户友好的错误提示，可以在.error()中处理。

防止XSS攻击

• 验证和清理输入：在服务器端验证并清理所有用户输入。
• 使用HTTPS：确保敏感数据传输安全。
• 避免直接输出用户数据：使用安全的模板引擎或编码输出。

使用$.ajaxSetup()配置全局AJAX选项

如果你希望对所有的AJAX请求应用一些默认设置，可以使用$.ajaxSetup()方法。

$.ajaxSetup({
  beforeSend: function(xhr) {
    // 在每个请求发送前执行的函数
    console.log("Request being sent...");
  },
  complete: function(xhr, status) {
    // 在每个请求完成（无论成功还是失败）后执行的函数
    console.log("Request completed.");
  },
  error: function(xhr, status, error) {
    // 自定义错误处理
    console.error("Global error handler:", error);
  }
});

使用$.param()序列化对象

在发送复杂数据时，$.param()可以将对象序列化为URL编码的字符串形式。

var data = {
  user: "John Doe",
  preferences: {
    theme: "dark",
    notifications: true
  }
};

var serializedData = $.param(data);

console.log(serializedData);

使用$.ajaxPrefilter()和$.ajaxTransport()进行预处理和传输层定制

• $.ajaxPrefilter() 可以在每个AJAX请求发送之前进行预处理，修改请求配置。

$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
  // 添加一个自定义请求头
  options.headers = options.headers || {};
  options.headers["X-Custom-Header"] = "value";
});

• $.ajaxTransport() 允许你定义自定义的传输机制，适用于需要特殊处理的场景，如文件上传。

文件上传

jQuery的AJAX不直接支持文件上传，但可以通过表单数据(FormData)和xhrFields配置来实现。

var formData = new FormData();
formData.append("file", $("#uploadFile")[0].files[0]);

$.ajax({
  url: "upload.php",
  type: "POST",
  data: formData,
  processData: false, // 告诉jQuery不要去处理发送的数据
  contentType: false, // 告诉jQuery不要去设置`Content-Type`头
  success: function(response) {
    console.log("File uploaded successfully.");
  },
  error: function(xhr, status, error) {
    console.error("Error uploading file:", error);
  }
});

CORS跨源资源共享

在进行跨域请求时，了解CORS（Cross-Origin Resource Sharing）协议至关重要。jQuery的AJAX请求会遵循CORS规范，但需要注意服务器端也需要正确配置CORS头部。

异常处理与错误码解读

• HTTP状态码：了解常见HTTP状态码的含义，如200（成功）、404（未找到）、500（服务器内部错误）等。
• 解析错误信息：服务器返回的错误信息通常包含在响应体中，可以利用.fail()回调进行处理。

Promise与Deferred对象

jQuery的AJAX请求返回的是一个jqXHR对象，它实现了Promise接口。这意味着你可以使用.then()、.catch()等方法来处理异步操作。

$.ajax("data.json")
  .then(function(data) {
    console.log("Success:", data);
  })
  .catch(function(error) {
    console.error("Error:", error);
  });