jQuery Ajax 全解析

AJAX 是什么？

AJAX是指一种在不重新加载整个页面的情况下，通过后台与服务器进行数据交互并更新部分页面的技术。它允许我们动态修改网页的内容，而不需要点击链接或者进行页面刷新的操作。jQuery则是一个优秀的JavaScript库，提供了非常便捷的AJAX方法。

使用 jQuery 发送 AJAX 请求

$.ajax() 方法

$.ajax() 方法是 jQuery 中最核心的 AJAX 方法，它被用于向服务器发送数据并获取从服务器返回的数据。$.ajax() 方法具有多个参数，其中url、type、data、success和error是最常见的。

例子一：发送 GET 请求

$.ajax({
  url: "example.php", // 要发送请求的url
  type: "GET", // 请求方法
  data: { name: "John", location: "Boston" } // 发送的数据
})
.done(function( msg ) { //请求成功的回调函数
  alert( "Data Saved: " + msg );
})
.fail(function() { //请求失败的回调函数
  alert( "error" );
});

例子二：发送 POST 请求

$.ajax({
  url: "example.php", // 要发送请求的url
  type: "POST", // 请求方法
  data: { name: "John", location: "Boston" } // 发送的数据
})
.done(function( msg ) { // 请求成功的回调函数
  alert( "Data Saved: " + msg );
})
.fail(function() { // 请求失败的回调函数
  alert( "error" );
});

使用 JSONP 跨域请求

当我们需要从不同的域名下发送 AJAX 请求时，就需要使用 JSONP 跨域请求。JSONP（JSON with Padding）是一种跨域请求技术。大多数浏览器无法对跨域进行原生支持，但是通过调用JSONP方法的方式来进行跨域请求是被允许的，JSONP 方法利用了 script 标签的不受同域限制的特性。

例子三：使用 JSONP 跨域

$.ajax({
  url: "http://example.com/path/to/service?callback=?", // 要发送请求的url
  dataType: "jsonp", // 指定返回数据类型
})
.done(function( data ) { // 请求成功的回调函数
  console.log(data); // 输出返回的数据
})
.fail(function() { // 请求失败的回调函数
  alert( "error" );
});

总结

jQuery 的 AJAX 功能非常强大，可用于从服务器获取数据（HTML、XML、JSON）并将数据更新到页面上。上面的示例是 jQuery AJAX 的基本用法。使用 jQuery AJAX 还有很多注意点，例如处理异常和错误信息，设置超时等，这些都是非常重要的，需要在实际开发中进行深入学习和理解。