Запросы AJAX с PHP

Запрос AJAX

В следующем примере AJAX мы покажем, как веб-страница взаимодействует с онлайн-веб-сервером, когда пользователь вводит данные в веб-форму.

Введите имя в следующем текстовом поле:

Рекомендации:

Этот пример включает три страницы:

  • Простая HTML форма
  • Отрезок JavaScript
  • PHP страница

HTML форма

Это HTML форма. Она содержит простую HTML форму и ссылку на JavaScript:

<html>
<head>
<script src="clienthint.js"></script> 
</head>
<body>
<form> 
Имя:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Рекомендации: <span id="txtHint"></span></p>
</body>
</html>

Пример объяснение - HTML форма

Как вы видите,上面的 HTML страница содержит простую HTML форму с полем ввода под именем "txt1".

Таким образом работает эта форма:

  1. Когда пользователь нажимает и отпускает клавишу в поле ввода, срабатывает событие
  2. Когда событие срабатывает, выполняется функция с именем showHint()
  3. Под формой находится <span> с именем "txtHint". Он используется в качестве占位щика данных, возвращаемых функцией showHint().

JavaScript

JavaScript код хранится в файле "clienthint.js", который связан с HTML документом:

var xmlHttp
function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Браузер не поддерживает 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;
}

Пример объяснения:

Функция showHint()

Функция вызывается каждый раз при вводе символа в поле ввода.

Если в текстовом поле есть содержимое (str.length > 0), функция выполняется следующим образом:

  1. Определение URL (имени файла), который нужно отправить на сервер
  2. Добавление параметра (q) с содержимым поля ввода к этому URL
  3. Добавление случайного числа, чтобы предотвратить использование сервером файла кэша
  4. Вызов функции GetXmlHttpObject для создания объекта XMLHTTP и уведомление объекта выполнять функцию stateChanged при возникновении события
  5. Открываем этот объект XMLHTTP с помощью заданного URL
  6. Отправка HTTP-запроса на сервер

Если поле ввода пусто, функция просто очищает содержимое占位щика txtHint.

Функция stateChanged()

Когда состояние объекта XMLHTTP изменяется, выполняется эта функция.

Когда состояние становится 4 (или "complete"), содержимое txtHint будет заполнено текстом ответа.

Функция GetXmlHttpObject()

АPPlications AJAX могут работать только в полных поддерживающих XML веб-браузерах.

Верхний код вызывает функцию GetXmlHttpObject().

Эта функция предназначена для решения проблемы создания различных объектов XMLHTTP для различных браузеров.

Это уже было объяснено в предыдущем разделе.

PHP страница

Страница сервера, вызываемая JavaScript-кодом, это простая страница сервера с именем "gethint.php".

"gethint.php" код будет проверять массив имен и затем возвращать соответствующие имена клиенту:

<?php
//заполнить массив имен
$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";
//получить параметр q из URL
$q=$_GET["q"];
//искать все подсказки из массива, если длина 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];
      }
    }
  }
}
//Установите выход на "no suggestion", если не найден подсказка
//или к правильным значениям
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//вывести ответ
echo $response;
?>

Если существует текст, переданный JavaScript (strlen($q) > 0), то:

  1. Найти имена, соответствующие переданным символам JavaScript
  2. Если найти несколько имен, включите все имена в строке response
  3. Если не найти соответствующие имена, установите response на "no suggestion"
  4. Если найти одно или несколько имен, установите response на эти имена
  5. Отправьте response на "txtHint"