Co to jest Ajax?

Asynchroniczny kod wykonania jest przeciwny do synchronicznego, w którym kod nie musi czekać, aż instrukcja zakończy wykonywanie, ale może kontynuować wykonywanie równolegle. Asynchroniczne wykonanie jest osiągane za pomocą Ajax.

W tym poście omówimy, czym jest Ajax, działanie kroków Ajax i przejdziemy przez przykład, aby lepiej zrozumieć wdrożenie Ajax.

Co to jest Ajax?

Ajax, który oznacza Asynchroniczny JavaScript i XML, jest metodą (nie językiem programowania), która jest używana do aplikacji internetowych do przesyłania i odbierania danych z serwera asynchronicznego, bez wpływu na resztę treści strony lub wymaganie ponownego załadunku strony.

Skrót XML oznacza Rozszerzalny język znaczników To służy do szyfrowania wiadomości, aby można je było odczytać przez ludzi i maszyny. XML jest podobny do HTML, ale pozwala budować i dostosowywać własne tagi.

Ajax komunikuje się z serwerem za pomocą obiektu XMLHTTPREQUEST, JavaScript/DOM do składania żądań, a XML jako mechanizmu transmisji danych. Stało się popularne tylko wtedy, gdy Google umieścił go w Google sugeruje w 2005 roku

Mówiąc proste słowa Ajax to metoda zmniejszania interakcji serwerowych, które są realizowane tylko poprzez aktualizację części strony internetowej zamiast aktualizować całą stronę internetową. Celem Ajax jest wysłanie niewielkich ilości danych do serwera bez konieczności odświeżenia strony.

Stopniowe działanie Ajax

• Pewne zdarzenie jest wykonywane, a przeglądarka tworzy obiekt xmlhttprequest, po którym httprequest jest wysyłany na serwer.
• Serwer otrzymuje HTTPREQUEST, a następnie przetwarza go, po przetworzeniu serwer generuje odpowiedź i wysyła odpowiedź z powrotem do przeglądarki z pewnymi danymi.
• Zwracane dane są następnie przetwarzane przez przeglądarkę za pomocą JavaScript i w zależności od odpowiedzi JavaScript aktualizuje zawartość strony internetowej.

Przejrzyjmy kilka przykładów, aby lepiej zrozumieć Ajax.

Przykład 1:

Ten przykład pokaże, jak zmienić treść H2 Tag za pomocą Ajax. Najpierw zaimplementujemy strukturę naszej strony za pomocą HTML.

Obiekt XMLHTTPREQUEST

Zmień treść

W powyższym kodzie zdefiniowaliśmy div kontener i dał mu atrybut identyfikatora, z czego możemy odwoływać się do tego kontenera Div później w naszym kodzie JavaScript. Ta sekcja DIV jest zdefiniowana, aby mogła wyświetlać informacje z serwera. Następnie zdefiniowaliśmy znacznik H2 i przycisk, w którym minęliśmy na kliknięcie wydarzenie. Ilekroć użytkownik kliknie ten przycisk, zostanie wygenerowane zdarzenie, a funkcja ChangeContent () zostanie wykonane.

functionChangeContent ()
// XMLHTTPREQUEST Inicjowanie obiektu
constxhttp = newxmlhttprequest ();
// za pomocą wbudowanej funkcji Onload
xhttp.onload = function ()
// aktualizacja zawartości elementu div
dokument.getElementById („Przykład”).InnerHtml =
Ten.Respontext;

// Pobierz plik ajax_info.tekst
xhttp.Otwórz („get”, „ajax_info.tekst");
// Wysłać prośbę
xhttp.wysłać();

Teraz, gdy skończyliśmy z konfiguracją strony HTML, musimy napisać kod skryptu. W tym samouczku będziemy włączyć kod JavaScript w etykietka. W naszym kodzie skryptu najpierw musimy utworzyć funkcję ChangeContent () To zostanie wykonane za pomocą kliknięcia przycisku, możemy to zrobić za pomocą następujących wierszy kodu:

functionChangeContent ()
// XMLHTTPREQUEST Inicjowanie obiektu
constxhttp = newxmlhttprequest ();
// za pomocą wbudowanej funkcji Onload
xhttp.onload = function ()
// aktualizacja zawartości elementu div
dokument.getElementById („Przykład”).InnerHtml =
Ten.Respontext;

// Pobierz plik ajax_info.tekst
xhttp.Otwórz („get”, „ajax_info.tekst");
// Wysłać prośbę
xhttp.wysłać();

Jak widać w powyższym fragmencie kodu, funkcja generuje nowy XMLHTTPREquest i czeka na odpowiedź z serwera. Po otrzymaniu odpowiedzi treść DIV zostanie zastąpiona tą funkcją.

Utwórzmy teraz plik o nazwie ajax_info.tekst i napisz kilka manekinów w tym pliku na przykład:

Cały kod podano poniżej:

Obiekt XMLHTTPREQUEST

Zmień treść

Wyjście powyższego kodu znajduje się poniżej:

Widzimy, że gdy użytkownik kliknie przycisk, tekst „zmienia się” w tekście, który był obecny w ajax_info.plik txt.

Wniosek

JavaScript wykonuje wiersz kodu według linii, która nazywa się wykonaniem synchronicznym, a zatem Ajax wchodzi w grę, ponieważ jest to metoda, która pomaga wdrożeniem asynchronicznego wykonywania kodu w JavaScript. W wykonaniu asynchronicznym instrukcja lub wiersz kodu nie musi czekać na zakończenie poprzedniego wiersza kodu i oba mogą wykonać równolegle. Ajax jest używany do transmisji i odbierania danych z serwera asynchronicznego bez wpływu na resztę strony i nawet nie wymaga całego przeładowania strony.

W tym poście zobaczyliśmy, czym jest Ajax, a potem poszliśmy zobaczyć, jak działa Ajax, opisując proces krokowo, a na koniec zapewniliśmy ci przykład, aby Twoja koncepcja była wyraźniejsza.