УРОКИ JAVASCRIPT HTML DOM DHTML AJAX ПРИМЕРЫ JAVASCRIPT

AJAX PHP Пример


« Назад Далее »

AJAX используется для создания более интерактивных приложений.


AJAX PHP Пример

Следующий пример продемонстрирует, как веб страница может взаимодействовать с веб сервером, когда пользователь вводит символы в поле ввода:

Пример

Начните вводить имя в поле ввода ниже (с большой буквы):

Имя:

Предложения:


Попробуйте сами »


Объяснения примера - Функция showHint()

Когда пользователь печатает очередной символ в поле ввода выше, выполняется функция "showHint()". Функция вызывается благодаря возникновению события "onkeyup":

function showHint(str)
{
var xmlhttp;
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// код для IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// код для IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}

Пояснение исходного кода:

Если поле ввода является пустым (str.length==0), функция очищает содержимое контейнера txtHint (места вставки предложений) и завершает выполнение.

Если поле ввода не является пустым, функция showHint() осуществляет следующие действия:

  • Создает объект XMLHttpRequest
  • Создает функцию, которая будет выполнена, когда будет получен ответ с сервера
  • Посылает запрос на сервер, в качестве адресата запроса выступает файл с серверным php-скриптом
  • Обратите внимание, что параметр (q) добавляется к адресу URL (и содержит текст, введенный в поле ввода)

Серверная страница AJAX - на PHP

Страница на сервере, к которой обращается функция JavaScript выше, является PHP файлом с именем "gethint.php".

Ниже представлено два варианте серверного скрипта - на PHP и на ASP.


Файл PHP

Ниже представлен код на языке PHP.

<?php
// Заполнить массив именами
$a[]="Аня";
$a[]="Алена";
$a[]="Александр";
$a[]="Алексей";
$a[]="Артем";
$a[]="Борис";
$a[]="Василий";
$a[]="Григорий";
$a[]="Геннадий";
$a[]="Дмитрий";
$a[]="Елена";
$a[]="Жанна";
$a[]="Зинаида";
$a[]="Илья";
$a[]="Иннокентий";
$a[]="Кирилл";
$a[]="Константин";
$a[]="Лера";
$a[]="Мария";
$a[]="Николай";
$a[]="Оксана";
$a[]="Петр";
$a[]="Равиль";
$a[]="Радик";
$a[]="Сергей";
$a[]="Савва";
$a[]="Тамара";
$a[]="Тамила";
$a[]="Таисия";
$a[]="Ульяна";

//получить параметр q из адресной строки
$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];
        }
      }
    }
  }

// Установить ответ в "нет вариантов" если не было найдено ни одного предложения,
// либо вывести подходящие подсказки
if ($hint == "")
  {
  $response="no suggestion";
  }
else
  {
  $response=$hint;
  }

//вывод ответа
echo $response;
?>

Файл ASP

Исходный код "gethint.asp" проверяет массив имен и возвращает подходящие имена браузеру:

<%
response.expires=-1
dim a(30)
'Заполнение массива именами
a(1)="Аня";
a(2)="Алена";
a(3)="Александр";
a(4)="Алексей";
a(5)="Артем";
a(6)="Борис";
a(7)="Василий";
a(8)="Григорий";
a(9)="Геннадий";
a(10)="Дмитрий";
a(11)="Елена";
a(12)="Жанна";
a(13)="Зинаида";
a(14)="Илья";
a(15)="Иннокентий";
a(16)="Кирилл";
a(17)="Константин";
a(18)="Лера";
a(19)="Мария";
a(20)="Николай";
a(21)="Оксана";
a(22)="Петр";
a(23)="Равиль";
a(24)="Радик";
a(25)="Сергей";
a(26)="Савва";
a(27)="Тамара";
a(28)="Тамила";
a(29)="Таисия";
a(30)="Ульяна";

'получение параметра q из адресной строки URL
q=ucase(request.querystring("q"))

'поиск подсказок из массива, если длина q>0
if len(q)>0 then
  hint=""
  for i=1 to 30
    if q=ucase(mid(a(i),1,len(q))) then
      if hint="" then
        hint=a(i)
      else
        hint=hint & " , " & a(i)
      end if
    end if
  next
end if

'Вывод "нет вариантов" если не было найдено подходящего предложения
'или вывод значений-подсказок
if hint="" then
  response.write("нет вариантов")
else
  response.write(hint)
end if
%>






« Назад Далее »
© 2011-2019 Уроки JavaScript