XMLHttpRequest、jQuery.ajax、jQuery.post和jQuery.get有什么区别？

Question

XMLHttpRequest、jQuery.ajax、jQuery.post和jQuery.get有什么区别？

jqueryajaxxmlhttprequest

148

如何确定哪种方法最适合某种情况？有人可以提供一些例子以了解在功能和性能方面的区别吗？

- Rodrigues

4

关于性能（简短回答）：根据jsperf的测试结果，使用普通的XMLHttpRequest比通过jQuery更快。 - Déjà vu

在处理 cookie 方面是否存在微妙的差异？我想要使用 Set-Cookie 进行登录。我发现使用 jQuery.ajax 时 cookie 可以正常工作，但是当我使用 xhr.withCredentials=true 的 XmlHttpRequest 时却不行。 - neoneye

6个回答

32

它们每一个都使用XMLHttpRequest。这是浏览器用来发起请求的。jQuery只是一个JavaScript库，$.ajax方法用于发起XMLHttpRequest。

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

- Jonathon Bolster

每个函数的上传和下载数据传输限制是多少？ - Rodrigues

一个GET请求将会把所有数据都以URL字符串的形式发送过去——但这个长度可能会被客户端/服务器限制 (https://dev59.com/a3E85IYBdhLWcg3wr1ke)。而`POST`请求则会将所有数据都放在头部中发送，因此URL大小限制一般不会成为问题（除非你的脚本名称和文件夹名称非常长！）。 - Jonathon Bolster

好的。简而言之，您的意思是发送更多数据使用POST方法，接收更多数据使用GET方法，对吗？ - Rodrigues

@Rodrigues - 是的，基本上就是这样 :) 一般来说，如果你只是想读取某些内容（例如从 Twitter 获取推文列表的请求），请使用“GET”。如果你想发送某些内容（例如发布一条推文），则请使用“POST”。 - Jonathon Bolster

8

jQuery.get是jQuery.ajax的封装，而jQuery.ajax又是 XMLHttpRequest 的封装。

XMLHttpRequest 和 Fetch API（目前处于实验阶段）是 DOM 中唯一的，在速度上应该是最快的。

我看到了很多信息，但现在已经不准确了，所以我制作了一个测试页面，任何人都可以测试不同版本哪个最好：

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

从今天我的测试结果来看，只有 jQuery 并不是一个干净或者说是一个快速的解决方案，对于移动端或桌面端而言，结果显示 jQuery 至少比 XHR2 慢80％以上，如果您使用了太多 ajax，在移动端上加载简单的网站将需要很长时间。

链接中也包含了用法。

- Sirius

2

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

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

- Neil

使用jQuery相比于创建XMLHttpRequest对象xmlhttp.open、send()和responseText的优点是什么？ - Rodrigues

1

XMLHttpRequest对象根据您当前的浏览器实例化方式不同。为了提供一个使用XMLHttpRequest的基本接口，需要携带一些JavaScript维护工作。如果您已经有了jQuery，它可以为您完成所有工作。这实际上是一种方便而非功能性的问题，因为您可以使用任何一种技术来完成相同的事情。更不用说，由于jQuery包装了XMLHttpRequest对象，这意味着它会向您提供该对象，以防您想要执行特定操作。 - Neil

好的，谢谢Neil的建议。是否有类似于Visual Studio的IDE可用于使用和调试jQuery与PHP或ASPX？ - Rodrigues

很难找到一个IDE可以让你同时调试javascript和php或aspx，因为一个是服务器端而另一个是客户端。这意味着不幸的是，你必须单独调试javascript。然而，我发现firebug（http://getfirebug.com/）非常适合一般的javascript调试。在回调函数中设置断点，它会显示服务器给你的所有内容，并逐步展示你的javascript对其执行的所有操作。希望这有所帮助。 - Neil

1

旧帖子，但仍想回答。我在使用 Web Workers (JavaScript) 时遇到的一个不同之处是：Web Workers 无法访问任何 UI 级别的内容。这意味着在你打算使用 Web Workers 运行的 JavaScript 代码中无法访问任何 DOM 元素。例如 window、document 和 parent 等对象不能在 Web Workers 代码中访问。

正如我们所知，jQuery 库与 HTML DOM 相关联，允许它将违反“无 DOM 访问”规则。这可能有点痛苦，因为无法在 Web Workers 中使用 jQuery.ajax、jQuery.post、jQuery.get 等方法。幸运的是，您可以使用 XMLHttpRequest 对象进行 Ajax 请求。

- Mannan Bahelim

0

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

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

- Steve

定制jQuery.ajax有什么优势吗？ - Rodrigues

我理解你的意思是相对于速记方法来说，使用它更为实用。在我的经验中，如果大多数默认设置符合您的要求，那么速记方法非常有用；如果您需要非常具体地获取所需数据，则通常使用 .ajax 更为适合。 - Steve

谢谢Steve。我会使用POST和GET方法。如果您能给出一些.ajax的例子，我可以进行比较。 - Rodrigues

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robert Koritnik · Accepted Answer

XMLHttpRequest是浏览器原始对象，jQuery将其包装成更可用、简化形式和跨浏览器一致的功能。
jQuery.ajax是jQuery中的通用Ajax请求者，可以处理任何类型和内容的请求。
jQuery.get和 jQuery.post 只能发出GET和POST请求。如果你不知道这些是什么，请查看HTTP协议并学习一下。这两个函数在内部使用jQuery.ajax，但它们使用特定的设置，您不必设置自己，因此相对于使用jQuery.ajax来说简化了GET或POST请求。GET和POST是最常用的HTTP方法(与DELETE、PUT、HEAD甚至其他不常用的奇特方法相比)。

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

用法

因此，如果您正在使用jQuery，我强烈建议您仅使用jQuery功能。完全忘记XMLHttpRequest。使用适当的jQuery请求函数变体，在所有其他情况下使用$.ajax()。所以不要忘记，还有其他常见jQuery与Ajax相关的函数，如$.get()、$.post() 和 $.ajax()。您也可以只使用$.ajax()进行所有请求，但需要编写更多的代码，因为它需要更多的选项来调用。

类比

这就像你可以购买一台车引擎，但你需要自己构建整个车辆，包括方向盘、刹车等... 车厂则生产出已经完成的汽车，并提供友好的界面（踏板、方向盘等），因此你不必自己动手。