Лабораторная работа 9 Основы построения ajax приложений.
Цель
Познакомиться с объектом XmlHttpRequest, научится создавать и использовать данный объект для реализации асинхронных запросов к серверу.
Выполнение
Подготовка к выполнению
На web-сервере создайте отдельный каталог для выполнения лабораторных работ, связанных с технологией AJAX, например /usr/local/www/apache24/data/ajax (для простоты в дальнейшем будем его называть «каталог_AJAX»). Используя ftp-клиент, скопируйте каталог lb09 из предоставленного преподавателем архива «файлы-задания» в «каталог_AJAX».
В процессе выполнения лабораторной работы необходимо создать функцию, которая вызывает серверный скрипт в асинхронном режиме. Серверный скрипт (getbooktxt.php) выполняет поиск книги по ее порядковому номеру (номеру строки).
В среде разработке NetBeans создайте проект для данной лабораторной работы с возможностью удаленной отладки.
Откройте файл index.html.
В секции java-скрипта найдите комментарий
/*
** Задание 1: Напишите функцию создания объекта XmlHttpRequest
** function getXmlHttpRequest()
*/
После этого комментария поместите функцию getXmlHttpRequest(), которая возвращает объект XmlHttpRequest (предусмотрите выполнение данного кода в браузерах не последних версий).
Временно, для проверки работоспособности, определите вызов созданной функции при нажатии на кнопку «Поиск» на странице.
Установите «точку останова» на первой строке созданной функции getXmlHttpRequest() и запустите проект на выполнение, нажав F6. Обратите внимание, что в свойствах данного проекта должен быть установлен браузер Chrome с NetBeans Connector.
Пошагово выполните функцию и в процессе изучите структуру полученного объекта XmlHttpRequest, это можно сделать на вкладке «Переменные» в нижней части среды NetBeans.
В секции java-скрипта найдите комментарий
/*
** Задание 2: Напишите Функцию (функции) запроса к серверу (скрипт-сервер - getbooktxt.php),
** которая АСИНХРОННО запрашивает нужную книгу по номеру (getbooktxt.php?num=1)
** и выводит строку с названием этой книги в элемент divResult HTML страницы
** function getBookByNumber(number)
*/
После этого комментария реализуйте функцию getBookByNumber(number) которая АСИНХРОННО запрашивает нужную книгу по номеру и выводит строку с названием этой книги в элемент divResult HTML страницы.
Функция должна сформировать запрос к серверу по адресу http:// www.server_freebsd.mycompany.ru/ajax/lb09/getbooktxt.php и передать методом GET параметр num со значением номера книги в списке, например
http://www.server_freebsd.mycompany.ru/ajax/lb09/getbooktxt.php?num=1
Проверьте работоспособность созданной функции и выполните ее пошагово аналогично предыдущей. В качестве параметра передайте конкретный номер книги, например, getBookByNumber(2).
Полученный от сервера результат выведите в элемент divResult
<div id="divResult"> </div>
В секции java-скрипта найдите комментарий
/*
** Задание 3: Напишите код обработчика нажатия на кнопку
** Эта функция должна прочитать введенное значение в поле txtNum
** и вызвать функцию getBookByNumber(value)
** function showBook()
*/
После этого комментария напишите функцию showBook(), которая обращается к элементу HTML <input id="txtNum" type="text" />, считывает введенный номер и вызывает функцию getBookByNumber(bookNum), чтобы показать информацию о книге.
Проверьте работоспособность реализованного кода в нескольких браузерах.
Изучим возможности «связки» NetBeans и XDebug с точки зрения отладки PHP скриптов, выполняемых в рамках асинхронных AJAX-запросов.
Для того, что бы иметь возможность выполнять пошагово отладку сценариев, вызываемых с помощь AJAX-запросов необходимо выполнить настройку двух моментов:
- обеспечить выполнение этого скрипта в рамках сессии отладки netbeans-xdebug и соответственно получение реакции на установленные точки останова;
- сопоставить (настроить «отображение») расположение каталога локальных файлов проекта в Netbeans и расположения файлов на удаленном сервере
Заставить скрип выполняться в рамках отладочной сессии можно несколькими способами.
Рассмотрим первый способ. Достаточно в URL ajax-запроса добавить следующий параметр XDEBUG_SESSION_START=netbeans-xdebug. В этом случае будет выполнять примерно следующий запрос
http://192.168.180.2/ajax/lb09/getbooktxt.php?XDEBUG_SESSION_START=netbeans-xdebug&num=2
Недостатком такого подхода является необходимость вносить «временные» (на период отладки) изменения в проект.
Второй способ заключается в установки дополнительного расширения для браузера Chrome Xdebug helper и его минимальной настройки. Необходимо следить за тем, что бы «жучок» в правой части строки запроса в браузере был зеленого цвета.
На следующей картинке показан такой «зависший» ajax-запрос.
Для выполнения второго требования пункта 18 необходимо в свойствах проекта, в разделе «Выполнить настройку» нажать на кнопку «Дополнительно» и настроить отображение серверного каталога и локального каталога проекта (см. рисунок ниже).
Выполните самостоятельно пошаговую отладку скрипта getbooktxt.php.