Jak wykonać połączenie Ajax w JavaScript?
W tym poście zobaczymy, czym jest Ajax i jak wykonać Ajax Call in JavaScript za pomocą przykładu.
Co to jest Ajax?
Ajax stał się popularny w 2005 roku, kiedy Google umieścił go w Google Suger i oznacza asynchroniczny JavaScript i XML. XML oznacza rozszerzalny język znaczników, który służy do szyfrowania wiadomości, które mogą być odczytane przez ludzi i maszyny. XML jest podobny do HTML, ale pozwala budować i dostosowywać własne tagi. Funkcją Ajax jest przesyłanie żądań do serwera, a następnie odbieranie danych z tego serwera w sposób asynchroniczny.
Zaletą Ajax jest to, że wykonuje swoją funkcję bez potrzeby odświeżenia całej strony. Na przykład, kiedy wpisujesz coś do wyszukiwania na pasku wyszukiwania Google, przy każdym klawiszu naciśnij pasek wyszukiwania, a użytkownik otrzymuje sugestie, nie odświeżając strony.
Należy zauważyć, że Ajax komunikuje się z serwerem za pomocą obiektu XMLHTTPREQUEST, JavaScript/DOM, aby składać żądania, a XML jako mechanizm transmisji danych.
Ajax jest wyzwalany wydarzeniem, a następnie wykonuje swoją funkcjonalność, najpierw tworząc Xmlhttprequest obiekt, a następnie wysyłanie Httprequest do serwera, na którym Httprequest jest przetwarzany i generowana jest odpowiedź, która jest następnie wysyłana z powrotem do przeglądarki z pewnymi danymi. Przeglądarka przetwarza zwrócone dane i aktualizuje zawartość strony za pomocą JavaScript.
Teraz, gdy wiemy, czym jest Ajax i jak wykonać połączenie Ajax za pomocą JavaScript.
Ajax Call za pomocą JavaScript
W tym przykładzie najpierw zainicjuje. XMLHTTPREQUEST ma wiele wbudowanych metod, których możemy użyć do manipulowania lub grania z serwerem, wysyłając, przerywając odpowiedzi i odbierając dane z serwera. Połączymy się z bezpłatnym fałszywym interfejsem API, aby przetestować nasze połączenie Ajax. Link API, którego zamierzamy użyć, podano poniżej:
https: // jsonplaceholder.typicode.com/
Pełny kod wykonania połączenia Ajax podano poniżej:
funkcjaMyFunc ()// Inicjowanie obiektu xmlhttprequest
varxhttp = newxmlhttprequest ();
// Ustanowienie połączenia z fałszywym interfejsem API
varurl = 'https: // jsonplaceholder.typicode.com/todos/1 ';
// Zdobądź API z URL
xhttp.otwarte („Get”, URL, prawda);
// Gdy żądanie zakończy się powodzeniem, poniższa funkcja zostanie wykonana
xhttp.onReadyStateChange = function ()
// Jeśli żądanie jest kompletne i skuteczne
Jeśli to.ReadyState == 4 && to.status == 200)
konsola.Log (to.Respontext);
// Wysłać prośbę
xhttp.wysłać();
// Wywołaj funkcję MyFunc
myfunc ();
W powyższym kodzie, po pierwsze, zainicjowaliśmy funkcję o nazwie myfunc (), I wewnątrz tej funkcji stworzyliśmy Xmlhttprequest obiekt. Następnie ustanawiamy połączenie z interfejsem API za pomocą adresu URL. Aby uzyskać interfejs API, używamy xhttp.otwarty() Metoda i przejdź metodę HTTP DOSTAWAĆ i URL. Metoda GET jest stosowana, gdy otrzymujemy niektóre dane z serwera i POST Metoda jest używana podczas piszem lub aktualizujemy dane na serwerze.
Teraz, gdy żądanie zakończy wykonywanie i jeśli się powiedzie, onReadyStatechange zdarzenie zostanie wykonane w miejscu, w którym używamy warunku, że jeśli żądanie zostanie zakończone, a żądanie zakończyło się powodzeniem, pociesz dane. Kod stanu 200 jest używany, co oznacza OK. 400 Kod stanu oznacza błąd i 300 Kod stanu oznacza przekierowanie na jakąś stronę. Następnym krokiem jest wysłanie żądania za pomocą metody send ().
Ostatecznie wywołujemy funkcję MyFunc () i zobaczymy następujące dane wyjściowe w dzienniku konsoli:
Kod stanu widoczny w narzędzi programistycznych wynosi 200, co oznacza OK:
Wniosek
Ajax oznacza asynchroniczny JavaScript i XML, gdzie XML jest używany do szyfrowania wiadomości wykonanych w czytelnym formacie dla ludzi i maszyn, z tym wyjątkiem, że XML pozwala dostosowywać własne tagi. Ajax pozwala przesyłać dane do serwera bez konieczności odświeżenia całej strony. Wykonuje swoją operację asynchroniczną, a tym samym poprawić prędkość, ponieważ kod nie musi czekać, aż poprzedni kod zakończy jego wykonanie. W JavaScript obiekt xmlhttprequest służy do wykonywania wywołania Ajax.
W tym poście, najpierw omówiliśmy, czym jest Ajax, a następnie omówiliśmy, jak wykonać połączenie Ajax w JavaScript za pomocą obiektu XMLHTTPREQUEST.