Спонсор: Microsoft
Опубликован: 04.02.2009 | Уровень: специалист | Доступ: платный | ВУЗ: Воронежский государственный университет
Самостоятельная работа 17:

Реализация асинхронного взаимодействия веб-браузера с веб-сервером с помощью технологии AJAX

< Лекция 16 || Самостоятельная работа 17 || Самостоятельная работа 18 >
Аннотация: Цель работы: ознакомление с принципами асинхронного взаимодействия между веб-клиентом и веб-сервером в рамках технологии AJAX.

AJAX = Asynchronous JavaScript and XML.

AJAX – не является новым языком программирования, но технология создания улучшенных, более быстрых и в большей степени интерактивных веб-приложений.

JavaScript сценарий посредством AJAX может непосредственно взаимодействовать с сервером с помощью объекта XMLHttpRequest. Использование данного объекта обмен данными с веб-сервером могут происходить без перезагрузки страницы.

AJAX позволяет веб-страницам запрашивать небольшие объемы информации с сервера нежели целиком всю страницу в результате асинхронной передачи данных (в рамках HTTP протокола) между браузером и сервером.

AJAX не зависит от программного обеспечения веб-сервера и основан на следующих веб-стандартах:

  • JavaScript
  • XML
  • HTML
  • CSS

Поскольку эти веб-стандарты четко определены и имеют поддержку в наиболее распространенных веб-браузерах, то AJAX приложения являются браузеро- и платформо-независимыми.

Популярность AJAX связана с появлением сервиса Google Suggest в 2005 году. Данный сервис на основе объекта XMLHttpRequest предоставляет в распоряжение пользователя достаточно динамический веб-интерфейс. В процессе ввода символов пользователем в поле поискового запроса JavaScript отправляет их на сервер и получает от него список подсказок.

Объект XMLHttpRequest поддерживается в Internet Explorer (начиная 5 версии и выше), Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+ и Netscape 7.

Порядок выполнения лабораторной работы

В данной лабораторной работе рассматривается пример системы, имитирующей работу сервиса Google Suggest на основе AJAX.

1. Реализация клиентской части.

Предполагается, что пользователь может вводить в текстовое поле формы название автомобильной марки, получая при этом динамически список вариантов названий, соответствующих уже введенным символам, без перезагрузки страницы.

  1. Создайте следующую веб-страницу:
    <html>
    <head>
      <script src="chint.js"></script> 
        </head>
          <body>
            <form> 
              First Name:
             <input type="text" id="txt1" onkeyup="showHint(this.value)">
           </form>
           <p>Suggestions: <span id="txtHint"></span></p> 
         </body>
    </html>

    Как видно из кода, при наступлении события onkeyup (отжатие клавиши) вызывается обработчик showHint().

  2. В файле chint.js сохраните следующий код обработчика

    Код обработчика загружается из файла chint.js:

    var xmlHttp;
    function showHint(str)
    {
    if (str.length==0)
      { 
      document.getElementById("txtHint").innerHTML="";
      return;
      }
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
      {
      alert ("Your browser does not support AJAX!");
      return;
      } 
    var url = "ghint.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)
    { 
    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;
    }
    33.1.

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

    • Формируется url для отправки веб-серверу
    • Добавляется значение параметра q, равное содержимому текстового поля, к url
    • Добавляется к url случайное число для предотвращения кеширования
    • Создается объект XMLHTTP, при этом указывается функция ( stateChanged ) подлежащая исполнению при наступлении события ввода символа
    • Открывается объект XMLHTTP с указанным значением url
    • Отправляется HTTP запрос веб-серверу

    Если поле ввода пустое, происходит очистка содержимого раздела txtHint на веб-странице.

    Ключевым моментом в данной системе является использование объекта XMLHttpRequest.

    Данный объект по-разному создается в различных браузерах. Так, Internet Explorer для этого использует ActiveXObject, в то время как остальные браузеры используют встроенный в JavaScript объект XMLHttpRequest.

    Для поддержки работы системы в разных браузерах использован оператор " try-catch ".

    • Сначала делается попытка создать объект XMLHttpRequest для браузеров Firefox, Opera или Safari:
      xmlHttp = new XMLHttpRequest().
    • В случае неудачи, делается следующая попытка создания объекта для Internet Explorer 6.0 + :
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP").
    • Если это также не удается, то делается попытка создания объекта уже для Internet Explorer 5.5 + :
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP").
    • В случае, если ни одна из этих попыток не принесла успеха, выдается сообщение об отсутствии поддержки AJAX браузером.

2. Реализация серверной части.

Разместите на веб-сервере в файле с именем ghint.php следующий PHP сценарий::

<?php
header("Cache-Control: no-cache, must-revalidate");
 // Прошедшая дата
header("Expires: Mon, 1 Sep 2008 07:30:00 GMT");
// Инициализация массива названий
$a[]="Audi";
$a[]="BMW";
$a[]="Buick";
$a[]="Chevrolet";
$a[]="Citroen";
$a[]="Dodge";
$a[]="Ferrari";
$a[]="Fiat";
$a[]="Ford";
$a[]="Honda";
$a[]="Hyundai";
$a[]="Cherokee";
$a[]="Cherry";
$a[]="Lada";
$a[]="Lamborghini";
$a[]="Lincoln";
$a[]="Mazda";
$a[]="Mercedes";
$a[]="Mitsubishi";
$a[]="Nissan";
$a[]="Opel";
$a[]="Peugeot";
$a[]="Plymoth";
$a[]="Pontiac";
$a[]="Renault";
$a[]="Rover";
$a[]="Saab";
$a[]="Subaru";
$a[]="Suzuki";
$a[]="Toyota";
$a[]="Volkswagen";
$a[]="Volvo";
//получение параметра 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];
      }
    }
  }
}
// Возврат строки "нет вариантов" если соответствий не найдено
// либо найденное соответствие
if ($hint == "")
{
$response = "no suggestion";
}
else
{
$response = $hint;
}
//вывод результата
echo $response;
?>
33.2.

3. Проверка работоспособности системы.

Проверьте с помощью подходящего веб-браузера работу системы.

На скриншоте показана работа в браузере с веб-страницей ghint.html, использующей AJAX:


Контрольное задание

С использованием PHP-сценария №7 из лабораторной работы 10 разработайте модифицированный вариант калькулятора для четырех арифметических операций, в котором происходит асинхронная передачи данных между браузером и сервером (с помощью AJAX).

На скриншоте выше показана работа в браузере с веб-страницей ghint.html, использующей AJAX:

< Лекция 16 || Самостоятельная работа 17 || Самостоятельная работа 18 >
Михаил Олифиренко
Михаил Олифиренко
Александр Табачук
Александр Табачук

Это только у меня не работает кнопочка "Получить код DreamSpark"? Пишет "временно не доступно..." А когда заработает?

Илья Гончаров
Илья Гончаров
Россия, Воронеж, Воронежский государственный университет, 2004
Андрей Галушко
Андрей Галушко
Украина, Конотоп, КИПТ