XMLHttpRequest、jQuery.ajax、jQuery.post、jQuery.get 有啥区别

Posted 2023-02-27

【中文标题】XMLHttpRequest、jQuery.ajax、jQuery.post、jQuery.get 有啥区别

【英文标题】：What is the difference between XMLHttpRequest, jQuery.ajax, jQuery.post, jQuery.getXMLHttpRequest、jQuery.ajax、jQuery.post、jQuery.get 有什么区别

【发布时间】：2011-06-07 03:16:12

【问题描述】：

如何确定哪种方法最适合某种情况？谁能提供一些示例来了解功能和性能方面的差异？

【问题讨论】：

关于性能（勉强回答）：根据jsperf，使用常规 XMLHttpRequest 比通过 jQuery 快得多。

cookie 的处理方式是否存在细微差别？对于登录，我想使用Set-Cookie。我体验到 cookie 可以与 jQuery.ajax 一起使用，但当我将 XmlHttpRequest 与 xhr.withCredentials=true 一起使用时却不行。

【参考方案1】：

XMLHttpRequest 是 jQuery 封装成更实用、更简化的形式和跨浏览器一致功能的原始浏览器对象。

jQuery.ajax 是 jQuery 中的通用 Ajax 请求器，可以进行任何类型和内容的请求。

jQuery.get 和 jQuery.post 另一方面只能发出 GET 和 POST 请求。如果你不知道这些是什么，你应该检查HTTP protocol并学习一点。这两个函数在内部使用jQuery.ajax，但它们使用您不必自己设置的特定设置，因此与使用jQuery.ajax 相比，简化了GET 或POST 请求。 GET 和 POST 是最常用的 HTTP 方法（与 DELETE、PUT、HEAD 甚至其他很少使用的外来方法相比）。

所有 jQuery 函数都在后台使用 XMLHttpRequest 对象，但提供了您不必自己做的额外功能。

用法

因此，如果您使用 jQuery，我强烈建议您仅使用 jQuery 功能。完全忘记XMLHttpRequest。使用合适的 jQuery 请求函数变体，在所有其他情况下使用 $.ajax()。所以不要忘记还有其他common jQuery Ajax related functions 到$.get()、$.post() 和$.ajax()。好吧，您可以将$.ajax() 用于您的所有请求，但您将不得不编写更多代码，因为它需要更多选项来调用它。

类比

这就像你可以给自己买一个汽车发动机，你必须围绕它制造一个带有转向、刹车等的整车......汽车制造商生产具有友好界面（踏板、方向盘）的完整汽车等）所以你不必自己做所有的事情。

【讨论】：

在性能方面使用 $.ajax() 有什么优势吗？

@Rodrigues：不是真的。如果你想到$.post 和$.get，唯一慢一点的就是$.ajax 被调用之前的少量代码。但是，如果您直接使用 XHR 编写自己的例程，事情可能会稍微优化，但可能会出现更多错误。我建议你保持自己在 jQuery 方面。它会让你的生活更轻松。考虑到异步调用比发出它的代码花费的时间要长得多的事实，您可能会注意到这些调用之间没有明显区别。

感谢罗伯特·科里特尼克。所以我会得到 $.post 和 $.get.

如果您愿意，您也可以使用$.ajax 使您的呼叫在任何地方保持一致。只要您不直接使用 XHR，无论哪种方式都可以。

@RobertKoritnik IE 中的缓存问题如何？使用 XMLHttpRequest 和 $.ajax() 是否一样？

【参考方案2】：

他们每个人都使用 XMLHttpRequest。这是浏览器用来发出请求的内容。 jQuery 只是一个 javascript 库，$.ajax 方法用于生成 XMLHttpRequest。

$.post 和$.get 只是$.ajax 的简写版本。它们做的事情几乎相同，但更快地编写 AJAX 请求 - $.post 发出 HTTP POST 请求，$.get 发出 HTTP GET 请求。

【讨论】：

上传和下载各个功能的数据传输限制如何

GET 请求将发送 URL 字符串中的所有数据 - 可以受客户端/服务器 (***.com/questions/2659952/…) 限制。 POST 请求发送标头中的所有数据，因此 URL 大小限制应该不是问题（除非您的脚本有真的长文件和文件夹名称！）。

好的。所以简而言之，你的意思是，发送更多数据使用 post 并接收更多数据使用 get，对吗？

@Rodrigues - 是的，差不多 :) 通常，如果您只是想阅读一些内容（例如，请求从 twitter 获取推文列表），请使用 GET。如果您想发送一些东西（例如发布推文），请使用POST，

【参考方案3】：

jQuery.get 是 jQuery.ajax 的包装器，jQuery.ajax 是 XMLHttpRequest 的包装器。

XMLHttpRequest 和 Fetch API（目前是实验性的）是 DOM 中唯一的，所以应该是最快的。

我看到很多信息都不准确了，所以我做了一个测试页面，任何人都可以在任何时候测试最好的版本：

https://jsperf.com/xhr-vs-jquery-ajax-vs-get-vs-fetch

从我今天的测试显示，只有 jQuery 不是一个干净甚至快速的解决方案，我在移动或桌面上的结果表明，如果你也在使用 jQuery，那么 jQuery 至少比 XHR2 慢 80%很多 ajax，在移动设备上加载一个简单的网站会花费很多时间。

用法本身也在链接中。

【参考方案4】：

jQuery.post 和 jQuery.get 模拟典型的页面加载，也就是说，您单击一个提交按钮，它会将您带到一个新页面（或重新加载同一页面）。 post 和 get 在数据发送到服务器的方式上略有不同（关于它的好文章可以找到here。

jQuery.ajax 和 XMLHttpRequest 是类似于 post 和 get 的页面加载，除了页面不会改变。服务器返回的任何信息都可以被本地 javascript 以任何方式使用，包括修改页面布局。它们通常用于在用户仍然可以浏览页面时执行异步工作。一个很好的例子是通过从数据库值动态加载来完成文本字段的自动完成功能。 jQuery.ajax 和 XMLHttpRequest 的根本区别在于 jQuery.ajax 使用 XMLHttpRequest 来实现相同的效果，但界面更简单。如果你使用 jQuery，我会鼓励你坚持使用 jQuery.ajax。

【讨论】：

与创建 XMLHttpRequest 对象 xmlhttp.open、send() 和 responseText 相比，使用 jquery 有什么优势。

XMLHttpRequest 对象的实例化方式会根据您当前的浏览器有所不同。这将需要您进行一些 javascript 维护，以提供使用 XMLHttpRequest 的基本接口。如果您已经拥有 jQuery，它会为您完成这一切。这实际上是方便的问题，而不是功能的问题，因为从技术上讲，您可以使用任何一个来做同样的事情。更不用说，由于 jQuery 包装了 XMLHttpRequest 对象，这意味着它会提供给你，以防你想用它做一些特别的事情。

好的..谢谢尼尔的建议...有没有像Visual Studio这样的IDE可用于使用和调试带有php或aspx的jquery。

很难找到一个可以同时调试 javascript 和 php 或 aspx 的 IDE，因为一个是服务器端而另一个是客户端。这意味着不幸的是，您必须单独调试 javascript。但是，我发现 firebug (getfirebug.com) 在一般情况下调试 javascript 非常棒。在回调函数中放置一个断点，它会一步一步地向您显示服务器提供的所有内容，以及您的 javascript 对其所做的一切。希望对您有所帮助。

【参考方案5】：

旧帖。但仍然想回答，我在使用 Web Workers(javascript) 时遇到的一个不同

网络工作者不能拥有任何 UI 级别的访问权限。这意味着你不能访问任何 DOM JavaScript 代码中您打算使用 Web Worker 运行的元素。不能在 Web Worker 代码中访问窗口、文档和父对象等对象。

正如我们所知，jQuery 库与 html DOM 绑定，允许它违反“禁止 DOM 访问”规则。这可能有点痛苦，因为诸如 jQuery.ajax、jQuery.post、jQuery.get 之类的方法不能在 Web Worker 中使用。幸运的是，您可以使用 XMLHttpRequest 对象来发出 Ajax 请求。

【参考方案6】：

就 jQuery 方法而言，.post 和 .get 只是在内部执行 .ajax，它们的目的是抽象出 .ajax 的一些不必要的选项，并提供一些适合该类型请求的默认值分别。

我怀疑这三者之间的性能差异很大。

.ajax 方法本身会执行 XMLHttpRequest，它将根据 jQuery 的其余部分进行大量优化，但它可能不会像您自己定制整个交互那样高效.. 但这就是区别在写大量代码和写jQuery.ajax之间。

【讨论】：

自定义jQuery.ajax有什么好处

我假设你的意思是在速记方法上使用它，根据我的经验，我发现如果大多数默认值都是你想要的，如果你需要非常具体，速记方法很有用如何获取你需要的数据 .ajax 通常是要走的路。

谢谢史蒂夫。将使用 post 和 get。如果你给出一些 .ajax 的例子，我可以做一些比较。