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

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

Author: SharpC, 2011-01-11
Source

6 answers

  • XMLHttpRequest w surowym obiekcie przeglądarki, który jQuery owija się w bardziej użyteczną i uproszczoną formę i spójną funkcjonalność między przeglądarkami.

  • jQuery.ajax jest ogólnym żądaniem Ajax w jQuery, które może wykonywać dowolne żądania typu i treści.

  • jQuery.get oraz jQuery.post z drugiej strony może wydawać tylko żądania GET I POST. Jeśli nie wiesz co to jest, powinieneś sprawdzić protokół HTTP i nauczyć się trochę. Wewnętrznie te dwie funkcje używają jQuery.ajax, ale używają konkretnych ustawień, których nie trzeba samemu ustawiać, upraszczając w ten sposób żądanie GET lub POST w porównaniu z użyciem jQuery.ajax. GET I POST są najczęściej używanymi metodami HTTP (w porównaniu do DELETE, PUT, HEAD lub nawet innych rzadko używanych egzotycznych).

Wszystkie funkcje jQuery używają obiektu XMLHttpRequest w tle, ale zapewniają dodatkową funkcjonalność, której nie musisz robić samodzielnie.

Użycie

Więc jeśli używasz jQuery zdecydowanie polecam korzystanie z funkcji jQuery tylko. Zapomnij o XMLHttpRequest. Użyj odpowiednich wariacji funkcji żądania jQuery i we wszystkich innych przypadkach użyj $.ajax(). Więc nie zapominaj, że istnieją inne typowe funkcje związane z jQuery Ajax do $.get(), $.post() i $.ajax(). Cóż, możesz po prostu użyć $.ajax() dla wszystkich swoich żądań, ale będziesz musiał napisać trochę więcej kodu, ponieważ potrzebuje trochę więcej opcji do wywołania to.

Analogia

To tak, jakbyś był w stanie kupić sobie silnik samochodu, który musiałbyś stworzyć cały samochód wokół niego z kierownicą, hamulcami itp... Producenci samochodów produkują kompletne samochody, z przyjaznym interfejsem (pedały, kierownice itp.) więc nie musisz robić tego wszystkiego sam.
 121
Author: Robert Koritnik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-16 11:11:58

Każdy z nich używa XMLHttpRequest. To jest to, czego używa przeglądarka do złożenia żądania. jQuery jest tylko biblioteką JavaScript i $.metoda ajax jest używana do tworzenia zapytania XMLHttpRequest.

$.post i $.get to tylko skrócone wersje $.ajax. Robią prawie to samo, ale sprawia, że szybciej napisać żądanie AJAX - $.post sprawia, że żądanie HTTP POST i $.get sprawia, że żądanie HTTP GET.

 21
Author: Jonathon Bolster,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-01-11 11:55:41

jQuery.get jest wrapperem dla jQuery.ajax, który jest wrapperem do 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, więc zrobiłem stronę testową, gdzie każdy może przetestować wersję z wersji, która jest najlepsza w dowolnym momencie:

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

Z moich dzisiejszych testów wynika, że tylko jQuery nie jest czystym a nawet szybkie rozwiązanie, wyniki dla mnie w mobile lub desktop pokazuje, że jQuery są co najmniej 80% wolniejsze niż XHR2, jeśli używasz zbyt dużo ajax, w mobile to zajmie dużo czasu, aby załadować prostą stronę.

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

 4
Author: Sirius,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-19 19:48:15

JQuery.post i jQuery.Pobierz symuluj typowe ładowanie strony, co oznacza, że klikasz przycisk Wyślij i przenosi cię do nowej strony(lub ładuje tę samą stronę). post I get różnią się nieco sposobem wysyłania danych do serwera (dobry artykuł na ten temat można znaleźć tutaj .

JQuery.ajax i XMLHttpRequest to ładowanie stron podobne do post I get, z tą różnicą, że strona się nie zmienia. Wszelkie informacje, które zwróci Serwer, mogą być używane lokalnie przez javascript do wykorzystania w jakikolwiek sposób, łącznie z modyfikacją układu strony. Są one zwykle używane do pracy asynchronicznej, podczas gdy użytkownik może nadal poruszać się po stronie. Dobrym tego przykładem są możliwości autouzupełniania poprzez dynamiczne ładowanie z wartości bazy danych w celu uzupełnienia pola tekstowego. Podstawowa różnica między jQuery.ajax i XMLHttpRequest to jQuery.ajax używa XMLHttpRequest, aby osiągnąć ten sam efekt, ale z prostszym interfejsem. Jeśli używasz jQuery to zachęcam do trzymania się jQuery.ajax.

 1
Author: Neil,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-01-11 12:00:19

Stary post. ale nadal chcę odpowiedzieć,jedna różnica, z którą miałem do czynienia podczas pracy z Web Workers (javascript)

Pracownicy sieci nie mogą mieć dostępu na poziomie interfejsu użytkownika. Oznacza to, że nie masz dostępu do żadnego DOM elementy kodu JavaScript, które mają być uruchamiane przy użyciu pracowników sieci.W kodzie web-worker nie można uzyskać dostępu do obiektów takich jak okno, dokument i element nadrzędny.

Jak wiemy biblioteka jQuery jest powiązana z HTML DOM i jej Zezwolenie naruszałoby "brak dostępu do DOM" zasada. Może to być trochę bolesne, ponieważ metody takie jak jQuery.ajax, jQuery.post, jQuery.get nie może być używany w Web workerach. Na szczęście możesz skorzystać z XMLHttpRequest obiekt do tworzenia żądań Ajax.

 1
Author: Mannan Bahelim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-03 07:42:36

Jeśli chodzi o metody jQuery, .post i .get po prostu wykonują .ajax wewnętrznie, ich celem jest usunięcie niektórych niepotrzebnych opcji .ajax i podanie pewnych wartości domyślnych odpowiednich odpowiednio do tego typu żądania.

Wątpię, czy jest duża różnica w wydajności pomiędzy którymkolwiek z tych trzech.

Metoda .ajax sama w sobie robi XMLHttpRequest, będzie mocno zoptymalizowana jak na resztę jQuery, ale prawdopodobnie nie będzie tak skuteczna, jak gdybyś dopasował cały interakcja z samym sobą.. ale to jest różnica między pisaniem dużej ilości kodu a pisaniem jQuery.ajax.

 0
Author: Steve,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-01-11 11:56:16