Żądania AJAX z PHP

Żądanie AJAX

W poniższym przykładzie AJAX pokażemy, jak strona internetowa komunikuje się z serwerem internetowym, gdy użytkownik wprowadza dane do formularza webowego.

Wprowadź nazwę w poniższym polu tekstowym:

Sugestie:

Ten przykład obejmuje trzy strony:

  • Prosty formularz HTML
  • Fragment JavaScript
  • Strona PHP

Formularz HTML

To jest formularz HTML. Zawiera prosty formularz HTML i link do JavaScript:

<html>
<head>
<script src="clienthint.js"></script> 
</head>
<body>
<form> 
Imię:
<input type="text" id="txt1"
onkeyup="showHint(this.value)"
</form>
<p>Sugestie: <span id="txtHint"></span></p>
</body>
</html>

Przykład wyjaśniający - formularz HTML

Jak widać, powyższa strona HTML zawiera prosty formularz HTML z polem wejściowym o nazwie "txt1".

Działanie tego formularza jest następujące:

  1. Gdy użytkownik naciska i puuszcza klawisz w polu wprowadzania, jest wywoływane zdarzenie
  2. Gdy zdarzenie to jest wywoływane, wykonywana jest funkcja o nazwie showHint()
  3. Poniżej formularza znajduje się <span> o nazwie "txtHint". Służy jako占位符 dla danych zwróconych przez funkcję showHint().

JavaScript

Kod JavaScript przechowywany w pliku "clienthint.js" jest dołączony do dokumentu HTML:

var xmlHttp
function showHint(str)
{
jeśli (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Przeglądarka nie obsługuje żądań HTTP")
  return
  } 
var url="gethint.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

Przykład wyjaśnienia:

Funkcja showHint()

Każdy razy, gdy wprowadzany jest znak w polu wejściowym, funkcja jest wywoływana raz

Jeśli pole tekstowe zawiera zawartość (str.length > 0), funkcja działa w ten sposób:

  1. Definiowanie URL (nazwy pliku) do wysłania na serwer
  2. Dodanie parametrów z zawartością pola wejściowego (q) do tego URL
  3. Dodanie losowej liczby, aby zapobiec użyciu pliku pamięci podręcznej przez serwer
  4. Wywołanie funkcji GetXmlHttpObject do utworzenia obiektu XMLHTTP i powiadomienie go, aby wykonał funkcję o nazwie stateChanged, gdy zostanie wywołany event
  5. Otwieranie tego obiektu XMLHTTP za pomocą podanego URL
  6. Wysyłanie żądania HTTP do serwera

Jeśli pole wejściowe jest puste, funkcja po prostu czyści zawartość pola txtHint.

Funkcja stateChanged()

Każda zmiana stanu obiektu XMLHTTP powoduje wykonanie tej funkcji.

Gdy stan zmieni się na 4 (lub "complete"), wypełnia pole txtHint treścią odpowiedzi.

Funkcja GetXmlHttpObject()

Aplikacje AJAX mogą działać tylko w pełni obsługiwanym przeglądarce web XML.

Powyższy kod wywołuje funkcję o nazwie GetXmlHttpObject().

Funkcja ta ma na celu rozwiązanie problemu tworzenia różnych obiektów XMLHTTP dla różnych przeglądarek.

To zostało wyjaśnione w poprzednim rozdziale.

Strona PHP

Strona serwerowa wywoływana przez kod JavaScript to prosty strona serwerowa o nazwie "gethint.php".

"gethint.php" zawiera kod, który sprawdza tablicę nazw i zwraca odpowiednią nazwę do klienta:

<?php
//wypełnienie tablicy nazw
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//pobieranie parametru q z adresu URL
$q=$_GET["q"];
//wyszukiwanie wszystkich wskazówek z tablicy, jeśli długość q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
  {
  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
    if ($hint=="")
      {
      $hint=$a[$i];
      }
    else
      {
      $hint=$hint." , ".$a[$i];
      }
    }
  }
}
//ustaw wyjście na "brak sugestii", jeśli nie znaleziono wskazówki
//ustaw wyjście na "brak sugestii", jeśli nie znaleziono wskazówki
if ($hint == "")
{
$response="brak sugestii";
}
else
{
$response=$hint;
}
//wyświetl odpowiedź
echo $response;
?>

Jeśli istnieje tekst przysyłany z JavaScript (strlen($q) > 0), to:

  1. Znajdź nazwy pasujące do przesyłanych znaków JavaScript
  2. Jeśli znajdziesz wiele nazw, zawrzyj wszystkie nazwy w ciągu odpowiedzi
  3. Jeśli nie znajdziesz pasujących nazw, ustaw odpowiedź na "brak sugestii"
  4. Jeśli znajdziesz jedną lub kilka nazw, ustaw odpowiedź na te nazwy
  5. Wyślij odpowiedź do "txtHint"