Jaka jest różnica między XMLHttpRequest, jQuery.ajax, jQuery.post, jQuery.get


121

Jak mogę się dowiedzieć, która metoda jest najlepsza w danej sytuacji? Czy ktoś może podać kilka przykładów, aby poznać różnicę w zakresie funkcjonalności i wydajności?


4
Odnośnie wydajności (ledwo udzielono odpowiedzi): według jsperf użycie zwykłego XMLHttpRequest jest znacznie szybsze niż przechodzenie przez jQuery.
e2-e4

Odpowiedzi:


145
  • XMLHttpRequest to nieprzetworzony obiekt przeglądarki, który jQuery opakowuje w bardziej użyteczną i uproszczoną formę oraz spójną funkcjonalność dla różnych przeglądarek.

  • jQuery.ajax jest ogólnym requesterem Ajax w jQuery, który może wykonywać żądania dowolnego typu i zawartości.

  • jQuery.geta jQuery.postz drugiej strony może wydać jedynie żądania POST i GET. Jeśli nie wiesz, co to jest, powinieneś sprawdzić protokół HTTP i trochę się nauczyć. Wewnętrznie te dwie funkcje używają, jQuery.ajaxale używają określonych ustawień, których nie musisz ustawiać samodzielnie, co upraszcza żądanie GET lub POST w porównaniu do używania jQuery.ajax. GET i POST i tak są najczęściej używanymi metodami HTTP (w porównaniu do DELETE, PUT, HEAD lub nawet innych rzadko używanych egzotyków).

Wszystkie funkcje jQuery używają XMLHttpRequestobiektu w tle, ale zapewniają dodatkowe funkcje, których nie musisz wykonywać samodzielnie.

Stosowanie

Więc jeśli używasz jQuery, zdecydowanie zalecam używanie tylko funkcjonalności jQuery . XMLHttpRequestCałkowicie zapomnij . Użyj odpowiednich odmian funkcji żądania jQuery, a we wszystkich innych przypadkach użyj $.ajax(). Więc nie zapomnij istnieją inne wspólne jQuery Ajax podobne funkcje do $.get(), $.post()i $.ajax(). Możesz po prostu użyć go $.ajax()dla wszystkich swoich żądań, ale będziesz musiał napisać trochę więcej kodu, ponieważ wymaga nieco więcej opcji, aby to wywołać.

Analogia

To tak, jakbyś był w stanie kupić sobie silnik samochodu, który musiałbyś stworzyć wokół niego cały samochód z kierownicą, hamulcami itp ... Producenci samochodów produkują samochody gotowe, z przyjaznym interfejsem (pedały, kierownica itp.) więc nie musisz tego robić sam.


Czy jest jakaś korzyść z używania $ .ajax () pod względem wydajności?
Rodrigues,

1
@Rodrigues: nie do końca. Jeśli pomyślisz $.posti $.getjedyną wolniejszą rzeczą jest niewielka ilość kodu przed $.ajaxwywołaniem. Ale jeśli napiszesz własne procedury bezpośrednio przy użyciu XHR, rzeczy mogą być nieco zoptymalizowane, ale mogą być bardziej błędne. Proponuję pozostać po stronie jQuery. Ułatwi ci to życie. Biorąc pod uwagę fakt, że wywołanie asynchroniczne trwa znacznie dłużej niż wywołanie kodu, prawdopodobnie nie zauważysz wyraźnej różnicy między tymi wywołaniami.
Robert Koritnik

Dzięki Robertowi Koritnik. więc dostanę z $ .post i $ .get.
Rodrigues,

Jeśli chcesz, możesz równie dobrze $.ajaxwykonywać połączenia wszędzie tam, gdzie chcesz. Tak długo, jak nie używasz XHR bezpośrednio, dobrze jest to zrobić.
Robert Koritnik

1
@RobertKoritnik A co z problemem buforowania w IE? Czy to jest to samo przy użyciu XMLHttpRequest i $ .ajax ()?
Bhargavi Gunda

28

Każdy z nich używa XMLHttpRequest. Właśnie tego używa przeglądarka do wysłania żądania. jQuery to po prostu biblioteka JavaScript, a metoda $ .ajax służy do tworzenia XMLHttpRequest.

$ .post i $ .get to tylko skrócone wersje $.ajax. Robią prawie to samo, ale przyspieszają pisanie żądania AJAX - wysyła żądanie $.postHTTP POST i $.getwysyła żądanie HTTP GET.


co z limitem transferu danych dla każdej funkcji do wysyłania i pobierania
Rodrigues

GETŻądanie wyśle wszystkie dane w adresie URL - co może być ograniczone przez klienta / serwera ( stackoverflow.com/questions/2659952/... ). A POSTwnioski wysyła wszystkie dane w nagłówkach, więc limit rozmiaru URL nie powinno być problemu (chyba że masz naprawdę długie nazwy plików i folderów do skryptu!).
Jonathon Bolster

dobrze. więc w skrócie masz na myśli, aby wysłać więcej postu z wykorzystaniem danych i otrzymać więcej danych, prawda?
Rodrigues,

@Rodrigues - Tak, prawie :) Ogólnie rzecz biorąc, jeśli chcesz tylko coś przeczytać (np. Prośbę o listę tweetów z Twittera), użyj GET. Jeśli chcesz coś wysłać (np. Opublikować tweeta), użyj POST,
Jonathon Bolster

7

jQuery.getjest opakowaniem dla jQuery.ajax, które jest opakowaniem dla XMLHttpRequest.

XMLHttpRequest i Fetch API (obecnie eksperymentalne) są jedynymi w DOM, więc powinny być najszybsze.

Widziałem wiele informacji, które nie są już dokładne, dlatego stworzyłem stronę testową, na której każdy może w dowolnym momencie przetestować wersję od wersji, która jest najlepsza:

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

Z moich dzisiejszych testów wynika, że ​​tylko jQuery nie jest czystym ani nawet szybkim rozwiązaniem, wyniki dla mnie na urządzeniach mobilnych lub komputerach pokazują, że jQuery jest co najmniej 80% wolniejsze niż XHR2, jeśli używasz zbyt dużo Ajax, na urządzeniach mobilnych ładowanie prostej witryny zajmie dużo czasu.

Samo użycie jest również w linku.


2

jQuery.post i jQuery.get symulują typowe ładowanie strony, co oznacza, że ​​klikasz przycisk przesyłania i przenosi Cię do nowej strony (lub ponownie ładuje tę samą stronę). post i get różnią się nieco sposobem, w jaki dane są przesyłane na serwer (dobry artykuł na ten temat można znaleźć tutaj .

jQuery.ajax i XMLHttpRequest to ładowanie strony podobne do wysyłania i pobierania, z tą różnicą, że strona się nie zmienia. Wszelkie informacje zwracane przez serwer mogą być używane lokalnie przez javascript w jakikolwiek sposób, łącznie z modyfikacją układu strony. Zwykle są używane do pracy asynchronicznej, podczas gdy użytkownik może nadal poruszać się po stronie. Dobrym przykładem mogą być możliwości autouzupełniania poprzez dynamiczne ładowanie wartości z bazy danych w celu uzupełnienia pola tekstowego. Podstawowa różnica między jQuery.ajax i XMLHttpRequest polega na tym, że jQuery.ajax używa XMLHttpRequest, aby osiągnąć ten sam efekt, ale z prostszym interfejsem. Jeśli używasz jQuery, zachęcam do pozostania przy jQuery.ajax.


jaka jest przewaga używania jquery nad tworzeniem obiektu XMLHttpRequest xmlhttp.open, send () i responseText.
Rodrigues,

Obiekt XMLHttpRequest jest tworzony w różny sposób w zależności od Twojej bieżącej przeglądarki z jednego powodu. Wymagałoby to odrobiny obsługi javascript, aby zapewnić podstawowy interfejs przy użyciu XMLHttpRequest. Jeśli masz już jQuery, zrobi to za Ciebie. To naprawdę kwestia wygody, a nie funkcjonalności, ponieważ technicznie można zrobić to samo z każdym z nich. Nie wspominając o tym, że skoro jQuery opakowuje obiekt XMLHttpRequest, oznacza to, że dostarcza go na wypadek, gdybyś chciał zrobić z nim coś konkretnego.
Neil

ok .. Dziękuję Neil za twoją sugestię ... czy jest jakieś IDE, takie jak Visual Studio dostępne do używania i debugowania jquery za pomocą php lub aspx.
Rodrigues,

Trudno jest znaleźć IDE, które umożliwia debugowanie zarówno javascript, jak i php lub aspx po prostu dlatego, że jeden jest po stronie serwera, a drugi po stronie klienta. Oznacza to, że niestety musisz oddzielnie debugować javascript. Jednak odkryłem, że firebug ( getfirebug.com ) jest wspaniały do ​​debugowania javascript w ogóle. Umieść punkt przerwania w funkcji wywołania zwrotnego, a pokaże ci on wszystko, co otrzymałeś od serwera i krok po kroku, wszystko, co robi z nim twój javascript. Mam nadzieję, że to pomoże.
Neil

1

Stary post. ale nadal chcę odpowiedzieć, jedna różnica, z którą napotkałem podczas pracy z pracownikami sieciowymi (javascript)

pracownicy sieciowi nie mogą mieć dostępu na poziomie interfejsu użytkownika. Oznacza to, że nie możesz uzyskać dostępu do żadnych elementów DOM w kodzie JavaScript, który zamierzasz uruchomić za pomocą pracowników sieci Web. Do obiektów takich jak okno, dokument i element nadrzędny nie można uzyskać dostępu w kodzie pracownika sieci Web.

Jak wiemy, biblioteka jQuery jest powiązana z HTML DOM i pozwolenie na to naruszyłoby zasadę „brak dostępu do DOM”. Może to być trochę bolesne, ponieważ metody takie jak jQuery.ajax, jQuery.post, jQuery.get nie mogą być używane w robotach internetowych. Na szczęście możesz użyć obiektu XMLHttpRequest do tworzenia żądań Ajax.


0

Jeśli chodzi o metody jQuery .posti .getrobią to po prostu .ajaxwewnętrznie, ich celem jest wyodrębnienie niektórych niepotrzebnych opcji .ajaxi zapewnienie niektórych wartości domyślnych odpowiednich dla tego typu żądań.

Wątpię, czy istnieje duża różnica w wydajności między którymkolwiek z 3.

.ajaxMetoda sama w sobie robi XMLHttpRequest, to będę mocno zoptymalizowany zgodnie reszty jQuery, ale prawdopodobnie nie będzie tak wydajny jak gdybyś dostosowane cały interakcji siebie .. ale to jest różnica między pisania kodu lub partii pisanie jQuery.ajax.


czy jest jakaś korzyść z dostosowywania jQuery.ajax
Rodrigues

Zakładam, że masz na myśli używanie go zamiast metod skrótowych. Z mojego doświadczenia wynika, że ​​metody skrócone są przydatne, jeśli większość ustawień domyślnych jest tym, czego chcesz, jeśli chcesz bardzo dokładnie określić, jak uzyskać potrzebne dane. Ajax jest zwykle drogą do zrobienia.
Steve

Dzięki Steve. użyje post i get. jeśli podasz kilka przykładów .ajax mogę zrobić jakieś porównanie.
Rodrigues,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.