【Java 进阶篇】Ajax 实现——JQuery 实现方式 `ajax()`

雨点打透心脏的1/2处 2024-02-18 12:14 48阅读 0赞

![在这里插入图片描述][fe098e18bcc24ed2aaff6195ef3f5a1a.png]

嗨，亲爱的读者们！欢迎来到这篇关于使用 jQuery 中的 `ajax()` 方法进行 Ajax 请求的博客。在前端开发中，jQuery 提供了简便而强大的工具，其中 `ajax()` 方法为我们处理异步请求提供了便捷的解决方案。无需手动创建 `XMLHttpRequest` 对象，只需几行代码，就能完成数据的发送和接收。在这篇文章中，我们将深入探讨 `ajax()` 方法的使用，同时为你呈现丰富的实例。

### 什么是 Ajax？ ###

在开始讲解 jQuery 的 `ajax()` 方法之前，让我们先回顾一下 Ajax 的基础知识。Ajax，即 Asynchronous JavaScript and XML，是一种用于创建异步请求的技术。通过 Ajax，我们能够在不刷新整个页面的情况下，与服务器进行数据交互，从而提高用户体验。

### jQuery 的 `ajax()` 方法 ###

jQuery 的 `ajax()` 方法是一个多功能、强大的工具，用于发起 Ajax 请求。它具有简单易用的接口，允许我们在不同的场景中进行各种异步操作。接下来，让我们通过一系列实例，深入了解这个方法的各种用法。

#### 基本用法 ####

首先，我们来看一个最基本的例子。假设我们要向服务器请求一段文本数据：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery ajax() 方法基本用法</title>
        
        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    </head>
    <body>
    
        <button id="getDataButton">获取数据</button>
        <div id="dataContainer"></div>
    
        <script>
            // 等待文档加载完成
            $(document).ready(function () {
          
                // 监听按钮点击事件
                $("#getDataButton").click(function () {
          
                    // 使用 ajax() 方法发起 GET 请求
                    $.ajax({
          
                        url: "https://jsonplaceholder.typicode.com/posts/1",
                        method: "GET",
                        success: function (data) {
          
                            // 请求成功时的处理
                            $("#dataContainer").text(data.title);
                        },
                        error: function (xhr, status, error) {
          
                            // 请求失败时的处理
                            console.error("请求失败：", status, error);
                        }
                    });
                });
            });
        </script>
    </body>
    </html>

在这个例子中，我们引入了 jQuery 库，并使用 `ajax()` 方法发起了一个 GET 请求。当按钮被点击时，请求会发送到指定的 URL，成功时将返回的数据显示在页面上。

#### 发送 POST 请求 ####

`ajax()` 方法不仅支持 GET 请求，还可以发送其他类型的请求，比如 POST。下面是一个发送 POST 请求的例子：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery ajax() 方法发送 POST 请求</title>
        
        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    </head>
    <body>
    
        <button id="sendDataButton">发送数据</button>
    
        <script>
            // 等待文档加载完成
            $(document).ready(function () {
          
                // 监听按钮点击事件
                $("#sendDataButton").click(function () {
          
                    // 构建要发送的数据对象
                    var dataToSend = {
          
                        title: "foo",
                        body: "bar",
                        userId: 1
                    };
    
                    // 使用 ajax() 方法发起 POST 请求
                    $.ajax({
          
                        url: "https://jsonplaceholder.typicode.com/posts",
                        method: "POST",
                        data: JSON.stringify(dataToSend),
                        contentType: "application/json", // 设置请求头
                        success: function () {
          
                            // 请求成功时的处理
                            console.log("数据发送成功！");
                        },
                        error: function (xhr, status, error) {
          
                            // 请求失败时的处理
                            console.error("数据发送失败：", status, error);
                        }
                    });
                });
            });
        </script>
    </body>
    </html>

在这个例子中，我们定义了一个 JavaScript 对象 `dataToSend`，并使用 `ajax()` 方法发送了一个 POST 请求。我们通过 `data` 选项将数据对象转换为 JSON 字符串，并设置了 `contentType` 为 `"application/json"`，确保服务器正确解析请求体。

#### 处理 JSONP 请求 ####

有时候，由于同源策略，我们无法直接发送跨域请求。这时，我们可以使用 JSONP（JSON with Padding）来绕过这个限制。以下是一个使用 JSONP 的例子：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery ajax() 方法处理 JSONP 请求</title>
        
        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    </head>
    <body>
    
        <button id="getJsonpDataButton">获取 JSONP 数据</button>
        <div id="jsonpDataContainer"></div>
    
        <script>
            // 等待文档加载完成
            $(document).ready(function () {
          
                // 监听按钮点击事件
                $("#getJsonpDataButton").click(function () {
          
                    // 使用 ajax() 方法发起 JSONP 请求
                    $.ajax({
          
                        url: "https://api.themoviedb.org/3/movie/550",
                        method: "GET",
                        dataType: "jsonp", // 指定数据类型为 JSONP
                        data: {
          
                            api_key: "YOUR_API_KEY"
                        },
                        success: function (data) {
          
                            // 请求成功时的处理
                            $("#jsonpDataContainer").text(data.title);
                        },
                        error: function (xhr, status, error) {
          
                            // 请求失败时的处理
                            console.error("请求失败：", status, error);
                        }
                    });
                });
            });
        </script>
    </body>
    </html>

在这个例子中，我们通过设置 `dataType: "jsonp"` 来告诉 jQuery 发起一个 JSONP 请求。这允许我们跨域获取数据。需要注意的是，JSONP 请求不支持 `POST` 方法，仅支持 `GET` 方法。

#### Ajax 事件 ####

`ajax()` 方法还提供了一系列的事件，使我们能够在请求的不同阶段执行自定义的操作。以下是一些常用的 Ajax 事件：

*  `beforeSend`：在发送请求之前执行的函数。
 *  `success`：在请求成功完成时执行的函数。
 *  `error`：在请求失败时执行的函数。
 *  `complete`：在请求完成时（不论成功或失败）执行的函数。

下面是一个使用 `beforeSend` 和 `complete` 事件的例子：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery ajax() 方法的事件</title>
        
        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    </head>
    <body>
    
        <button id="getDataButton">获取数据</button>
        <div id="dataContainer"></div>
    
        <script>
            // 等待文档加载完成
            $(document).ready(function () {
          
                // 监听按钮点击事件
                $("#getDataButton").click(function () {
          
                    // 使用 ajax() 方法发起 GET 请求
                    $.ajax({
          
                        url: "https://jsonplaceholder.typicode.com/posts/1",
                        method: "GET",
                        beforeSend: function () {
          
                            // 请求发送前的操作
                            console.log("请求即将发送...");
                        },
                        success: function (data) {
          
                            // 请求成功时的处理
                            $("#dataContainer").text(data.title);
                        },
                        error: function (xhr, status, error) {
          
                            // 请求失败时的处理
                            console.error("请求失败：", status, error);
                        },
                        complete: function () {
          
                            // 请求完成时的操作
                            console.log("请求已完成。");
                        }
                    });
                });
            });
        </script>
    </body>
    </html>

在这个例子中，我们使用了 `beforeSend` 和 `complete` 事件来执行在请求开始和结束时的操作。这些事件可以为我们提供更灵活的控制，以满足特定的需求。

#### 全局设置 ####

如果你希望为所有的 Ajax 请求设置一些默认的配置，可以使用 `$.ajaxSetup()` 方法。这个方法接受一个对象，其中包含了默认的设置。这些设置将应用于所有使用 `ajax()` 方法的请求。以下是一个示例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery ajaxSetup() 方法</title>
        
        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    </head>
    <body>
    
        <button id="getDataButton">获取数据</button>
        <div id="dataContainer"></div>
    
        <script>
            // 设置全局默认配置
            $.ajaxSetup({
          
                beforeSend: function () {
          
                    console.log("全局设置：请求即将发送...");
                },
                complete: function () {
          
                    console.log("全局设置：请求已完成。");
                }
            });
    
            // 等待文档加载完成
            $(document).ready(function () {
          
                // 监听按钮点击事件
                $("#getDataButton").click(function () {
          
                    // 使用 ajax() 方法发起 GET 请求
                    $.ajax({
          
                        url: "https://jsonplaceholder.typicode.com/posts/1",
                        method: "GET",
                        success: function (data) {
          
                            // 请求成功时的处理
                            $("#dataContainer").text(data.title);
                        },
                        error: function (xhr, status, error) {
          
                            // 请求失败时的处理
                            console.error("请求失败：", status, error);
                        }
                    });
                });
            });
        </script>
    </body>
    </html>

在这个例子中，我们使用 `$.ajaxSetup()` 方法设置了 `beforeSend` 和 `complete` 事件的默认行为。这样，所有使用 `ajax()` 方法的请求都会继承这些全局设置。

### 结语 ###

通过本文的介绍，你应该对 jQuery 中的 `ajax()` 方法有了更深入的了解。这个方法提供了许多选项和事件，使我们能够轻松地处理各种异步请求的场景。同时，全局设置的使用能够进一步简化代码，提高可维护性。希望这篇博客能够帮助你更加熟练地使用 jQuery 进行前端开发，愿你的代码更加优雅、高效！

<table> 
 <tbody> 
  <tr> 
   <td> <strong><font>作者信息</font></strong><br> <br> <font> 作者 ： 繁依Fanyi</font><br> <font>CSDN：</font> <a href="https://blog.csdn.net/qq_21484461?spm=1000.2115.3001.5343" rel="nofollow"><font>https://techfanyi.blog.csdn.net</font></a><br> <font>掘金：</font><a href="https://juejin.cn/user/4154386571867191" rel="nofollow"><font>https://juejin.cn/user/4154386571867191</font></a> </td> 
  </tr> 
 </tbody> 
</table>

[fe098e18bcc24ed2aaff6195ef3f5a1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/3d31b7ad767e47f88a5db471d85fcf5c.png