Spisie treści
AJAX Obejmuje zestaw technik i technologii, które pozwalają nam nawiązać asynchroniczną komunikację między tym, co klient widzi w sieci, a informacjami, które istnieją po stronie serwera strony internetowej.Jedną z głównych cech, które możemy podkreślić, jest to, że opiera się na różnych metodach HTTP Co POST, GET, PUT lub USUŃ aby móc przesłać niezbędne dane do aplikacji na serwerze.
Na wczesnym etapie rozwoju z AJAX połączenia musiały być budowane przy użyciu JavaScript mieszkanie, które jednak wygenerowało dla nas dużo kodu jQuery pomaga nam uprościć rzeczy, udostępniając tę technikę i technologie masom, a wszystko to z korzyścią zarówno dla programisty, jak i użytkownika.
Co to jest AJAX?AJAX koresponduje z Asynchroniczny JavaScript i XML mianowicie JavaScript Tak XML asynchroniczny, co oznacza również, że jest czymś, co nie zależy od stałej struktury, takiej jak skrypt PHP gdzie instrukcje są wykonywane sekwencyjnie, oczywiście z zachowaniem wywołań metod i funkcji klas i obiektów.
Wyjaśnione powyżej daje nam możliwość wczytania informacji lub wysłania jej bez konieczności przeładowywania lub składania „kompletnego” żądania do serwera, umieszczamy je w cudzysłowie, ponieważ wywołania AJAX Są to normalne żądania, po prostu nie jest konieczne odświeżenie strony w całości, jeśli nie jest to pożądane zachowanie.
Korzystanie z tych technik i technologii ma pewne zalety, o których istnieniu niewielu zdaje sobie sprawę, wiele razy używamy ich tylko ze względu na trend, ale jeśli zrozumiemy jego zalety, będziemy mogli wiedzieć, do jakich projektów możemy je zastosować, aby uzyskać jak najwięcej z tego. Zobaczmy poniżej niektóre z najważniejszych zalet używania AJAX:
Redukcja wykorzystania przepustowościOsiągamy to dzięki prośbom w szczególności o sekcje, dzięki czemu możemy osiągnąć, na przykład, brak konieczności ponownego ładowania ogólnych stylów lub obrazów, jeśli chcemy odświeżyć tekst.
Lepsze wrażenia użytkownikaZwiększając szybkość aplikacji internetowej, użytkownik ma zauważalną poprawę w użytkowaniu, a ponadto daje nam jako programistom możliwość zwiększenia stopnia interakcji z zaaranżowanymi przez nas elementami.
Usuń zależność przeglądarkiPodczas używania jQuery eliminuje się potrzebę pisania kodu zależnego od przeglądarki, co pomaga nam poprawić szybkość rozwoju i produktywność naszych czasów.
Ponieważ nic nie jest idealne, podczas używania AJAX Musimy również zrozumieć, że istnieją pewne wady, które mogą skłonić nas do refleksji i zastanowienia się, czy jest to najlepsza opcja dla naszego projektu. Następnie zobaczymy niektóre z tych punktów, aby uzyskać pełniejszy obraz przed rozpoczęciem technicznej części samouczka.
ZależnośćJeśli klient lub użytkownik korzysta z bardzo starej przeglądarki lub korzysta z JavaScript dezaktywowana, nasza aplikacja może ucierpieć lub nie działać, co zobowiązuje nas do robienia specjalnych przypadków, gdy nie możemy użyć AJAX.
Napisz dodatkowy kodZgodnie z naszą aplikacją musimy napisać dodatkowy kod, aby móc zintegrować odpowiedzi, które otrzymujemy z żądań AJAX, takie jak odpowiedzi, które pochodzą z HTML Tak CSS.
Oczywiście obecnie bardzo trudno jest znaleźć przeglądarkę, która nie jest kompatybilna z JavaScript Tak jQueryJednak w zależności od naszego obszaru możemy znaleźć przypadki, które mogą bardzo utrudnić życie.
Prośba AJAX z jQuery musi mieć podstawową strukturę, gdzie musimy ustalić pewne parametry niezbędne dla frameworka, musimy ustalić metodę HTTP żądania, trasę, na którą zostanie wysłane żądanie, format odpowiedzi i wreszcie, co należy zrobić w przypadku pomyślnego zakończenia żądania lub wystąpienia błędu. Zobaczmy w poniższym niefunkcjonalnym kodzie, jak możemy to zobaczyć:
$ .ajax ({type: "metoda HTTP", // POST, GET, PUT, DELETE url: "Żądanie ścieżki", // http: // www.example.com/request dataType: "Typ danych", / / html, xml, json sukces: funkcja przy powodzeniu, błąd: funkcja przy błędzie}); Widzimy, że każda z sekcji, które opisaliśmy, to parametry, które otrzymuje nasze żądanie i że odbywa się to za pomocą metody $ .ajax () który jest dostarczany przez jQuery bezpośrednio i jest maską kodu JavaScript samolot, który odpowiada każdemu silnikowi każdej obsługiwanej przeglądarki, które w tej chwili są prawie wszystkimi najnowszymi reklamami, takimi jak Chrome, Firefox, Opera, Safari Internet Exploreri te pochodzące z silników tych, o których wspomnieliśmy.
Teraz zastosujemy w praktyce to, co widzieliśmy w poprzedniej sekcji podczas składania wniosku AJAX ze strony HTML które zbudujemy w poniższym przykładzie. Musimy wiedzieć, że będziemy potrzebować najnowszej wersji jQuery możemy dostać, jednak możemy użyć tego, który przechowują w swoich CDN, będziemy również potrzebować małego serwera WWW, aby móc przekierować pliki, które zamierzamy uzyskać asynchronicznie, do tego możemy użyć WAMP w Oknalub instalacja LAMPA w systemach Linux, jeśli chodzi o platformy MAC, z których możemy korzystać XAMP lub podobne.
W poniższym kodzie zamierzamy zawrzeć w pierwszej kolejności jQuery, wtedy w body stworzymy etykietę z unikalnym id gdzie umieścimy treść odpowiedzi na nasze żądanie, a pod koniec dokumentu zrobimy etykietę scenariusz gdzie wygenerujemy kod do złożenia żądania, w atrybucie the adres URL złożymy żądanie do indeksu folderu, w którym znajdują się nasze pliki, robimy to, aby pokazać działanie naszego kodu, jednak sposobem na to jest żądanie innego pliku, który będzie obsługiwał potrzebną nam odpowiedź, zobacz kod:
Przykład żądania AJAXPrzetwarzaj AJAX
Na poniższym obrazku widzimy, jak wszystko działało, gdzie możemy zobaczyć pomyślną odpowiedź z naszego kodu.
Jedna z rzeczy, które jQuery chce, abyśmy nie marnowali czasu i kodowania robiąc rzeczy na dłuższą metę, dlatego oferuje nam skróty do połączeń AJAX najczęstsze metody, takie jak DOSTWAĆ Tak POCZTA, dzięki czemu korzystając ze skrótu oszczędzamy kilka linijek kodu i dzięki temu możemy zmniejszyć wagę naszej aplikacji.
Do tego w oficjalnej dokumentacji jQuery Mamy wszystkie istniejące przypadki, jednak zamierzamy powtórzyć poprzedni przykład, używając w tym przypadku skrótu, ale zanim zobaczymy kod funkcjonalny, zobaczmy przykład niefunkcjonalny:
$ .get (ścieżka, dane, SuccessFunction, ResponseType);
Jak zauważyliśmy, to wywołanie jest znacznie mniejsze, co pomaga nam mieć czystszy i lżejszy kod, teraz stosując to do naszego poprzedniego przykładu, wyglądałoby to następująco:
Przykład żądania AJAXPrzetwarzaj AJAX
Widzimy, że liczba linii i znaków została znacznie zmniejszona, co poprawiłoby naszą transmisję danych przy użyciu mniejszej przepustowości. Jeśli uruchomimy wszystko w przeglądarce, otrzymamy następującą odpowiedź:
