Lekcja, w której przyjrzymy się tworzeniu prostych asynchronicznych żądań AJAX do serwera na przykładach. Jako metodę transmisji żądania użyjemy zarówno metody GET, jak i POST. Na serwerze będziemy przetwarzać żądania za pomocą skryptów PHP.

Co to jest asynchroniczne żądanie AJAX?

Technologia AJAX jest wykorzystywana głównie do tworzenia asynchronicznych żądań do serwera. Żądanie asynchroniczne to takie, które działa w tle i nie zakłóca interakcji użytkownika ze stroną.

Podczas wysyłania żądania asynchronicznego przeglądarka (strona) nie „zawiesza się”, tj. możesz z nim pracować jak poprzednio. Ale skąd wiesz, kiedy nadejdzie odpowiedź z serwera? Aby to ustalić, należy monitorować właściwość ReadyState przeglądarki. Ta właściwość zawiera liczbę, której wartość można wykorzystać do określenia, na jakim etapie znajduje się żądanie. Poniższa tabela przedstawia główne wartości właściwości ReadyState i odpowiadające im stany.

Te. Okazuje się, że musimy śledzić, kiedy wartość właściwości ReadyState jest równa 4. Będzie to oznaczać, że wysłane żądanie otrzymało odpowiedź z serwera. Pozostałe wartości są stosowane w praktyce dość rzadko i niektóre przeglądarki mogą ich nie obsługiwać.

Aby określić, na jakim etapie znajduje się żądanie, należy skorzystać ze zdarzenia onreadystatechange obiektu XMLHttpRequest. To zdarzenie występuje za każdym razem, gdy zmienia się wartość właściwości ReadyState. Dlatego w procedurze obsługi tego zdarzenia (funkcji nienazwanej lub nazwanej) można napisać akcje, które sprawdzą, czy ta właściwość jest równa 4 i jeśli jest równa, to np. wyświetlą na stronie odpowiedź serwera.

Tworzenie asynchronicznego żądania AJAX (metoda GET)

Przyjrzyjmy się tworzeniu asynchronicznego żądania AJAX na przykładzie, które przywita użytkownika po załadowaniu strony i wyświetli jego adres IP.

Aby to zrobić musisz utworzyć na serwerze 2 pliki w jednym katalogu:

Welcome.html – strona HTML, która wyświetli się użytkownikowi. Na tej samej stronie umieścimy skrypt, który wykona wszystkie niezbędne działania, aby AJAX mógł działać po stronie klienta.

przetwarzanie.php – plik PHP, który przetworzy żądanie po stronie serwera i wygeneruje odpowiedź. Rozpocznijmy rozwój od stworzenia podstawowej struktury pliku powitalnego.html

Przykład pracy AJAX Przykład pracy AJAX // Tutaj umieścimy kod JavaScript, który wyśle ​​żądanie do serwera, odbierze je i zaktualizuje zawartość strony. Wszystko to będzie działać bez konieczności ponownego ładowania strony

Przyjrzyjmy się kolejności działań, które należy wykonać po stronie klienta (w kodzie JavaScript):

Przygotujmy dane niezbędne do wykonania żądania na serwerze. Jeżeli do realizacji żądania na serwerze nie są potrzebne żadne dane, wówczas ten krok można pominąć.

Stwórzmy zmienną, która będzie zawierać instancję obiektu XHR (XMLHttpRequest).

Skonfigurujmy żądanie za pomocą metody open().

Określane są następujące parametry:

• Sposób, w jaki żądanie zostanie wysłane do serwera (GET, POST).
• Adres URL, który będzie przetwarzał żądanie na serwerze.
• Typ żądania: synchroniczny (fałsz) lub asynchroniczny (true).
• Nazwa użytkownika i hasło, jeśli jest wymagane.

Zasubskrybujmy zdarzenie onreadystatechange obiektu XHR i określmy procedurę obsługi jako funkcję anonimową lub nazwaną. Następnie utworzymy wewnątrz tej funkcji kod, który sprawdzi status odpowiedzi i wykona określone akcje na stronie. Odpowiedź przychodząca z serwera znajduje się zawsze we właściwości respondText.

Oprócz sprawdzenia wartości właściwości ReadyState numer 4, można także sprawdzić wartość właściwości status. Ta właściwość określa stan żądania. Jeśli jest równe 200, wszystko jest w porządku. W przeciwnym razie wystąpił błąd (na przykład 404 – nie znaleziono adresu URL).

Wyślijmy żądanie do serwera za pomocą metody send().

Jeśli do wysłania żądania wykorzystamy metodę GET, to nie ma potrzeby przekazywania danych do parametru tej metody. Są wysyłane jako część adresu URL.

Jeśli do wysłania żądania użyjemy metody POST, wówczas dane należy przekazać jako parametr do metody send(). Ponadto przed wywołaniem tej metody należy ustawić nagłówek Content-Type, aby serwer wiedział, w jakim kodowaniu przyszło do niego żądanie i mógł je odszyfrować.

Zawartość elementu skryptu:

// 2. Tworzenie zmiennej żądania var request = new XMLHttpRequest(); // 3. Konfiguracja żądania request.open("GET","processing.php",true); // 4. Zasubskrybuj zdarzenie onreadystatechange i przetwórz je za pomocą anonimowej funkcji request.addEventListener("readystatechange",function() ( // jeśli stan żądania wynosi 4, a status żądania to 200 (OK) if ((request. ReadyState==4) && (request.status==200)) ( // na przykład wyślij obiekt XHR do konsoli przeglądarki console.log(request); // i odpowiedź (tekst) przychodzącą z serwera w okno alertu console.log(request.responseText) ; // pobierz element o id = powitanie var powitanie = document.getElementById("welcome"); // zamień zawartość elementu na odpowiedź otrzymaną z serwera powitalnego .innerHTML = request.responseText; ) )); // 5. Wysłanie żądania do serwera request.send();

W rezultacie plik powitalny.html będzie zawierał następujący kod:

Przykład działania AJAX Przykład działania AJAX window.addEventListener("load",function() ( var request = new XMLHttpRequest(); request.open("GET","processing.php",true); request.addEventListener(" Readystatechange" , funkcja() ( if ((request.readyState==4) && (request.status==200)) ( var Welcome = document.getElementById("welcome"); Welcome.innerHTML = request.responseText; ) ) ); żądanie.wyślij(); ));

Na serwerze (przy użyciu php):

Zdobądźmy dane. Jeżeli dane przesyłane są metodą GET to z tablicy globalnej $_GET["name"] . A jeśli dane przesyłane są metodą POST, to z tablicy globalnej $_POST["name"] .

Korzystając z tych danych wykonamy pewne działania na serwerze. W efekcie otrzymujemy jakąś odpowiedź. Wyświetlmy to za pomocą echo .