$.ajaxPrefilter() 过滤 Ajax 请求

如果我们从事过服务器端 Web 开发，那么我们会承认过滤器是实现某些目标（例如输入值卫生等）的好方法。
现在 jQuery 在客户端也使用 ajaxPrefilter事件提供此功能。
使用此功能，我们可以在将所有 AJAX 调用发送到服务器之前对其进行过滤。

在发送请求之前，所有传递给 $.ajax()函数的 Ajax 选项/参数都可以在 $.ajaxPrefilter()中更改（“过滤”）。
例如，如果我们希望发送到以“/add”结尾的 URL 的所有 HTTP 请求都必须是 HTTP POST 调用，那么我们可以在此处应用该逻辑。

$.ajaxPrefilter(function(options, oroirnalOptions, jqXHR){
    if(options.url.indexOf("/add") != -1) 
    {
        options.type = "POST";
    }
});

这里的参数是：

• options- 是请求选项
• oroirnalOptions- 是提供给 $.ajax() 方法的选项，未经修改，因此没有来自 ajaxSettings 的默认值
• jqXHR- 是请求的 jqXHR 对象

同步与异步通信

默认情况下，所有通过 jQuery 发送的 ajax 请求都是异步的。
如果要进行同步调用（完全不推荐这样做，因为它会导致浏览器冻结，这会导致一些非常不满意的用户）在函数调用中使用 async : false参数，如下所示：

$.ajax({
    url: "/app-url/relative-url",
    type: "POST", 
    async: false,
    dataType: 'json',    
    data: {
        key : "value",
    }
})
.done (function(data, textStatus, jqXHR) { 
	alert("Success: " + response); 
})
.fail (function(jqXHR, textStatus, errorThrown) { 
	alert("Error"); 
})
.always (function(jqXHROrData, textStatus, jqXHROrErrorThrown) { 
	alert("complete"); 
});

在 jQuery 1.8 及更高版本中，不推荐使用 async : false选项。

调用 HTTP 方法

下面说明了如何通过 jQuery ajax 调用不同的 HTTP 方法。

jQuery Ajax HTTP GET 或者 DELETE 方法

$.ajax({
    url: "/app-url/relative-url",
    type: "GET", //Or "DELETE" for http delete calls
    dataType: 'json',    
})
.done (function(data, textStatus, jqXHR) { 
	alert("Success: " + response); 
})
.fail (function(jqXHR, textStatus, errorThrown) { 
	alert("Error"); 
})
.always (function(jqXHROrData, textStatus, jqXHROrErrorThrown) { 
	alert("complete"); 
});

jQuery Ajax HTTP POST 或者 PUT 方法

$.ajax({
    url: "/app-url/relative-url",
    type: "POST", //Use "PUT" for HTTP PUT methods
    dataType: 'json',   
    data: {
        key : "value",
    }
})
.done (function(data, textStatus, jqXHR) { 
	alert("Success: " + response); 
})
.fail (function(jqXHR, textStatus, errorThrown) { 
	alert("Error"); 
})
.always (function(jqXHROrData, textStatus, jqXHROrErrorThrown) { 
	alert("complete"); 
});

$.ajax() 方法

jQuery Ajax 的根是 ajax() 函数。
此函数用于执行默认异步的 HTTP 请求。
使用这个函数的语法是：

$.ajax({name:value, name:value, ... })

这些参数为 AJAX 请求指定一个或者多个名称/值对。
下表中可能的名称/值：

jQuery AJAX 示例（ v1.8以下版本）

$.ajax({
	url: "/app-url/relative-url", 
	data: {
        name : "The name",
        desc : "The description"
    },
	success: function(data, textStatus, jqXHR)
	{
    	alert("Success: " + response); 
	},
	error: function(jqXHR, textStatus, errorThrown)
	{
    	alert("Error"); 
	}
});

jQuery AJAX 示例（ v1.8 及以上版本）

$.ajax({
    url: "/app-url/relative-url",
    data: {
        name : "The name",
        desc : "The description"
    }
})
.done (function(data, textStatus, jqXHR) { 
	alert("Success: " + response); 
})
.fail (function(jqXHR, textStatus, errorThrown) { 
	alert("Error"); 
})
.always (function(jqXHROrData, textStatus, jqXHROrErrorThrown) { 
	alert("complete"); 
});

全局事件处理程序

除了以上 3 种方法，例如：done()、fail()或者 always()，jQuery 有一组全局 AJAX 函数，我们可以使用它们来监听所有通过发送的 AJAX 请求的 AJAX 事件jQuery。
让我们来看看它们：

$.ajaxSend()

使用 ajaxSend()函数注册的回调函数总是在通过 jQuery 发送 AJAX 请求之前调用。

$(document).ajaxSend(function() {
    console.log("called before each send");
});

$.ajaxStart()

每当要发送 Ajax 请求时，jQuery 都会检查是否还有其他未完成的 Ajax 请求。
如果没有正在进行，jQuery 会触发 ajaxStart事件。

如果在全局选项设置为 false 的情况下调用 $.ajax()或者 $.ajaxSetup()，则不会触发 ajaxStart()方法。

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

$.ajaxStop()

每当 Ajax 请求完成时，jQuery 会检查是否有任何其他未完成的 Ajax 请求。
如果没有，jQuery 会触发 ajaxStop事件。

如果在全局选项设置为 false 的情况下调用 $.ajax() 或者 $.ajaxSetup()， .ajaxStop() 方法将不会触发。

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

$.ajaxSuccess()

每当 Ajax 请求成功完成时，jQuery 就会触发 ajaxSuccess事件。

$( document ).ajaxSuccess(function( event, xhr, settings ) {
  	$( "#msg" ).append( "<li>Successful Request!</li>" );
});

$.ajaxError()

每当 Ajax 请求完成并出现错误时，jQuery 就会触发 ajaxError事件。

$( document ).ajaxError(function( event, xhr, settings ) {
  	$( "#msg" ).append( "<li>Failed Request!</li>" );
});

$.ajaxComplete()

每当 Ajax 请求完成时，jQuery 就会触发 ajaxComplete事件。

$( document ).ajaxComplete(function( event, xhr, settings ) {
  	$( "#msg" ).append( "<li>Request Completed !!</li>" );
});

jQuery 中的其他 Ajax 驱动函数

下面我们通过内部使用ajax的jQuery库提供的其他有用的功能，可以直接使用。

$.get() 和 $.post() 函数

jQuery 具有这些功能，可用于发送简化的 HTTP GET 和 HTTP POST 请求。
这是一个示例，展示了如何使用 jQuery 的 $.get()函数：

var parameters = { p1 : "val1", p2 : "val2"};
$.get( "/app/url", parameters )
.done(function(data) {
    $("#label").html(data);
})
.fail(function() {
    alert( "error" );
})
.always(function() {
    alert( "finished" );
});

类似地，我们可以使用 $.post() 函数来发出 HTTP POST 请求。

var parameters = { p1 : "val1", p2 : "val2"};
$.post( "/app/url", parameters )
.done(function(data) {
    $("#label").html(data);
})
.fail(function() {
    alert( "error" );
})
.always(function() {
    alert( "finished" );
});

$.load() 函数

jQuery load() 函数通过 AJAX 加载一些 HTML 并将其插入到所选元素中。
这是一个简单的后台 HTTP GET 方法，它从服务器获取一些 HTML 并将其插入到元素的 DOM 中。

$("#loadTarget").load("html-response.html");

我们也可以只插入加载的 HTML 的一部分。
如果在 url后面添加一个 space + jQuery selector字符串，那么 load()将只插入与选择器匹配的已加载 HTML 部分。

$("#loadTarget").load("html-response.html #someDiv");

在上面的例子中，ajax 调用将从 URL html-response.html加载 HTML 响应，然后它会为 id=someDiv执行响应的 jQuery ID 选择器，然后它将结果 HTML 插入到 loadTarget的 innerHTML 中。

如果加载的 HTML 包含任何 JavaScript，它将在 HTML 插入目标 HTML 元素时执行。
但是，如果我们加载一个片段（URL + jQuery 选择器），那么在插入 HTML 之前，在加载的文件中找到的任何 JavaScript 都会被删除。

$.getScript() 函数

jQuery 中的 $.getScript() 函数加载一个 JavaScript 文件并执行它。
此函数使用 jQuery 的底层 AJAX 函数，因此 $.getScript() 函数由于跨域限制无法从其他域加载脚本。
例如

$.getScript("js/myscript.js");

$.ajaxSetup() 来全球化参数

是不是觉得给所有ajax请求传递一组通用参数很无聊，可以使用$.ajaxSetup()函数注册一次，在所有ajax调用中复用。
$.ajaxSetup()函数可用于设置用于所有 AJAX 调用的选项，包括通过 $.ajax()、$.load()、$.get()执行的那些等等。

我们可以在$.ajaxSetup()中设置所有选项，这些选项可以设置为$.ajax()调用。
例如

$.ajaxSetup({
    type : "POST"
});

上面的函数将使来自应用程序的所有 jQuery ajax 请求默认为 HTTP POST 方法。
所以任何时候，你想要发送一个 HTTP GET 方法，你必须在特定的 $.ajax()调用中显式设置它，如下所示：

$.ajax({
    url  : "/app-url/relative-url",
    type : "GET"
});

jqXHR (jQuery XMLHttpRequest) 与 XHR (XMLHttpRequest)

jQuery 1.8 通过 jQuery 为 ajax 模式带来了重大变化。
这个变化是$.ajax()方法的返回类型。
以前直到版本 1.7，返回类型是 XHR例如：XMLHttpRequest，但从版本 1.8 是 jqXHR，例如：jQuery XMLHttpRequest。

在 jQuery 1.8 中，库使用超集 API 包装浏览器原生 XMLHttpRequest对象并返回 jqXHR对象。
jqXHR对象模拟了原生的 XHR功能并提供了一些更多的特性，例如

• 它处理 HTTP 请求标头（Last-Modified、etag、Content-Type、MIME 类型等……）
• 它处理请求的回调（包括承诺回调 .done()、.fail() 等...）
• 它处理为请求设置的任何预过滤器
• 它处理为请求设置的任何超时
• 它处理任何跨域调用（包括 jsonp）

$.ajax() 返回的 jqXHR 对象实现了 Promise 接口。
该对象具有 Promise 的所有属性、方法和行为。

jQuery 库编写者已努力使其向后兼容，但它不支持 onreadystatechange()方法。