XMLHttpRequest, jQuery.ajax, jQuery.post, jQuery.get 有什么区别

What is the difference between XMLHttpRequest, jQuery.ajax, jQuery.post, jQuery.get

提问by Rodrigues

How can I find out which method is best for a situation? Can anybody provide some examples to know the difference in terms of functionality and performance?

我怎样才能找出最适合某种情况的方法？任何人都可以提供一些示例来了解功能和性能方面的差异吗？

回答by Robert Koritnik

• XMLHttpRequestis the raw browser object that jQuery wraps into a more usable and simplified form and cross browser consistent functionality.

• jQuery.ajaxis a general Ajax requester in jQuery that can do any type and content requests.

• jQuery.getand jQuery.poston the other hand can only issue GET and POST requests. If you don't know what these are, you should check HTTP protocoland learn a little. Internally these two functions use jQuery.ajaxbut they use particular settings that you don't have to set yourself thus simplifying GET or POST request compared to using jQuery.ajax. GET and POST being the most used HTTP methods anyway (compared to DELETE, PUT, HEAD or even other seldom used exotics).

• XMLHttpRequest是原始浏览器对象，jQuery 将其包装成更有用和更简化的形式以及跨浏览器一致的功能。

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

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

All jQuery functions use XMLHttpRequestobject in the background, but provide additional functionality that you don't have to do yourself.

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

Usage

用法

So if you're using jQuery I strongly recommend that you use jQuery functionality only. Forget about XMLHttpRequestaltogether. Use suitable jQuery request function variations and in all other cases use $.ajax(). So don't forget there are other common jQuery Ajax related functionsto $.get(), $.post()and $.ajax(). Well you can just use $.ajax()for all of your request, but you will have to write a little more code, because it needs a bit more options to call it.

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

Analogy

比喻

It's like you would be able to buy yourself a car engine that you'd have to create a whole car around it with steering, brakes etc... Car manufacturers produce completed cars, with a friendly interface (pedals, steering wheel etc.) so you don't have to do it all yourself.

就好像你可以给自己买一个汽车引擎，你必须围绕它制造一整辆带有转向、刹车等的汽车……汽车制造商生产成品汽车，具有友好的界面（踏板、方向盘等）所以你不必自己做这一切。

回答by Jonathon Bolster

Each one of them uses XMLHttpRequest. This is what the browser uses to make the request. jQuery is just a JavaScript library and the $.ajaxmethod is used to make a XMLHttpRequest.

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

$.postand $.getare just shorthand versions of $.ajax. They do pretty much the same thing but makes it quicker to write an AJAX request - $.postmakes a HTTP POST request and $.getmakes a HTTP GET request.

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

回答by Sirius

jQuery.getis a wrapper for jQuery.ajax, which is a wrapper to XMLHttpRequest.

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

XMLHttpRequest and Fetch API (experimental at this time) are the only in DOM, so should be the fastest.

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

I saw a lot of information that is not accurate anymore, so I made a test page where anyone can test version from version which one is best at any time:

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

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

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

From my tests today shows that only jQuery isn't a clean or even a fast solution, the results for me in mobile or desktop shows that jQuery are, at least, 80% slower than XHR2, if you're using too much ajax, in mobile it will be take a lot of time to load a simple site.

从我今天的测试来看，只有 jQuery 不是一个干净的甚至不是一个快速的解决方案，我在移动或桌面上的结果表明 jQuery 至少比 XHR2 慢 80%，如果你使用太多的 ajax，在移动设备中，加载一个简单的站点需要很多时间。

The usage itself is in the link too.

用法本身也在链接中。

回答by Neil

jQuery.post and jQuery.get simulate typical page loads, which is to say, you click on a submit button and it takes you to a new page (or reloads the same page). post and get differ slightly in the manner in which the data is sent to the server (good article about it can be found here.

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

jQuery.ajax and XMLHttpRequest are page loads similar to post and get, except that the page doesn't change. Whatever information the server returns can be used by javascript locally to be used in any way, including modifying the page layout. They're normally used to do asynchronous work while the user can still navigate the page. Good example of this would be autocomplete capabilities by dynamically loading from a database values to complete a text field. The fundamental difference between jQuery.ajax and XMLHttpRequest is that jQuery.ajax uses XMLHttpRequest to achieve the same effect but with a simpler interface. If you use jQuery I'd encourage you to stick with jQuery.ajax.

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

回答by Mannan Bahelim

Old post. but still want to answer,one difference that I faced while working with Web Workers(javascript)

旧帖。但仍然想回答，我在与Web Workers(javascript)一起工作时遇到的一个区别

web workers can't have any UI-level access. That means you can't access any DOM elements in the JavaScript code that you intend to run using web workers.Objects such as window, document, and parent can't be accessed in the web-worker code.

网络工作者不能拥有任何 UI 级别的访问权限。这意味着您无法访问您打算使用 Web Worker 运行的 JavaScript 代码中的任何 DOM 元素。无法在 Web Worker 代码中访问诸如 window、document 和 parent 之类的对象。

As we know jQuerylibrary is tied to the HTML DOM, and allowing it would violate the “no DOM access” rule. This can be a little painful because methods such as jQuery.ajax, jQuery.post, jQuery.getcan't be used in web workers. Luckily, you can use the XMLHttpRequestobject to make Ajax requests.

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

回答by Steve

As far as the jQuery methods go, .postand .getsimply do .ajaxinternally, their purpose is to abstract away some of the unnecessary options of .ajaxand provide some defaults appropriate to that type of request respectively.

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

I doubt there's much difference in performance between any of the 3.

我怀疑这 3 个中的任何一个之间的性能差异很大。

The .ajaxmethod in itself does an XMLHttpRequest, it'll be heavily optimised as per the rest of jQuery, but it probably won't be as efficient as if you tailored the whole interaction yourself.. but that's the difference between writing lots of code or writing jQuery.ajax.

该.ajax方法本身执行一个 XMLHttpRequest，它将按照 jQuery 的其余部分进行大量优化，但它可能不会像您自己定制整个交互那样高效..但这就是编写大量代码或写作jQuery.ajax。