Заявка на участие в семинаре

Все поля обязательные для заполнения
Как к Вам обращаться
Email
Телефон
Семинар
Комментарий
отправить
закрыть

Особенности использования AJAX

Уральская академия современных информационных технологий Особенности использования AJAX
Дата публикации: 19.01.2015 13:28:27
Автор статьи: Андрейчиков Юрий, программист отдела разработки УрАИТ


Часть 1 - Особенности передачи данных при помощи ajax.

Сегодня, поговорим об особенностях передачи данных ajax при работе приложений. На примере проекта gameural.ru.

По сути, gameural.ru не отличается от так называемых браузерных игр, ведь "клиент" загружается на машину пользователя, а с сервером (удаленной машиной, на которой хранится исходная и текущая статистика) только обменивается данными в фоне.

Задача: у нас есть n-блоков данных, объединенных внутри игрового хода, т.е. мы что-то делаем с игровым полем - устанавливаем задания, просматриваем информацию по событиям, вообщем совершаем какие-то действия, затем жмем кнопку "сделать ход". Так вот, во время совершения хода необходимо, во-первых собрать информацию о сделанных изменениях и передать на сервер, а во-вторых получить ответ и как-то вывести результат.

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

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

Как передавать данные удмаю вопроса не возникает, методом post (т.к. могут быть довольно длинные строковые значения). Вопрос может возникнуть, а как жеразделать данные при возврате?

Существует формат JSON, для удобной работы с данными как с массивом. Но поскольку массив в JavaScript все-таки просто строка, то вы можете использовать какой-то свой разделитель, например "@" и при получении данных делать split строки, по аналогии с функцией explode в php.

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

Часть 2 - Особенности настройки скриптов с использованием ajax для получения актулаьной информации.

Все чаще в современных веб-приложениях тербуется получать информацию в режиме "реального времени", самый простой пример - это социальные сети. Вы пишите сообщение собеседнику и оно почти сразу же после того как вы нажали "отправить", появляется у него. Однако, мы с вами знаем, чтобы отправить сообщение нужно: 1) забрать данные со страницы при помощи JavaScript, 2) передать при помощи ajax данные на сервер в php скрипт, 3) вставить данные в базу данных 4) у собеседника JavaScript должен как то запросить данные с сервера опять же при помощи ajax, получить ответ и встроить данные на страницу.

Довольно длинная цепочка! Однако сообщения то ведь доходят почти сразу, так что давайте разберем подробнее на примере игры gameural.ru

В нашем проекте стояла задача максимальной универсализации скриптов, так чтобы игра запускалась даже на слабом хостинге и что немаловажно со стандартными настройками, т.е. не на выделенном сервер, а на так называемом виртуальном (shared) хостинге. Поэтому мы использовали не самый практичный вариант, однако чтобы понять суть нам хватит и этого.

В системе администрирования проекта имеется возможность следить за ходом игры - какие команды в сети, какая команда на каком ходу находится. Чтобы реализовать такой функционал мы написали скрипт, который по таймеру опрашивал базу данных и проверял для команд установлен ли флаг "в сети" для проверки наличия "он-лайн", таймер запускаем фнкцией яваскрипт setInterval. Проблема: с какой частотой вызывать функцию? Ограничения такие, для игроков опрос их состояния ("он-лайн") происходит чаще чем в админке во-первых, во-вторых нужен разумный интервал времени. На практике установлено, что к примеру, запросы частотой 1 секунда приводят к тому, что сайт перестает корректно работать, так как хостинг "думает" что проводится слишком много запросов (DOS атака). Например частота от 3 секунд и более уже не приводит к таким результатам и сайт работает стабильно.

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

Если же вы хотите узнать как сделать передачу сообщение аналогично фейсбуку, vk.com и биржам, ознакомьтесь с технологиями websockets, comet.

Ссылки по теме:

  1. Comet - http://en.wikipedia.org/wiki/Comet_(programming)
  2. Общий обзор всех технологий на русском - http://phpforum.ru/txt/index.php/t50877.html

Адрес сайта проекта: http://gameural.ru

Если Вас заинтересовала данная статья и Вы бы хотели научиться делать проекты такого уровня, то приглашаем Вас на наши курсы, которые будет вести Андрейчиков Юрий Сергеевич, сертифицированный программист 1с-битрикс.



Назад в раздел