如何使用 $.ajax() 用法

2025-06-07

如何使用$.ajax()

用法

什么是 Ajax？

重要的！

当我在本文中谈论 Ajax 时，我通常指的是 JQuery 内置的方法。请注意，JQuery 中的 Ajax是Ajax 的一种，但 Ajax并非JQuery 中的 Ajax。

Ajax 是一种从服务器、API 或其他网页发送和接收数据的方法，已成为网络通信的标准。

它并非原生 JavaScript 内置，因此您需要使用JQuery之 类的库来使用 Ajax。Ajax 是“同步JavaScript和X ML”的缩写。

Ajax的定义

“异步 JavaScript + XML”本身并非一项技术，而是由Jesse James Garrett于 2005 年创造的一个术语，它描述了一种将多种现有技术结合使用的“新”方法。
……
当这些技术结合到 Ajax 模型中时，Web 应用程序能够快速、渐进地更新用户界面，而无需重新加载整个浏览器页面。这使得应用程序运行速度更快，对用户操作的响应也更灵敏。

MDN 网络文档，引用 自源文章2019-01-20 。

Ajax通常如何使用？

嗯，Ajax 可以隐藏在您在网络上看到的任何事物中，从周五下午滚动时异步加载 Twitter 提要，到从购物网站的管理面板添加新产品。

Ajax 主要用于在运行时从客户端获取数据。

如何开始使用 Ajax？

假设您已经拥有HTML、PHP或类似文件以及可用的互联网连接，您可以直接从其网站下载 JQuery 并将其作为文件链接到您的服务器上，或者使用CDN获取它。

在本文中，我将向您展示如何使用 JQuery 的公共 CDN 获取它。

1.获取最新版本的 JQuery

访问此页面，其中列出了 JQuery 的不同版本。我建议你选择一个最小化的软件包。复制显示的 HTML 代码，它看起来应该像这样：



<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
Enter fullscreen mode Exit fullscreen mode

2.打开你的 HTML/PHP/ etc文件

将脚本标签粘贴到页面顶部（head 标签内）或底部（body 标签下）。我建议你把它放在页面底部，以防加载 JQuery 库时出现问题。有些人可能还有其他偏好。



<!doctype html>
<html>
    <head>
        <title>My Site</title>
        <!-- Here -->
    </head>
    <body>
        Hello World
    </body>
    <!-- Or Here -->
</html>
Enter fullscreen mode Exit fullscreen mode

3.完成！

HTTP 方法

通过 Web 发送请求和数据时，我们可以使用以下两种主要方法之一：

  1. 邮政
  2. 得到

（在此处或此处（W3Schools）阅读有关HTTP 请求方法的更多信息）。

post 和 get 的区别

邮政

Post 用于发送“不可见”的数据，在大多数情况下，post 是可行的方法，因为使用 post 可以发送比使用 get 更多的数据。

安全

如果使用该页面的客户端连接到支持WPA 或 WPA2的安全 WI-FI ，则 post 方法是最安全的方法。即使用户使用不受保护的网络，get 方法可能仍然更好……

应用

Post 通常用于传输或接收少量到大量数据。它甚至用于与前面提到的 Web 服务器、数据库或 API 通信。

例如，当你的购物篮里有一些想要购买的商品时，当你点击“继续”并被重定向到另一个页面时，你的商品也会跟着你一起跳转。（服务器也可以使用会话来处理这种情况，但本文不讨论。）

得到

大多数人听到“Get”时想到的都是 URL 查询。Get 方法通常是用户手动与网页或 API 交互的方式，指定搜索词、日期范围或其他定义查询的信息。

维基百科将 HTTP get 请求方法描述为仅从服务器检索信息。其中一些数据可以通过网页 URL 或“查询字符串”进行配置。（见下图）

URL 查询示例

Get 对用户更加开放。这有利有弊。

优点

如果操作正确，get 可以成为一种与网页交互并定制用户体验的方式。例如，您访问一个包含一些控件的网站，更改这些控件并应用更改会导致页面重新加载，同时 URL 中还会包含一些额外的代码。这称为 URL 查询。在这里，您可以看到已更改的控件的值，现在可以直接从 URL 中更改它们。只需输入新值并按 Enter 键即可。这通常用于 API 服务。

缺点

将控制权交给用户始终是危险的。最糟糕的情况是使用 get 函数在反射表单中向不安全的网站提交评论。如果网站存在跨站脚本 (XSS) 漏洞，并将用户输入的所有内容打印到源页面……Get 函数可能会被利用来绕过 Chrome 的 XSS 检测、内置防护系统等。

当然，还有很多利弊需要考虑。但这只是让你快速了解一下。

比较

Get仅允许发送键值对，而 Post 则支持发送整个对象、文件、表格等等。了解更多关于get 和 post 的功能。

重要的！

还记得我们之前粘贴的脚本标签吗？它使我们能够使用 JQuery。代码总是按级联顺序执行，并且依赖于其他代码的代码必须在其依赖的代码之后执行。我的意思是，始终将依赖 JavaScript 的脚本标签放在 JQuery 标签下方。否则，这可能会导致您的网站停止执行，并且 JavaScript 无法按预期运行。

用法

好吧...让我们最终开始谈正事吧。

通过输入 来访问 Ajax 方法$。这是jQuery 对象。输入 a 后.，您将看到 JQuery 提供的所有函数的列表。

功能

$.ajax

jQuery 的核心$.ajax()方法是创建 Ajax 请求的强大方法。它需要一个包含 Ajax 发送请求所需的所有配置的对象。

参数

范围 描述
类型/方法 将使用哪种类型的 HTTP 方法？
网址 我们要把这个请求发送到哪里？
数据 我们要向目的地发送什么数据？

活动

事件 描述
成功 当 Ajax 返回任何数据时调用的函数。

示例如下：



$.ajax({
    type: "post",
    url: "www.example.com/subfolder/page.php",
    data: {
        myLuckyNumber: 13
    },
    success: function(response) {
        console.log(response);
    }
});
Enter fullscreen mode Exit fullscreen mode

输出：



Lucky number was registered!
Enter fullscreen mode Exit fullscreen mode

$.post

使用 HTTP POST 请求从服务器加载或发送数据。它需要一个包含 Ajax 发送请求所需的所有配置的对象。

参数

范围 描述
网址 我们要把这个请求发送到哪里？
数据 我们要向目的地发送什么数据？

活动

事件 描述
成功 当 Ajax 返回任何数据时调用的函数。

示例如下：



$.post({
    url: "www.api.mydomain.com/register.php",
    data: {
        users: {
            0: {                // User 1, aka data.users[0]
                name: "Joe",    //data.users[0].name
                age: 54,        //data.users[0].age
                work: "hacker"  //data.users[0].work
            },
            1: {
                name: "Billy",
                age: 28,
                work: "road worker"
            },
            2: {
                name: "Nathan",
                age: 15,
                work: "unemployed"
            }
        }
    },
    success: function(response) {
        console.log(response);
    }
});
Enter fullscreen mode Exit fullscreen mode

输出：



3 new user(s) where registered!
Enter fullscreen mode Exit fullscreen mode

$.get

使用 HTTP GET 请求从服务器加载或发送数据。它需要一个包含 Ajax 发送请求所需的所有配置的对象。

参数

范围 描述
网址 我们要把这个请求发送到哪里？
数据 我们要向目的地发送什么数据？

活动

事件 描述
成功 当 Ajax 返回任何数据时调用的函数。

示例如下：



$.get({
    url: "https://www.google.se",
    success: function(response) {
        console.log(response);
    }
});
Enter fullscreen mode Exit fullscreen mode

输出：



<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="sv">
    <head>
    <meta charset="UTF-8">
    <meta content="origin" name="referrer">
    <meta content="/images/branding/googleg/1x/googleg_standard_color_128dp.png" itemprop="image">
    <meta content="origin" name="referrer">
    <title>Google</title>
    <script>
    ...
    </script>
    <style>
    ...
    </style>
...
Enter fullscreen mode Exit fullscreen mode

使用 Ajax 执行 JavaScript 文件！

加载并执行 JavaScript 文件。



$.ajax({
  method: "GET",
  url: "test.js",
  dataType: "script"
});
Enter fullscreen mode Exit fullscreen mode

使用 Ajax 解析！

由于 Ajax 会向 Web 服务器发送 HTTP 请求，因此它也会接收 HTTP/HTML/JSON 格式的响应。考虑到这一点，我们可以将 Ajax 当作浏览器，并向 Web 服务器发送请求，例如，请求一个普通的 HTML 页面。

CORS和CORB政策

跨域资源共享 (CORS)是附加的 HTTP 标头，它指示浏览器允许运行在一个源或域上的 Web 应用程序访问来自不同源或域的服务器的选定资源。这意味着不同源或域的网页可以共享资源 （参见下图）。
只要服务器配置为允许来自您或任何其他 Web 应用程序源的请求，XMLHttpRequest和Ajax就可以正常工作。

遗憾的是，有些网站受到了跨域读取阻止 (CORB)的保护。这是一种算法，可以在跨域资源加载到达网页之前，识别并阻止浏览器中的“跨域”资源加载。这意味着不同源或不同域的网页无法共享资源。

CORS原理

如果您查看下面的代码，则会向使用 CORS 的站点创建一个新的 Ajax 请求。这意味着我们可以通过 Get 方法请求 HTML 代码。



$.ajax({
  url: "https://www.google.com",    // This is just an example domain
  method: "GET",
  sucess: function(sourceCode) {
    console.log(sourceCode);
  }
});
Enter fullscreen mode Exit fullscreen mode

输出：



<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="sv">
    <head>
    <meta charset="UTF-8">
    <meta content="origin" name="referrer">
    <meta content="/images/branding/googleg/1x/googleg_standard_color_128dp.png" itemprop="image">
    <meta content="origin" name="referrer">
    <title>Google</title>
    <script>
    ...
    </script>
    <style>
    ...
    </style>
...
Enter fullscreen mode Exit fullscreen mode

Ajax 进步了！

在 JQuery 中，没有直接的方法来获取请求的进度$.ajax()，但该方法支持自定义xhr对象。

在下面的示例中，我们创建了自己的 xhr 对象来执行 HTTP 请求，并为其添加了一个“progress”事件监听器。这使我们能够以请求的百分比形式获取当前状态。

xhr

该$.ajax()函数返回其创建的 XMLHttpRequest 对象。通常，jQuery 会在内部处理此对象的创建，但可以使用 xhr 选项指定自定义函数来创建它。

JQuery AJAX 文档，引用自 2019-01-20 文档。



$.ajax({
    url: "https://example.url/very/large/image.jpeg",
    method: "get",

    xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.addEventListener("progress", function(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    console.log(percentComplete);
                }
            }, false);
            return xhr;
        }
})
Enter fullscreen mode Exit fullscreen mode

输出：



0.2384341119115186
0.7248216529871057
1
Enter fullscreen mode Exit fullscreen mode

也可以通过替换为来获取联系服务器的进度，而不是捕获xhr.addEventListener(...)响应xhr.upload.addEventListener(...)

关闭

感谢阅读本文！希望它能帮助您成为 JavaScript 和 JQuery 大师！分享给可能感兴趣或受益的朋友和家人。

如果您有任何问题，我很乐意在下面的讨论中回答。

致谢

帮助完善本文的人

文章来源：https://dev.to/williamragstad/how-to-use-ajax-3b5e
Devto 翻译
PREV
给初级开发人员的提示
NEXT
在 Laravel 中轻松使用 UUID