НОУ ИНТУИТ | Web-технологии. Лекция 17: Реализация асинхронного взаимодействия веб-браузера с веб-сервером с помощью технологии AJAX

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Твой путь к знаниям!

Воронежский государственный университет

Опубликован: 04.02.2009 | Доступ: свободный | Студентов: 8253 / 690 | Оценка: 4.14 / 3.78 | Длительность: 19:54:00

Темы: Интернет-технологии, Сетевые технологии, Программирование

Специальности: Разработчик интернет-проектов

Теги: .net, ajax, arpanet, asp, datalist, html, microsoft word, php, rss, ruby, SAX, timetable, UDDI, wap, XDR, xml, xmlhttprequest, браузеры, интерфейсы, квантификатор, приложения, протоколы, серверы, элементы

|

Вам нравится? Нравится 136 студентам

| Поделиться |

Поддержать курс

| Скачать электронную книгу

Аннотация: Цель работы: ознакомление с принципами асинхронного взаимодействия между веб-клиентом и веб-сервером в рамках технологии AJAX.

Ключевые слова: AJAX, asynchronous, AND, XML, сценарий, XMLHttpRequest, обмен данными, HTTP, поле, сервер, список, объект, пользователь, кеширование, PHP

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. Реализация клиентской части.

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

Создайте следующую веб-страницу:

<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().

В файле 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:

Дальше >>

Авторизоваться

Web-технологии

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

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

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

Вопросы и ответы