Функция checkName служит для проверки данных, введенных пользователем форму. Задача функции - взять данные, решить, какому серверному скрипту эти данные отдать, вызвать другую функцию, которая сделает всю "грязную" работу с HTTP-запросами и ответами, и затем обработать ответ. Эта наша функция будет состоять из двух частей. Одна часть - берет данные из формы, а другая - обрабатывает ответ от сервера. Я объясню, зачем это сделано, чуть позднее.
Ответ обрабатывается просто - ответ, который мы получим от серверного скрипта, будет либо 1, либо 0. 1 означает, что такой "ник" уже кем-то используется. В зависимости от ответа наша функция меняет название класса сообщения об ошибке - оно либо показывается, либо прячется. Как понятно из кода, работу на сервере выполняет скрипт checkUserName.php.
Формирование HTTP-запроса и ответа
Как вы видели выше, работа с HTTP выполняется двумя функциями: loadXMLDoc и processReqChange. В первом практически ничего менять не надо, а во втором требуется кое-что поменять для работы с DOM-ом.
Как вы помните, пока успешный результат выполнения запроса не будет передан функции processReqChange, мы не можем из этой функции вернуть какое-либо значение. Из-за этого нам требуется выполнять явный вызов функции из другого места кода, чтобы воспользоваться результатом. Вот почему функция checkName разбита на две части. Таким образом, главная задача функции processReqChange состоит в том, чтобы обработать XML-ответ, полученный от сервера, и передать определенное значение из этого ответа функции checkName.
Мы не хотим вносить в эти функции какой-либо специфический код, так как эти функции могут использоваться и другими элементами страницы для обращения к серверу. Поэтому мы и не вписывали в функцию processReqChange имя функции checkName. Вместо этого мы решили, что сервер сам будет в своем ответе давать название функции, которая к нему обращалась.
Разбор этого простого ответа выполняется без каких-либо проблем.
function processReqChange() { // only if req shows complete if (req.readyState == 4) { // only if OK if (req.status == 200) { // ...processing statements go here... response = req.responseXML.documentElement;
result = response.getElementsByTagName(result) \ [0].firstChild.data;
eval(method + (, result)); } else { alert(There was a problem retrieving \ the XML data:n + req.statusText); } } }
Обратившись к свойству responseXML объекта XMLHttpRequest, мы получаем XML-ответ, пришедший от сервера, который мы затем разбираем с помощью DOM. Взяв из ответа название функции, которая требовала этот ответ, мы знаем, какой функции надо передать полученное значение. После того, как вы закончите тестирование, уберите условие else, чтобы скрипт не беспокоил пользователей лишним сообщением об ошибке.
Серверный скрипт
Последний элемент нашей мозаики - это серверный скрипт, который будет получать запрос, обрабатывать его и возвращать ответ в виде XML. В нашем примере скрипт будет обращаться к базе данных пользователей, чтобы определить, используется ли уже данный "ник" или нет. Для краткости в моем примере скрипт не использует базу данных, а просто проверяет два имени "Drew" и "Fred".
<?php header(Content-Type: text/xml);
function nameInUse($q) { if (isset($q)){ switch(strtolower($q)) { case drew : return 1; break; case fred : return 1; break; default: return 0; } }else{ return 0; }
Разумеется, ту же процедуру проверки надо предусмотреть и в том серверном скрипте, который будет выполняться, когда пользователь нажмет кнопку "Submit" на форме регистрации. Это на тот случай, если у него в браузере был отключен JavaScript, или пользователь намеренно ввел "ник", который уже используется. Кроме того на загруженных сайтах может так случиться, что во время выбора "ника" он был свободен, а на момент подачи его уже кто-то занял.
В качестве следующего шага расширьте сами функциональность скрипта. Например сервер может возвращать варианты альтернативных "ников" на основе "ника", выбранного пользователем, но уже занятого.
В заключение
Этот небольшой пример лишь слегка касается темы использования объекта XMLHttpRequest. Вот лишь некоторые примеры его использования: Google Suggest(http://www.google.com/webhp?complete=1), где XMLHttpRequest используется для того, чтобы подсказать искомые слова, приложение Ta-da Lists(http://www.tadalists.com/), где данные подаются на сервере опять-таки с помощью XMLHttpRequest благодаря чему интерфейс работает очень быстро. Самое интересное здесь не том, чтобы заставить код работать, а в том, чтобы найти еще какие-либо интересные способы его использования.
Drew McLellan
Drew is a web application developer and technical author from just West of London, UK. A keen standards advocate, Drew helps out at the Web Standards Project in addition to maintaining a personal web site at allinthehead.com. When he grows up, hed like to be a helicopter pilot.
От редакции
1) Несколько примеров приложений и веб-сайтов, использующих объект XMLHttpRequest:
Google Suggest (http://www.google.com/webhp?complete=1) - быстрый вывод вариантов запроса Карта Швейцарии (http://map.search.ch/) - быстрая подгрузка карт в фоне Live Google results (http://hq.servequake.com/google/search.php) - выдача результатов поиска с Google без перезагрузки страницы (используется еще и Google API) Live Search (http://www.creatimation.net/journal/live-request) - поиск по сайту с моментальной выдачей результата 2) XMLHttpRequest следует следующему правилу безопасности - он может отправить запрос только на сайт, с которого пришла страница, и получить ответ только с этого же сайта.
