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

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?

• 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.

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.

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.

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.

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.

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.