# 完整的 jQuery Ajax（`$.ajax`）教程

> 原文： [https://howtodoinjava.com/jquery/jquery-ajax-tutorial/](https://howtodoinjava.com/jquery/jquery-ajax-tutorial/)

在本 [Ajax 教程](//howtodoinjava.com/scripting/complete-ajax-tutorial/)中，我们已经学习了 [Ajax](https://en.wikipedia.org/wiki/Ajax_%28programming%29)（异步 JavaScript 和 XML）。 我们了解了有关 ajax 的工作原理和基本组成部分的基本但重要的概念。 让我们继续进行讨论，看看如何利用 jQuery 充分利用 ajax 的功能来使应用开发变得简单，快速和有效。

```java
Table of Contents

$.ajax() Method
jqXHR (jQuery XMLHttpRequest) vs. XHR (XMLHttpRequest)
Invoking jQuery Ajax HTTP Methods
Synchronous vs. Asynchronous Communication
jQuery Ajax Global Event Handlers
	$.ajaxSend()
	$.ajaxStart()
	$.ajaxStop()
	$.ajaxSuccess()
	$.ajaxError()
	$.ajaxComplete()
Using $.ajaxSetup() to Globalize Parameters
Using $.ajaxPrefilter() to filter Ajax Requests
Other Ajax Powered Functions in jQuery
	$.get() and $.post() Functions
	$.load() Function
	$.getScript()

```

## `$.ajax()`方法

jQuery Ajax 的**根是`ajax()`函数**。 此函数用于执行默认情况下异步的 HTTP 请求。 使用此函数的语法是：

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

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

| 名称 | 值/说明 |
| --- | --- |
| `async` | 一个布尔值，指示是否应异步处理请求。 默认为`true`。 请注意，从 jQuery 1.8 开始，`async: false`的使用已被弃用。 您必须使用`success` / `error` / `complete`回调选项，而不要使用`jqXHR`对象的相应方法，例如`jqXHR.done()`或已弃用的`jqXHR.success()`。 |
| `beforeSend(xhr)` | 发送请求之前运行的函数 |
| `cache` | 一个布尔值，指示浏览器是否应缓存请求的页面。 默认为`true` |
| `complete(xhr,status)` | 请求完成后要运行的函数（成功和错误函数之后） |
| `contentType` | 将数据发送到服务器时使用的内容类型。 默认值为：“`application/x-www-form-urlencoded`” |
| `context` | 为所有与 AJAX 相关的回调函数指定“`this`”值 |
| `data` | 指定要发送到服务器的数据 |
| `dataFilter(data,type)` | 用于处理`XMLHttpRequest`的原始响应数据的函数 |
| `dataType` | 服务器响应期望的数据类型。 |
| `error(xhr,status,error)` | 如果请求失败，则运行的函数。 |
| `global` | 一个布尔值，指定是否触发请求的全局 AJAX 事件句柄。 默认为`true` |
| `ifModified` | 一个布尔值，指定是否仅在自上一个请求以来响应已更改的情况下，请求才成功。 默认值为：`false`。 |
| `jsonp` | 覆盖 jsonp 请求中的回调函数的字符串 |
| `jsonpCallback` | 为 jsonp 请求中的回调函数指定名称 |
| `password` | 指定在 HTTP 访问认证请求中使用的密码。 |
| `processData` | 一个布尔值，指定是否应将与请求一起发送的数据转换为查询字符串。 默认为`true` |
| `scriptCharset` | 指定请求的字符集 |
| `success(result,status,xhr)` | 请求成功时要运行的函数 |
| `timeout` | 请求的本地超时（以毫秒为单位） |
| `traditional` | 一个布尔值，指定是否使用传统的参数序列化样式 |
| `type` | 指定请求的类型。 （获取或发布） |
| `url` | 指定将请求发送到的 URL。 默认为当前页面 |
| `username` | 指定在 HTTP 访问认证请求中使用的用户名 |
| `xhr` | 用于创建`XMLHttpRequest`对象的函数 |

例如，示例 ajax 请求可以像这样（直到 jQuery 1.7 版本）：

```java
$.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 1.8 之后，您可以编写如下的 ajax 调用：

```java
$.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"); 
});

```

## jqXHR（jQuery `XMLHttpRequest`）与 XHR（`XMLHttpRequest`）

jQuery 1.8 在 jQuery 模式方面带来了重大变化。 此更改是`$.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 类型等）
*   它处理请求的回调（包括`Promise`回调`.done()`、`.fail()`等）
*   它处理为请求设置的所有预过滤器
*   它处理为请求设置的任何超时
*   它处理任何跨域调用（包括 jsonp）

`$.ajax()`返回的 jqXHR 对象实现`Promise`接口。 该对象具有一个[**`Promise`**](https://api.jquery.com/deferred.promise/)对象的所有属性，方法和行为。 

*jQuery 库作者已努力使其向后兼容，但不支持`onreadystatechange()`方法。*

## 调用 jQuery Ajax HTTP 方法

让我们看看 jQuery ajax 如何调用不同的 HTTP 方法。 我只是在编写代码框架，希望您根据需要更改代码。

#### jQuery Ajax HTTP GET 或 DELETE 方法

```java
$.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 方法

```java
$.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"); 
});

```

## 同步与异步通信

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

```java
$.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`”选项。

## jQuery Ajax 全局事件处理器

除了上述三种方法（即`done()`，`fail()`或`always()`）之外，jQuery 还具有一组全局 AJAX 函数，您可以使用这些函数来监听通过 jQuery 发送的所有 AJAX 请求中的 AJAX 事件。 让我们来看看它们：

#### `$.ajaxSend()`

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

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

```

#### `$.ajaxStart()`

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

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

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

```

#### `$.ajaxStop()`

每当 Ajax 请求完成时，jQuery 都会检查是否还有其他未完成的 Ajax 请求。 如果没有剩余的内容，jQuery 将触发`ajaxStop`事件。

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

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

```

#### `$.ajaxSuccess()`

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

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

```

#### `$.AjaxError()`

只要 Ajax 请求完成并出现错误，jQuery 就会触发`ajaxError`事件。

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

```

#### `$.ajaxComplete()`

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

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

```

## 使用`$.ajaxSetup()`全局化参数

您是否认为将一组通用参数传递给所有 ajax 请求很无聊，您可以使用`$.ajaxSetup()`函数对其进行一次注册，然后在所有 ajax 调用中重复使用它们。 `$.ajaxSetup()`函数可用于设置所有 AJAX 调用使用的选项，包括通过`$.ajax()`，`$.load()`，`$.get()`等执行的选项。

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

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

上面的函数默认会将来自应用的所有 jQuery ajax 请求设为 HTTP POST 方法。 因此，无论何时，您想发送 HTTP GET 方法，都必须在特定的`$.ajax()`调用中对其进行显式设置，如下所示：

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

## 使用`$.ajaxPrefilter()`过滤 Ajax 请求

如果您曾经在服务器端进行 Web 开发，那么您会认识到过滤器是实现某些目标（如输入值清洁等）的好方法。现在 jQuery 也使用`ajaxPrefilter`事件在客户端提供了此功能。 使用此功能，您可以在所有 AJAX 调用发送到服务器之前对其进行过滤。

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

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

这里的参数是：

*   `options` – 是请求选项
*   `originalOptions` – 是`$.ajax()`方法提供的选项，未经修改，因此没有`ajaxSettings`的默认值
*   `jqXHR` – 是请求的 jqXHR 对象

## jQuery 中其他由 Ajax 支持的函数

让我们在内部使用 ajax 浏览 jQuery 库提供的其他实用函数，这些函数可以直接使用。

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

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

```java
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 请求。

```java
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 中。

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

您也可以只插入一部分已加载的 HTML。 如果在`url`后面附加`space + jQuery selector`字符串，则`load()`将仅插入与选择器匹配的部分已加载 HTML。

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

在上面的示例中，ajax 调用将从 URL `html-response.html`加载 HTML 响应，然后对`id=someDiv`执行响应的 jQuery ID [选择器](//howtodoinjava.com/scripting/jquery/jquery-selectors/)，然后将结果 HTML 插入`loadTarget`的`innerHTML`中。

如果加载的 HTML 包含任何 JavaScript，则将 HTML 插入目标 HTML 元素时将执行该 JavaScript。 但是，如果加载片段（URL + jQuery 选择器），则在插入 HTML 之前，将删除在加载的文件中找到的所有 JavaScript。

#### `$.getScript()`函数

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

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

这就是使用 jQuery 处理 ajax 调用的全部内容。 随时在下面的评论部分中发表您的评论和建议。

学习愉快！