Динамическое обновление страницы с помощью Ajax. Updater

Разработчики часто создают запросы к серверу для получения фрагментов HTML и обновления содержимого страницы. В Prototype это легко организовать с помощью Ajax. Request и коллбэка onComplete, но с помощью Ajax. Updater это еще проще!

 

Предположим, в нашем HTML-документе есть следующий код:

 

<h2>Our fantastic products</h2>

<div id="products">(fetching product list from server… )</div>

Контейнер products пустой, и мы хотим заполнить его с помощью Ajax-запроса. Нет проблем:

 

new Ajax. Updater(‘products’, ‘/some_url’, { method:‘get’ });

Это все, больше ничего делать не нужно. Аргументы аналогичны Ajax. Request, за исключением первого аргумента – идентификатора контейнера. По завершении запроса Prototype автоматически обновит содержимое элемента с помощью метода Element. update().

 

Если сервер возвращает HTML, содержащий скрипты, по умолчанию они будут вырезаны. Если вы хотите, чтобы они выполнялись, вам нужно установить опцию evalScripts в true.

 

Однако, что будет в том случае, если во время запроса возникнет ошибка?

Чаще всего вы не хотели бы показывать сообщение об ошибке там, где пользователь ожидает увидеть данные. К счастью, в Prototype и это предусмотрено – вы можете указать не один контейнер, а два, передав их первым параметром в виде хэша: { success: 'products', failure: 'errors' }. Данные будут отображены в контейнере success, а сообщение об ошибке – в контейнере failure. Такое разделение сделает ваши интерфейсы более удобными для пользователя.

 

Возможно, вы захотите обновлять содержимое контейнера не полностью, а добавлять данные в начало или в конец с помощью методов Insertion. Top или Insertion. Bottom. Это тоже возможно, просто укажите желаемый метод добавления в параметре insertion:

 

new Ajax. Updater(‘products’, ‘/some_url’, {

  method: ‘get’,

  insertion: Insertion. Top

  });

Ajax. Updater будет использовать указанный метод при изменении содержимого контейнера products. Все просто.

 

Периодические запросы с Ajax. PeriodicalUpdater

 

Ajax. Updater – это здорово, но иногда нужно обновлять элемент регулярно, через определенный промежуток времени. В Prototype есть возможность и для этого - объект Ajax. PeriodicalUpdater, который вызывает Ajax. Updater с указанной периодичностью.

 

new Ajax. PeriodicalUpdater(‘products’, ‘/some_url’,

  {

    method: ‘get’,

    insertion: Insertion. Top,

    frequency: 1,

    decay: 2

  });

Новые параметры - это frequency и decay. frequency – это количество секунд между запросами. В приведенном примере запросы будут выполняться каждую секунду. По умолчанию этот параметр равен 2 секундам.

 

Конечно, пользователи будут довольны динамичностью интерфейса, но с другой стороны сервер будет испытывать большую нагрузку, если несколько пользователей будут одновременно просматривать страницы с периодическим обновлением. Поэтому существует второй параметр decay – это коэффициент, на который умножается частота запроса, если сервер возвращает один и тот же ответ, т.е. данные не изменяются.

В таком случае в нашем примере первый запрос будет сделан через секунду, второй – уже через 2, третий – через 4, и так далее. И напротив, если сервер будет постоянно возвращать разные ответы, этот параметр вообще не окажет никакого эффекта.

 

Использование коэффициента decay заметно снижает нагрузку на сервер. Вы можете поэксперементировать с этим параметром и посмотреть, как он влияет на производительность, выключить его, установив в 1 (значение по умолчанию), или просто не указывать.