Initialization JavaScript code:

Main JavaScript code:

Show this JavaScript code
Transports Requested data formats
xmlHttpRequest GET Click here to load by xmlHttpRequest/GET
xmlHttpRequest POST Click here to load by xmlHttpRequest/POST
JavaScript Click here to load by JavaScript-tag
dinamic Form POST Click here to load by dinamic Form/POST
static Form POST
Click here to load by static Form/POST
Image-object Click here to load by Image-object
Result:
JSON:  
DOM:  
Text:  

Note: full english description will be later.



Задача: передать данные на сервер и получить ответные данные при помощи JS-loader 6-ю различными способами:

  1. При помощи объекта xmlHttpRequest, методом GET
  2. При помощи объекта xmlHttpRequest, методом POST
  3. При помощи тэга script, вставляемого в HTML-код
  4. При помощи пары тэгов form+iframe, генерируемых динамически
  5. При помощи пары тэгов form+iframe (form - используется готовая, а iframe создается динамически)
  6. При помощи JavaScript-объекта Image

На сервер будем передавать данные в виде простого JSON-объекта, содержащего всего один элемент с ключем "js_data". В качестве значения для этого элемента используем данные введенные юзером в форму. Эти же данные в 5-м споcобе будем передавать напрямую (без посредства JavaScript) с ключем "hard_data".

От сервера будем получать три вида данных: JSON-объект, DOM-объект и текстовую строку. Каждый из этих видов данных будет содержать: серверное время, способ транспортировки данных, метод GET или POST, счетчик запросов. DOM-объект, кроме того, будет содержать дополнительные данные, полученные от JavaScript.

Пример должен демонстрировать автоматический переход на другие транспортные способы при отключении ActivX в IE6.



Данный пример демонстрирует возможности и принципы использования JS-loader.

Для начала давайте рассмотрим транспортные средства, при которых происходит обмен данными с сервером - их достоинства и недостатки:
Транспорт Принцип работы Достоинства Недостатки
xmlHttpRequest Создается объект xmlHttpRequest, при помощи которого и происходит обмен данными с сервером. Транспорт требует меньше ресурсов, чем другие транспорты, за исключением объекта Image. Позволяет передавать данные как при помощи GET так и при помощи POST. Транспорт не будет работать в IE5-IE6, при отключенных ActiveX. Транспорт не позволяет делать аплоад файлов на сервер.
Тэг script Создается Тэг script. Атрибут src для данного тега формируется, специальным образом, так что он будет направлен на специальную серверную программу. В GET-параметрах могут находиться данные передаваемые на сервер. Транспорт будет работать практически в любом браузере, в т.ч. и при отключенных ActiveX. Требует меньше ресурсов, чем "form + iframe" и не засоряет history браузера. Транспорт не позволяет передавать POST-данные на сервер.
form + iframe Используется пара тэгов form + iframe. Submit формы происходит на iframe. Использоваться могут, либо ранее созданные теги "form" и "iframe", либо эти теги могут создаваться автоматически в специальной невидимой области. Самый универсальный транспорт. Имеются все возможности, которые есть у браузера. Создается очень много вспомогательных элементов, требующих дополнительных ресурсов. Засоряет history браузера.
Объект Image Создается объект Image, при помощи которого данные передаются на сервер. С сервера невозможно получить никакие данные, но возможна подписка на onload и на onerror.* Самый простой, самый быстрый и наименее ресурсоемкий способ передачи данных на сервер. Передавать данные можно только GET-ом. Невозможно получить никакие данные с сервера, за исключением подтверждения об успешном/не успешном прохождении запроса.

* - Как вариант, подписку можно использовать, как булево значение (true/false) получаемое с сервера, тем более что ситуацию с ошибкой можно легко смоделировать на сервере, передав вместо рисунка какой-то текст. Но будьте осторожны, если с сервером нет связи - вы тоже получите сообщение об ошибке.




Позже здесь будет полное описание загрузчика, а пока я предоставлю краткую инструкцию по его использованию. Загрузчик имеет две составные части: серверную (php) и клиентскую (JavaScript). Каждая из частей выполняется в виде объекта имеющего ряд методов. JavaScript-объект, как и все объекты winWrapper генерирует два события "ondataload" и "ondataerror", на которые можно подписаться.


Работа с клиентским JavaScript-объектом

Работа с клиентским JavaScript-объектом состоит из следующих этапов:

  1. Инициализация объекта, которая включает в себя создание объекта и вызов ряда дополнительных (не обязательных методов), как то:
    • установка транспорта (JS, Form, Img). Рекомендуется выполнять только один раз, сразу после создания объекта;
    • установка режима работы (0 - произвольный вызов загрузчика, 1 - каждый следующий запрос ждет завершения предыдущего, 2 - каждый следующий запрос сбрасывает предыдущий). Рекомендуется выполнять только один раз, сразу после создания объекта;
    • смена URL запроса. Можно выполнять только несколько раз, при условии, что каждый новый УРЛ возвращает данные аналогичные предыдущим;
    • установка передаваемых данных. Можно выполнять только несколько раз, перед каждым новым запросом к серверу;
  2. подписка на события;
  3. отправка запроса на сервер;

После того как запрос отправлен на сервер, как только от него получен ответ - полученные данные передаются подписчикам. Все методы, на которые выполняется подписка "ondataload", могут иметь три аргумента: json, dom, text. Таким образом, от сервера могут быть получены одновременно данные трех видов: JSON-объект, DOM-объект и текстовая строка. Это вовсе не означает, что все эти три вида данных надо передавать и получать, можно передавать только один или два из них.

Как классический вариант можно описать такое использование всех трех видов данных одновременно:

  • в виде DOM-объекта получаем кусок HTML-кода, который может быть помещен в текущий документ. Можно передать несколько кусков HTML-кода, как дочерние элементы основного DOM-объекта;
  • в виде JSON-объекта получаем вспомогательные данные, которые позволяют управлять полученным DOM-объектом;
  • Текстовое сообщение можно использовать для служебных сообщений в виде "alert", после получения данных;

Рассмотрим простейший пример использования JS-loader:

loader_test.prototype = { onload : function() { this.loader = this.winWr.getLoadWrapper("/test_loader.php", "get"); this.loader.addListener(this, "ondataload", "onDataLoad"); this.loader.addListener(this, "ondataerror", "onDataError"); }, onclick : function() { this.loader.send({"key":"value"}); }, onDataLoad : function(json, dom, text) { // json - JSON-object // dom - DOM-object // text - Text }, onDataError : function() { alert("Error!"); } }

Здесь я специально привел код подобный тому, что используется на данной странице, но убрал из него все строки, не относящиеся к JS-loader, чтобы легче было понять принцип его использования.

Вначале мы получаем объект загрузчика: this.winWr.getLoadWrapper("/test_loader.php", "get"). Здесь можно передать три аргумента: URl для загрузки, метод get/post и разрешение на использования кэширования true/false (используется только для GET). Все три аргумента не обязательны: URL можно указать потом при помощи специального метода; метод по умолчанию - get; кеширование для "get", по умолчанию разрешено, а для "post" всегда запрещено.

Дальше выполняются подписки - на полученные данные: this.loader.addListener(this, "ondataload", "onDataLoad"); и на ошибку this.loader.addListener(this, "ondataerror", "onDataError");. На этом подготовительная часть заканчивается. Здесь можно было бы вызвать у объекта загрузчика ряд вспомогательных методов, описанных выше, но для упрощения примера я пока не буду здесь этого демонстрировать.

В определенные моменты нам надо будет выполнить обращения к серверу, при помощи загрузчика. Предположим, что мы будем это делать по событию "onclick" на каком-то объекте. Для этого в соответствующем методе будем выполнять: this.loader.send({"key":"value"});.

И, наконец, при получении данных от сервера или ошибки будут вызваны соответствующие методы: onDataLoad и onDataError. Здесь, я думаю, все понятно и без комментариев.


Список вспомогательных методов загрузчика: setTransportJS(); setTransportForm(formWr, frameWr, fullClear); setTransportImage(); setMode(mode); setUrl(url); setSendData(data, clearPrev); send(data); abort(). В рамках данной статьи я не могу сейчас подробно описать все эти методы. Я надеюсь, что их назначение и способ использования интуитивно понятен. Позже я сделаю на них подробное описание, а пока обращайтесь ко мне, за разъяснениями, если что-то не понятно (ICQ#81740922).

Единственный метод, в котором я хочу сейчас пояснить назначение аргументов это - setTransportForm:

  • formWr - обертка элемента формы, которая может быть использована для передачи данных на сервер. Не обязательный параметр. Если он не передан или null - форма будет создана автоматически в специальной скрытой области;
  • frameWr - обертка элемента фрейма, в которые будет происходить сабмит формы. Не обязательный параметр. Если он не передан или null - фрейм будет создан автоматически в специальной скрытой области;
  • fullClear - флаг полной очистки формы, после оправки данных на сервер. Не обязательный параметр. Если он не указан, то для явно заданной формы производится не полная очистка формы (удаляются только те элементы, что созданы дополнительно нашим JS), а для динамической формы выполняется полная очистка;

Работа с серверным PHP-объектом

  1. Подключение php-класса загрузчика.
  2. Инициализация объекта, которая включает в себя создание объекта.
  3. Подготовка данных (ХЭШ, HTML, Text).
  4. Отправка ответных данных.

ХЭШ может быть многомерным массивом. На клиентской стороне он будет получен в виде JSON-обекта, с такой же точно вложенностью.

Серверный код, отвечающий на запросы JS-loader тоже предельно простой:

include_once("../_core/libs/winWrapperDataLoader/winWrapperDataLoader.php"); $loader = new winWrapperDataLoader(); $data = $loader->getData(); $loader->setJson(array(....)); $loader->setHtml("<div>HTML-code</div>"); $loader->setText("Simple text")); $loader->send();

Я думаю, что эта часть кода в комментариях не нуждается.





В заключение хочу обратить внимание на такой момент, что данные, передаваемые от JavaScript к серверу, готовятся в виде JSON объекта, а на сервере будут получены в виде массива. В обратную же сторону, могут передаваться, как говорилось выше, - три вида данных. Данные, передаваемые как в одну так и в другую сторону можно готовить и получать в виде многомерных массивов/JSON-обектов. При этом данные представленные на сервере в виде обычного массива с последовательными числовыми ключами в JS будут эксвивалентны массиву созданному при помощи ["val1", "val2", ...], а php-массив с текстовыми ключами будет эквивалентен в JS {"key1" : "val1", "key2" : "val2", ...}. Допускается произвольное вложение двух видов этих данных один в другой.

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