JavaScript $.ajax() 最新用法详解

一、基础语法与核心参数

$.ajax({
  url: "https://api.example.com/data",
  method: "GET", // 推荐使用 method 替代 type
  data: { key: "value" },
  dataType: "json",
  headers: { "Authorization": "Bearer token" },
  success: function(response) {},
  error: function(xhr, error) {},
  complete: function() {},
});

​关键参数更新说明

参数名	类型	说明
method	String	​推荐替代 type，支持 GET, POST, PUT, DELETE 等。
​headers	Object	自定义请求头（如 Authorization），取代旧版 jsonp 的回调名称配置。
​async	Boolean	默认 true（异步），设为 false 会阻塞主线程（慎用）。

​二、现代回调方式（Promise 风格）​
jQuery 3.x 开始全面支持 ​Promise API，推荐使用 .done(), .fail(), .always() 替代旧版回调：

$.ajax({
  url: "/api",
  method: "POST",
  data: JSON.stringify({ name: "John" }),
})
.done(function(response) {
  console.log("成功:", response);
})
.fail(function(jqXHR, textStatus) {
  console.error("失败原因:", textStatus); // "timeout", "error", "abort"
})
.always(function() {
  console.log("请求完成（无论成败）");
});

​三、异步处理与 async/await
通过将 $.ajax() 返回的 jqXHR 对象转换为 ​Promise，可使用 async/await：

async function fetchData() {
  try {
    const response = await $.ajax({
      url: "/api/data",
      method: "GET",
      dataType: "json",
    });
    console.log(response);
  } catch (error) {
    if (error.responseJSON) {
      console.error("服务器错误:", error.responseJSON.message);
    } else {
      console.error("网络错误:", error.statusText);
    }
  }
}
fetchData();

​四、高级场景示例
​1. 发送 JSON 数据

$.ajax({
  url: "/submit",
  method: "POST",
  contentType: "application/json",
  data: JSON.stringify({ email: "user@example.com" }),
  dataType: "json",
})
.done(function(data) {
  console.log("提交成功:", data);
});

​2. 文件上传

const formData = new FormData(document.getElementById("uploadForm"));

$.ajax({
  url: "/upload",
  method: "POST",
  data: formData,
  processData: false, // 防止 jQuery 拆分 FormData
  contentType: false, // 不设置 Content-Type（浏览器自动处理）
})
.done(function(response) {
  console.log("上传成功:", response);
});

​3. 跨域请求（CORS）​

$.ajax({
  url: "https://api.example.com/cross-origin",
  method: "GET",
  xhrFields: {
    withCredentials: true, // 发送 Cookie
  },
  headers: {
    "Access-Control-Allow-Origin": "*", // 服务器需配置
  },
})
.done(function(data) {
  console.log("跨域数据:", data);
});

​4. 请求取消

const xhr = $.ajax({
  url: "/long-task",
  method: "GET",
  timeout: 5000, // 5秒超时
});

// 取消请求
setTimeout(() => xhr.abort(), 3000);

​五、错误处理最佳实践

$.ajax({
  url: "/api/data",
  method: "GET",
})
.fail(function(jqXHR, textStatus, errorThrown) {
  switch (jqXHR.status) {
    case 400:
      console.error("参数错误:", jqXHR.responseJSON.errors);
      break;
    case 401:
      console.error("未授权，请登录");
      break;
    case 404:
      console.error("资源不存在");
      break;
    default:
      console.error("请求失败:", textStatus, errorThrown);
  }
});

​六、安全注意事项
1.​CSRF 令牌防护​（Spring Security 等框架需要）：

$.ajaxSetup({
  headers: {
    "X-CSRFToken": csrfToken // 从 meta 标签或 cookie 中获取
  }
});

​2.防止 XSS 攻击：
对用户输入使用 encodeURIComponent() 或 DOMPurify 清理。
​3.HTTPS 强制：

$.ajax({
  url: "https://api.example.com", // 确保协议为 HTTPS
});

​七、替代方法：更简洁的 API
对于简单请求，可使用以下快捷方法：
| | |

| | |

方法	说明
$.get()	GET 请求
$.post()	POST 请求
$.getJSON()	GET + JSONP
$.ajaxSetup()	全局默认配置

// 使用 $.getJSON()
$.getJSON("/api/data")
  .done(console.log)
  .fail(console.error);

​八、jQuery 3.x 的重要变化

1. ​弃用 type 参数：改用 method。 ​
2. 默认 cache: true：GET 请求默认缓存（可手动设置 cache:false）。
3. **jsonp 改为 dataType: “jsonp” **：

$.ajax({
  url: "https://api.example.com/data",
  dataType: "jsonp",
});

​九、调试技巧
​1.查看网络请求：
浏览器开发者工具（F12）的 ​Network 面板。
​2.启用调试日志：

$.ajaxSetup({
  debug: true // 输出详细日志到控制台
});

通过掌握以上内容，可以高效使用 $.ajax() 处理复杂的前端请求场景，同时结合现代 JavaScript 特性提升代码可读性和可维护性。