Wprowadzenie do połączeń Ajax

Opublikowany: 2021-11-01

Witamy w naszym wprowadzeniu do Ajaksu! W tym artykule omówimy podstawy Ajaksu i jego użycie na przykładzie z prawdziwego świata. Przyjrzymy się również przykładowi wywołania Ajax-PHP. Chociaż zrobiliśmy co w naszej mocy, aby uprościć ten samouczek, praktyczna znajomość Javascript, PHP i WordPress jest bardzo ważna dla pełnego zrozumienia tego, co następuje. Mając to na uwadze, zacznijmy!

Co to jest Ajax?

Ajax oznacza asynchroniczny JavaScript i XML.

Ajax nie jest językiem programowania, ale szeregiem technik, które łączą istniejące technologie internetowe w celu tworzenia lepszych aplikacji internetowych.

Ulepszanie stron internetowych za pomocą Ajax

Ajax ma ogromny wachlarz zastosowań. Wśród nich jedną z najważniejszych funkcji są wywołania Ajax. Wywołania Ajax umożliwiają witrynie aktualizowanie części jej zawartości po działaniu użytkownika bez konieczności ponownego ładowania strony. W związku z tym, w przeciwieństwie do zwykłego żądania HTTP, nie musimy czekać na odpowiedź serwera, aby kontynuować interakcję ze stroną internetową.

Tradycyjnie żądania HTTP są kierowane do serwera WWW, a po ich przetworzeniu serwer zwraca zaktualizowane dane wyjściowe przy nowym ładowaniu strony. W żądaniu Ajax ta sekwencja działań odbywa się za kulisami, asynchronicznie, dzięki czemu użytkownik nie zostaje przerwany. Poprawia to interaktywność i responsywność oraz sprawia, że ​​strona jest bardziej dynamiczna.

Jak działa wywołanie Ajax?

Wywołanie Ajax rozpoczyna się od wykonania przez użytkownika końcowego akcji na interfejsie witryny (na przykład kliknięcia przycisku). Gdy ta akcja jest wykonywana, wyzwalane jest zdarzenie JavaScript, a jego detektor wywołuje funkcję.

Wewnątrz funkcji uruchamiane jest wywołanie Ajax i za pomocą XML informacje są pakowane, a żądanie wysyłane do skryptu serwera.

UWA GA: Obecnie, prawie we wszystkich przypadkach, JSON jest preferowany nad XML, ponieważ jest szybszy, łatwiejszy do czytania i programowania i nie tylko.

Wewnątrz skryptu żądanie jest przetwarzane za pomocą języka skryptowego po stronie serwera, takiego jak PHP, Java, Ruby, Python itp.

Odpowiedź jest odsyłana do klienta, a funkcja wywołania zwrotnego aktualizuje odpowiednią część treści otrzymanymi danymi.

Przyjrzyjmy się, jak to działa na przykładzie

Prosty przykład wywołania Ajax

Stwórzmy Wyszukiwarkę, która pozwoli Ci zobaczyć wyniki wyszukiwania w czasie rzeczywistym podczas przeszukiwania listy tytułów artykułów.

Będziemy używać PHP jako języka skryptowego po stronie serwera i przeprowadzimy Cię przez to z punktu widzenia użytkownika końcowego.

Krok 1: Formularz HTML

Po pierwsze, potrzebujemy pola tekstowego, które użytkownik wypełni tekstem i gdzieś, aby wyświetlić wynik. Stwórzmy więc prosty formularz HTML i element, który pokaże wyniki.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> </body> </html>

Krok 2: Funkcja JavaScript

Gdy użytkownik wprowadza tekst, chcemy zobaczyć wyniki w czasie rzeczywistym, jeśli są dostępne. Użyjemy zdarzenia JavaScript onkeyup, które uruchamia funkcję, gdy użytkownik zwolni klawisz na klawiaturze.

Funkcja będzie musiała pobrać bieżący tekst jako parametr, aby kontynuować proces.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> <script type="text/javascript"> function foundArticles(str) { } </script> </body> </html>

Wypełnijmy funkcję.

Krok 3: Prośba

Wewnątrz funkcji najpierw musimy utworzyć obiekt XMLHttpRequest w celu interakcji z serwerem, a następnie wywołać inną funkcję, która zrobi coś z wartością przekazaną w naszej funkcji foundArticles() .

W procesie opisanym powyżej, interakcja z serwerem jest realizowana za pomocą obsługi zdarzeń JavaScript XMLHttpRequest.onready statechange, która jest wywoływana w przypadku zmiany właściwości readyState . Wyjaśnijmy te kroki dalej:.

  • Właściwość readyState zwraca stan XMLHttpRequest klienta.
  • Za każdym razem, gdy zmieni się readyState , wywoływane jest zdarzenie readystatechange .
  • Właściwość onreadystatechange zawiera procedurę obsługi zdarzeń, która ma być wywołana po wyzwoleniu zdarzenia readystatechange .

Krok 4: Co zrobić z prośbą

Teraz musimy coś zrobić po zakończeniu operacji i po sprawdzeniu, jakie stany są dostępne, ustawiamy to na stan 4.

Tak więc po zakończeniu operacji tekst wewnątrz elementu HTML o identyfikatorze txtHint należy zastąpić odpowiedzią serwera. Wtedy musimy użyć właściwości responseText , która zwraca tekst otrzymany z serwera po wysłaniu żądania.

Teraz dodajmy kod wewnątrz funkcji foundArticles() , który odpowiada temu, co właśnie opisaliśmy powyżej.

 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } }

UWAGA: Musimy tutaj zaznaczyć, że renderowanie HTML w ten sposób, bez unikania go, jest złą praktyką pod względem bezpieczeństwa i robimy to tylko ze względu na ten samouczek, aby kod był jak najprostszy. Aby być bezpiecznym, nie używaj żadnego kodu podanego w tym artykule do użytku w świecie rzeczywistym!

Następnie musimy wysłać żądanie do serwera i wykorzystać zwrócone dane.

Krok 5: Dane

W tym przykładzie dane będą przechowywane w pliku PHP. Tworzymy plik data.php w tym samym folderze i dołączamy następujący kod:

 <?php // We fill in the posts array with the data to look up to $posts = array( "C Language course", "C++ course", "About Bootstrap", "Learn to write HTML", "All about SS", "CSS3 course", "JAVA course", "JavaScript tutorials", "Learn PHP", "MySQL examples", "Learn Python", "AngularJS", "Photoshop Tutorials", "C#", "ASP.NET", "SAP", "ORACLE", "Wordpress CMS for beginners", "Build your own Android app", "All about SEO", "Illustrator", "Flash", "Action Script" ); // We get the requested value from the URL and store it in a variable $req = $_REQUEST["req"]; $autocomplete = ""; // Iterate $posts if $req is not empty if ($req !== "") { $req = strtolower($req); foreach($posts as $name) { $lowname = strtolower($name); if ( strpos( $lowname , $req ) !== false ) { $autocomplete = $name; } } } // Output echo $autocomplete === "" ? "no suggestion" : $autocomplete;

Nie $req = $_REQUEST["req"]; linia. W ten sposób skrypt pobiera zapytanie z pliku custom.js , któremu niedługo się przyjrzymy.

Krok 6: Poproś o metody

Użyjemy metody open() naszego obiektu XMLHttpRequest do zainicjowania żądania oraz metody send() do wymiany danych z serwerem.

Parametry, których używamy dla metody open() to:

  • Metoda. Znaczenie metody żądania HTTP ( „GET”, „POST”, „PUT”, „DELETE” itp.).
  • Adres URL, na który ma zostać wysłane żądanie.
 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } xmlhttp.open("GET", "data.php?req=" + str, true); xmlhttp.send(); }

Jak widać, metoda open() inicjuje żądanie GET do adresu URL „data.php?req=" + str.

Adres URL będzie następnie używany przez $req = $_REQUEST[“req”]; zmienna wewnątrz pliku data.php , aby pobrać wartość.

Spójrzmy na wizualizację przykładowego żądania:

W tym momencie formularz powinien działać poprawnie. Jeśli wpiszesz, powiedzmy słowo „kurs”, wynik powinien wyglądać następująco:

„Kurs językowy C”,
„Kurs C++”,
„Kurs CSS3”,
„Kurs JAVA”.

Wniosek

To był przykład bardzo prostego przykładu żądania Ajax, które jest bardzo popularną techniką używaną podczas budowania stron internetowych. Chociaż jest to proste, miejmy nadzieję, że przybliżyliśmy Cię do zrozumienia routingu w takich żądaniach, co może pomóc w rozpoczęciu samodzielnego kodowania. W następnym artykule ponownie przyjrzymy się Ajaxowi w środowisku WordPress, więc bądźcie czujni!