Главная страница статей --> Хитрости при программировании php, заметки по базам данных

AJA - AJAX без XML

Источник: realcoding.net

Для начала рассмотрим самый общий вариант использования AJAX. Итак, с помощью JavaScript делается асинхронный HTTP-запрос на сервер без перезагрузки всей страницы. Результатом выполнения запроса является XML-документ, который затем обрабатывается на клиенте средствами DOM с помощью все того же JavaScript. Сразу становится очевидной одна из проблем технологии: малый процент переиспользования кода. Смотрите сами: на другой странице сервер вернет совсем другие данные, имеющие свою структуру. Следовательно, код, который нужно написать на клиенте для обработки этих данных, будет зависеть от самих данных (в частности, от их структуры). Все это увеличивает стоимость разработки и создает проблемы при поддержке и кастомизации. Решается эта проблема путем создания более сложного обработчика на клиенте, что, в свою очередь, накладывает свои ограничения на структуру данных.

Если решается не очень сложная задача, то есть возможность избежать сложной обработки данных на клиенте. В ответ на запрос, сервер может передать не данные в XML, а уже готовое HTML-представление, которое затем просто вставляется в нужное место на странице. Конечно, с точки зрения архитектуры, это не блестящее решение, но, для простых задач вполне приемлемое. Далее будет рассматриваться пример такой простой задачи и ее решения. В этом примере сервер будет возвращать всего одну текстовую строку.

Пример: Угадай число


Я бы мог выбрать для примера какую-нибудь полезную задачу, но это очень неинтересно. Так что будем реализовывать простейшую игру "Угадай число". Для тех, кто не с этой планеты, напоминаю правила. Один из игроков загадывает число в пределах от 1 до 100. Второй пытается угадать это число, делая свои предположения. В ответ первый игрок сообщает об отношении задуманного и предполагаемого чисел: больше или меньше. В принципе, еще нужно считать количество попыток, за которые было угадано число, но мы этим заниматься не будем.

Протокол обмена данными в процессе игры будет очень простым. Клиент будет выполнять на сервер HTTP-запрос GET с параметрами. Возможные значения параметров и действия сервера приведены в таблице:

http://img204.imageshack.us/img204/8271/20ul.gif

Реализация


Те, кому не терпится посмотреть на результат, могут поиграть с сервером в описанную выше игру. Ну а те, кому нужны объяснения, пусть читают дальше.

На серверной части особо останавливаться не буду, так как ее реализация зависит от платформы web-приложения. Я ее реализовал в виде Java Servletа: GuessSerlvlet.java. Единственное, на чем стоит заострить внимание, это то, что серверная часть выводит данные в кодировке UTF-8. У меня возникали проблемы с получением данных на клиенте, если их кодировка отличалась. Не беспокойтесь, даже если ваша страница в другой кодировке (например, в windows-1251), ручная перекодировка из UTF-8 не понадобится.

Теперь переходим к клиентской части. Вот исходный код страницы в текстовом формате: guess.txt. Если вас смущают незнакомые теги (которые значимой роли не играют), то можете просто просмотреть исходный код работающего примера. Для начала посмотрим на статический HTML:

<html>
    ...
    <
body onLoad=status();>
    ...
        <
input id=txtNumber type=text/>
        <
input type=button value=Угадать! onClick=guess();/>
        <
input type=button value=Новая игра onClick=newGame();/>
    ...
        <
div id=result></div>
    ...
    </
body>
</
html>

Здесь мы видим поле для ввода текста с id="txtNumber". Именно сюда пользователь будет вводить число. Еще имеются две кнопки, по нажатию на которые выполняются JavaScript-функции guess и newGame. Что они должны делать догадаться нетрудно. Также на странице имеется элемент "div", имеющий идентификатор "result". Именно сюда будет выводиться ответ сервера. Кроме того, сразу после загрузке страницы будет выполнена процедура status. Теперь переходим к клиентской логике.

Код на клиенте


Для реализации логики на клиенте используется JavaScript, что и не удивительно, т.к. приемлемой альтернативы нет. Начнем рассматривать код.

String.prototype.trim = function() {
    return
this.replace(/^s+s+$/g, );
};

sUrl = "/servlet/examples/ajax/guess";
Здесь в класс String добавляется очень полезный метод trim. И определяется значение sUrl. Именно по этому адресу будем обращаться к серверной части нашего приложения. Теперь переходим к функциям, наличие которых обязательно в AJAX-приложении.

//функция возвращает экземпляр класса XMLHttpRequest
   
function getHTTPRequestObject() {
        var
xmlHttpRequest;
        if (
typeof ActiveXObject != undefined) {
            
xmlHttpRequest = new ActiveXObject(Microsoft.XMLHTTP);
        } else if (
typeof XMLHttpRequest != undefined) {
            
xmlHttpRequest = new XMLHttpRequest();
        } else {
            
xmlHttpRequest = false;
        }
        return
xmlHttpRequest;
    }

    var
httpRequester = getHTTPRequestObject(); //Рабочий экземпляр класса XMLHttpRequest

    //выполняет асинхронный GET
   
function makeAJAXCall(ajaxUrl){
        if (
httpRequester) {
            
httpRequester.open(GET, ajaxUrl, true);
            
httpRequester.onreadystatechange = processResponse;
            
httpRequester.send(null);
        }
    }

Здесь все понятно и по комментариям. Функция getHTTPRequestObject возвращает экземпляр ключевого класса, который используется для асинхронного выполнения запросов. Процедура makeAJAXCall выполняет асинхронный (это определяется третьим параметром в методе open) запрос GET к заданному ajaxURL. Обратите внимание на установку значения свойства "onreadystatechange". Теперь при изменениях значения свойства readyState объекта httpRequester будет вызываться функция processResponse. Посмотрим на нее:

var READY_STATE_COMPLETE=4;

   
//CallBack-функция. Выводит полученные асинхронно данные или сообщение об ошибке
   
function processResponse() {
        if (
httpRequester.readyState == READY_STATE_COMPLETE) {
            if (
httpRequester.status==200) {
               
printToPage (<font color=blue>+httpRequester.responseText+</font>);
            } else {
                var
message = Problem retrieving data. requestStatus=+httpRequester.status+. Message=+httpRequester.statusText;
               
printToPage (<font color=red>+message+</font>);
            }
        }
    }

   
//Выводим переданный HTML в элемент с id=result
   
function printToPage(value){
       
resultDiv = document.getElementById(result);
       
resultDiv.innerHTML = value;
    }

В процедуре processResponse первым делом проверятся значение readyState: ничего не делаем, пока запрос не завершен. Потом проверяется значение свойства status. Если оно равно 200 (HTTP OK), то все нормально, и полученные данные выводятся на страницу синим цветом. А если произошла ошибка, то соответствующее сообщение выводится красным. Непосредственно вывод на страницу осуществляет процедура printToPage. Она вставляет сообщение в "div" с идентификатором "result".

Теперь переходим к самой бизнес-логике Ее составляют три процедуры:

//Начинаем новую игру
   
function newGame(){
       
printToPage (<font color=blue>Начинается новая игра...</font>);
       
makeAJAXCall(sUrl+?action=new);
    }

   
//выводим статус текущей
   
function status(){
       
makeAJAXCall(sUrl+?action=status);
    }

   
//попытка угадать число, задуманное сервером
   
function guess(){
        var
userNumberStr = document.getElementById(txtNumber).value.trim();
        ...
       
printToPage (<font color=blue>Сервер думает...</font>);
       
makeAJAXCall(sUrl+?action=guess&number=+userNumberStr);
    }

В процедуре guess я опустил код, который занимается проверкой корректности значения, которое ввел пользователь.

Вот и все. Была решена простенькая задачка без передачи данных от сервера в формате XML. Но ведь пользователь об этом не знает, так что смело можно написать на своем сайте: AJAX Powered!



Похожие статьи:
- Скажи Javascript, нажат ли Caps Lock?
- Скрипт подсчета кликов
- Делаем свою RSS ленту
- Классы в MySQL
- Как создать сайт? Советы для новичков
- Как зарабатывать деньги на сайте
- Asynchronous JavaScript and XML (AJAX)
- Контролируемая отдача файлов
- Подгрузка меню для сайта с фреймами
- Новый подход к веб-приложениям
- Создание таблиц Excel средствами PHP
- Серверные скрипты. Введение
- Оптимизация кода для поисковых систем


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |

Контакты
Редакция:
[0.002]