Jak działa Ajax
W tym spisie omówi komponenty Ajax i jak działa Ajax. Porozmawiamy o pracy Ajax w niektórych najlepszych aplikacjach internetowych. Ponadto zapewnione zostanie porównanie modelu konwencjonalnego i AJAX. A więc zacznijmy!
Składniki Ajax
Ajax to zestaw technik tworzenia stron internetowych. Opiera się na poniższych komponentach:
- W modelu Ajax, Xhtml/html jest uważany za podstawowe języki i arkusze stylów kaskadowych (CSS) za język prezentacji.
- Dokument Model obiektu jest wykorzystywany do wyświetlania dynamicznych celów i interakcji.
- W celu wymiany danych Ajax polega XML, a XSLT jest używany do manipulacji danymi.
- Xmlhttprequest Obiekt jest używany do komunikacji asynchronicznej w modelu.
- W końcu, JavaScript służy do połączenia wszystkich tych technologii w Ajax.
Jak działa Ajax
Ilekroć użytkownicy wysyłają dowolne żądanie z interfejsu użytkownika lub zdarzenie, takie jak klikanie przycisku lub ładowana strona, JavaScript tworzy „Xmlhttprequest" obiekt. Następnie utworzony obiekt wysyła HTTPRequest do serwera internetowego. Następnie serwer przetwarza otrzymane Httprequest poprzez interakcje z bazą danych. Gdy wymagane dane zostaną pobierane z bazy danych, generowana jest odpowiedź, a serwer to odsyła JSON Lub XML Dane do przeglądarki. W następnym kroku JavaScript przetwarza zwrócone dane i odpowiednio aktualizuje stronę internetową.
Poniższy obraz ilustruje również działanie Ajax:
AJAX Praktyczne przykłady
Rozważ funkcję autocomplete Google strona internetowa. Pomaga ci w wypełnianiu słów kluczowych podczas pisania. Strony internetowe Google pozostają takie same, gdy słowa kluczowe zmieniają się w czasie rzeczywistym. Kiedy Internet nie był tak bardzo postępowy lata 90, Strona internetowa Google została ponownie załadowana za każdym razem, gdy pokazała nową rekomendację ekranu przeglądarki.
W 2004, Google zaczął osadzać model AJAX za kulisami Map Google i Google Mail. Umożliwia wymianę danych i umożliwia pracę warstwy prezentacji bez zakłócania.
Ajax jest obecnie powszechnie używany w kilku aplikacjach internetowych do uproszczenia komunikacji z serwerem. Zebraliśmy również listę innych praktycznych przykładów AJAX:
- Pokoje czatowe: W dzisiejszych czasach wbudowane pokoje czatowe należą do największych funkcji strony internetowej. Strony internetowe oferują czaty na ich stronie głównej, korzystając z których możesz komunikować się z przedstawicielem obsługi klienta. Możesz eksplorować stronę internetową podczas wysyłania i odbierania wiadomości z czatu. Ajax nie przeładowuje całej strony podczas tych jednoczesnych czynności.
- Systemy oceny i głosowania: Czy kiedykolwiek uczestniczyłeś w jakimś formularzu do głosowania online, czy też podałeś ocenę produktu po zakupie go online? Ajax jest używany w obu wymienionych systemach. Po udzieleniu oceny lub głosowania strona internetowa zaktualizuje sekcję obliczeń, a reszta pozostaje niezmieniona.
- Powiadomienie o popularności na Twitterze: Modne powiadomienie Twittera to świetna funkcja, aby nadążyć za tym, co dzieje się na świecie. Ajax został niedawno zatrudniony na Twitterze do aktualizacji i aktualizuje aplikację, gdy wysyłane są nowe tweety dotyczące modnych tematów bez wpływu na główną stronę internetową.
Krótko mówiąc, modele Ajax ułatwiają wielozadaniowość. Załóżmy, że zauważysz aplikację wykonującą dwa działania jednocześnie, bez stawiania jednej bezczynności, a drugą w stanie aktywnym. W tych scenariuszach Ajax pracuje w tle.
Porównanie AJAX i modelu konwencjonalnego
| Model Ajax | Model konwencjonalny |
|---|---|
| Gdy zdarzenie nastąpi, przeglądarka definiuje wywołanie JavaScript, aktywując xmlhttprequest. | Przeglądarka przekazuje żądanie HTTP na serwer w modelu konwencjonalnym. |
| Utworzony obiekt następnie wysyła żądanie HTTP do serwera w tle. | Dane są odbierane, a następnie pobierane przez serwer. |
| Żądanie jest odbierane, wymagane dane są pobierane i wysyłane z powrotem do przeglądarki internetowej. | Przeglądarka internetowa akceptuje odpowiedź serwera. |
| Pobrane dane są wysyłane z powrotem do przeglądarki i wyświetlane bezpośrednio na stronie. W modelu AJAX nie jest wykonywana operacja przeładowania strony. | Przeglądarka ponownie załaduje stronę do jej aktualizacji. Podczas tej operacji użytkownicy muszą poczekać, aż strona zostanie ponownie załadowana. Ta akcja jest czasochłonna i nakłada dodatkowe ładunki na serwerze. |
Wniosek
AJAX pozwala na aktualizację stron internetowych asynchroniczną podczas wymiany danych w tle. Stwierdzono, że elementy strony internetowej można aktualizować bez ponownego załadunku strony. W tym spisie omówiono komponenty Ajax i jak działa Ajax. Rozmawialiśmy o pracy Ajax w niektórych najlepszych aplikacjach internetowych. Ponadto zapewniane jest również porównanie modeli konwencjonalnych i AJAX.