В чем разница между XMLHttpRequest, jQuery.ajax, jQuery.post, jQuery.get

121

Как узнать, какой метод лучше всего подходит для конкретной ситуации? Может ли кто-нибудь привести несколько примеров, чтобы узнать разницу с точки зрения функциональности и производительности?

jquery ajax xmlhttprequest

— Rodrigues
источник

4

Что касается производительности (почти не ответил): согласно jsperf, использование обычного XMLHttpRequest намного быстрее, чем использование jQuery.

— e2-e4

145

XMLHttpRequest - это необработанный объект браузера, который jQuery превращает в более удобную и упрощенную форму и совместимую с кросс-браузером функциональность.
jQuery.ajax - это общий запросчик Ajax в jQuery, который может выполнять запросы любого типа и содержимого.
jQuery.getи, jQuery.postс другой стороны, может выдавать только запросы GET и POST. Если вы не знаете, что это такое, вам следует проверить протокол HTTP и немного узнать. Эти две функции используют внутренне, jQuery.ajaxно они используют определенные настройки, которые вам не нужно устанавливать самостоятельно, что упрощает запрос GET или POST по сравнению с использованием jQuery.ajax. В любом случае GET и POST являются наиболее часто используемыми методами HTTP (по сравнению с DELETE, PUT, HEAD или даже другими редко используемыми экзотическими методами).

Все функции jQuery используют XMLHttpRequestобъект в фоновом режиме, но предоставляют дополнительные функции, которые вам не нужно выполнять самостоятельно.

использование

Поэтому, если вы используете jQuery, я настоятельно рекомендую вам использовать только функциональность jQuery . Забудьте XMLHttpRequestсовсем обо всем . Используйте подходящие варианты функции запроса jQuery и во всех остальных случаях используйте $.ajax(). Так что не забывайте , что есть и другие связанные с общим JQuery Ajax функции к $.get(), $.post()и $.ajax(). Что ж, вы можете просто использовать $.ajax()для всего своего запроса, но вам придется написать немного больше кода, потому что для его вызова требуется немного больше параметров.

аналогия

Это как если бы вы могли купить себе автомобильный двигатель, который вам нужно было бы создать вокруг него целую машину с рулевым управлением, тормозами и т. Д. Производители автомобилей производят готовые автомобили с дружественным интерфейсом (педали, рулевое колесо и т. Д.) так что вам не нужно делать все самостоятельно.

— Роберт Коритник
источник

есть ли преимущества в использовании $ .ajax () с точки зрения производительности?

— Rodrigues

1

@Rodrigues: не совсем. Если подумать, $.postи $.getединственное, что медленнее, - это небольшой объем кода перед $.ajaxвызовом. Но если бы вы написали свои собственные подпрограммы с использованием XHR напрямую, все можно было бы немного оптимизировать, но могло бы быть больше ошибок. Я предлагаю вам оставаться на стороне jQuery. Это облегчит вашу жизнь. А учитывая тот факт, что асинхронный вызов занимает гораздо больше времени, чем код, его выдающий, вы, вероятно, не заметите очевидной разницы между этими вызовами.

— Роберт Коритник

Спасибо, Роберт Коритник. так что я получу с $ .post и $ .get.

— Родригес,

Вы также $.ajaxможете использовать, чтобы ваши звонки были единообразными везде, если хотите. Пока вы не используете XHR напрямую, вы можете делать это в любом случае.

— Роберт Коритник

1

@RobertKoritnik, а как насчет проблемы с кешированием в IE? То же самое при использовании XMLHttpRequest и $ .ajax ()?

— Bhargavi Gunda

28

Каждый из них использует XMLHttpRequest. Это то, что браузер использует для выполнения запроса. jQuery - это просто библиотека JavaScript, а метод $ .ajax используется для создания XMLHttpRequest.

$ .post и $ .get - это просто сокращенные версии $.ajax. Они делают почти то же самое, но ускоряют написание запроса AJAX - $.postотправляют запрос HTTP POST и $.getотправляют запрос HTTP GET.

— Джонатон Болстер
источник

как насчет лимита передачи данных для каждой функции для загрузки и скачивания

— Родригес

GETЗапрос отправит все данные в строке URL - который может быть ограничено клиент / сервер ( stackoverflow.com/questions/2659952/... ). А POSTзапросы отправляет все данные в заголовках, так что предельный размер URL не должен быть проблемой (если у вас есть действительно длинный файл и имена папок на ваш сценарий!).

— Джонатон Болстер

хорошо. Короче говоря, вы имеете в виду, чтобы отправлять больше сообщений об использовании данных и получать больше данных, правильно?

— Rodrigues

@Rodrigues - Да, в значительной степени :) Обычно, если вы просто хотите что-то прочитать (например, запрос на получение списка твитов из твиттера), используйте GET. Если вы хотите что-то отправить (например, опубликовать твит), используйте POST,

— Джонатон Болстер,

7

jQuery.getявляется оболочкой для jQuery.ajax, которая является оболочкой для XMLHttpRequest.

XMLHttpRequest и Fetch API (в настоящее время экспериментальные) - единственные в DOM, поэтому должны быть самыми быстрыми.

Я увидел много информации, которая больше не является точной, поэтому я создал тестовую страницу, на которой любой может проверить версию, какая из версий лучше всего в любое время:

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

Из моих сегодняшних тестов видно, что только jQuery не является чистым или даже быстрым решением, результаты для меня на мобильных или настольных компьютерах показывают, что jQuery, по крайней мере, на 80% медленнее, чем XHR2, если вы используете слишком много ajax, на мобильных устройствах загрузка простого сайта займет много времени.

Само использование тоже есть в ссылке.

— Сириус
источник

2

jQuery.post и jQuery.get имитируют типичную загрузку страницы, то есть вы нажимаете кнопку отправки, и она переводит вас на новую страницу (или перезагружает ту же страницу). post и get немного отличаются по способу отправки данных на сервер (хорошую статью об этом можно найти здесь .

jQuery.ajax и XMLHttpRequest - это загрузка страницы, аналогичная post и get, за исключением того, что страница не изменяется. Любая информация, возвращаемая сервером, может быть использована javascript локально для любого использования, включая изменение макета страницы. Обычно они используются для асинхронной работы, пока пользователь может перемещаться по странице. Хорошим примером этого могут быть возможности автозаполнения путем динамической загрузки значений из базы данных для заполнения текстового поля. Основное различие между jQuery.ajax и XMLHttpRequest заключается в том, что jQuery.ajax использует XMLHttpRequest для достижения того же эффекта, но с более простым интерфейсом. Если вы используете jQuery, я бы посоветовал вам придерживаться jQuery.ajax.

— Нил
источник

в чем преимущество использования jquery перед созданием объекта XMLHttpRequest xmlhttp.open, send () и responseText.

— Rodrigues

С одной стороны, объект XMLHttpRequest создается по-разному в зависимости от вашего текущего браузера. Это потребует от вас немного поддержки javascript, чтобы обеспечить базовый интерфейс с использованием XMLHttpRequest. Если у вас уже есть jQuery, он сделает все за вас. Это действительно вопрос удобства, а не функциональности, поскольку технически вы можете делать то же самое с любым из них. Не говоря уже о том, что, поскольку jQuery обертывает объект XMLHttpRequest, это означает, что он предоставляет его вам на тот случай, если вы захотите сделать с ним что-то конкретное.

— Нил

Хорошо .. Спасибо, Нил, за ваше предложение ... есть ли какая-нибудь IDE, например Visual Studio, для использования и отладки jquery с помощью php или aspx.

— Rodrigues

Трудно найти среду IDE, которая позволяет отлаживать как javascript, так и php или aspx просто потому, что одна находится на стороне сервера, а другая - на стороне клиента. Это означает, что, к сожалению, вам придется отдельно отлаживать javascript. Однако я обнаружил, что firebug ( getfirebug.com ) прекрасно подходит для отладки javascript в целом. Поместите точку останова в функцию обратного вызова, и она покажет вам все, что вам дает сервер, и шаг за шагом, все, что ваш javascript делает с ним. Надеюсь, это поможет.

— Нил

1

Старый пост. но все же хочу ответить, одно отличие, с которым я столкнулся при работе с веб-воркерами (javascript)

веб-работники не могут иметь доступа на уровне пользовательского интерфейса. Это означает, что вы не можете получить доступ к каким-либо элементам DOM в коде JavaScript, который вы собираетесь запускать с помощью веб-воркеров. К таким объектам, как окно, документ и родительский объект, нельзя получить доступ в коде веб-воркера.

Как мы знаем, библиотека jQuery привязана к HTML DOM, и ее разрешение нарушит правило «запрета доступа к DOM». Это может быть немного болезненно, потому что такие методы, как jQuery.ajax, jQuery.post, jQuery.get, не могут использоваться в веб- воркерах . К счастью, вы можете использовать объект XMLHttpRequest для выполнения запросов Ajax.

— Маннан Бахелим
источник

0

Что касается методов JQuery идти, .postи .getпросто сделать .ajaxвнутренне, их цель состоит в том, чтобы абстрагироваться от некоторых ненужных опций .ajaxи предоставить некоторые значения по умолчанию соответствующих этого типа запроса соответственно.

Я сомневаюсь, что есть большая разница в производительности между любым из трех.

Сам .ajaxпо себе метод выполняет XMLHttpRequest, он будет сильно оптимизирован для остальной части jQuery, но, вероятно, будет не так эффективен, как если бы вы сами настраивали все взаимодействие ... но в этом разница между написанием большого количества кода или письмо jQuery.ajax.

— Стив
источник

есть ли преимущества в настройке jQuery.ajax

— Родригес,

Я предполагаю, что под этим вы подразумеваете использование его вместо сокращенных методов, по моему опыту я считаю, что сокращенные методы полезны, если большинство значений по умолчанию - это то, что вы хотите, если вам нужно быть очень конкретным в том, как получить нужные данные. Как правило, лучше использовать ajax.

— Стив

Спасибо, Стив. буду использовать сообщение и получить. если вы дадите несколько примеров .ajax, я могу провести некоторое сравнение.

— Rodrigues