Статические и динамические страницы

По способу работы с новыми данными страницы разделяются на статические и динамические.

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

Динамическая страница- позволяет менять информацию на странице без полной её перезагрузки.

Статические веб-страницы просты и написаны на языке HTML и хранятся на веб-сервере. Всякий раз, когда сервер получает запрос относительно веб-страницы, он отправляет ответ вместе с запрошенной веб-страницей клиенту без выполнения какой-либо дополнительной обработки. Он просто находит эту страницу на своем жестком диске и добавляет заголовки HTTP и отвечает на ответ HTTP.

Особенность статической веб-страницы заключается в том, что содержимое этих типов веб-страниц не изменяется в зависимости от запроса. Они всегда одинаковы, если содержимое не изменяется физически на жестком диске сервера. Вот почему эти веб-страницы известны как статические веб-страницы.

Динамическая страница — веб-страница, сгенерированная программно, в отличие от статичной страницы, которая является просто файлом, лежащим на сервере. Сервер генерирует HTML-код динамической страницы для обработки браузером или другим агентом пользователя.

Динамические веб-страницы используются там, где информация часто меняется, например, цены на акции, информация о погоде, новости и спортивные новости. Предположим, что человеку приходится физически менять веб-страницу каждые 10 секунд, чтобы показать последнее обновление цен на акции, что нецелесообразно очень часто физически изменять HTML-страницы, поэтому в этом случае можно использовать динамическую веб-страницу.

Такие веб-страницы часто создаются с помощью серверных языков, таких как ASP, ColdFusion, Go, JavaScript, Perl, PHP, Ruby, Python, WebDNA и других языков, сервером поддержки, который может работать на том же оборудовании, что и веб-сервер.

Динамические страницы обычно обрабатывают и выводят информацию из базы данных. Наиболее популярные на данный момент технологии для генерации динамических страниц: CGI (Common Gateway Interface), ASP (Active Server Pages), JSP (Java Server Pages), ASP.NET, AJAX (асинхронный JavaScript и XML) и др.

Процесс обновления страницы

С перезагрузкой - при синхронном методе

Без полного обновления - при асинхронном методе (JavaScript, AJAX)

 

СИНХРОННЫЙ И АСИНХРОННЫЙ ОБМЕН ДАННЫМИ

Примеры: Требуемый для передачи файл разбивается на пакеты.

Синхронный обмен - когда все пакеты (кусочки данных) передаются по очереди (потоковое видео, н-р, youtube)

Асинхронный обмен - когда пакеты пересылаются в произвольном порядке (торрент-закачка)

 

 

AJAX

AJAX (Asynchronous JavaScript and XML — «асинхронный JavaScript и XML») — технология для взаимодействия страницы с сервером без перезагрузки страницы. Этот набор методов веб-разработки позволяет веб-приложениям работать асинхронно — обрабатывать любые запросы к серверу в фоновом режиме.

В классической (синхронной) модели веб-приложения:

• Пользователь заходит на веб-страницу и нажимает на какой-нибудь её элемент.
• Браузер формирует и отправляет запрос серверу; затем ожидает ответа.
• В ответ сервер генерирует совершенно новую веб-страницу и отправляет её браузеру и т. д., после чего браузер полностью перезагружает всю страницу.

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

В асинхронной модели при использовании AJAX:

• Пользователь заходит на веб-страницу и нажимает на какой-нибудь её элемент.
• Скрипт (на языке JavaScript) определяет, какая информация необходима для обновления страницы.
• Браузер отправляет соответствующий запрос на сервер; в это время может формировать другой запрос или обрабатывать скрипт.
• Сервер возвращает только ту часть документа, на которую пришёл запрос.
• Скрипт вносит изменения с учётом полученной информации (без полной перезагрузки страницы).

В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее.

 

AJAX примеры в нашей повседневной жизни

1. Система голосования и рейтинга

Вы когда-нибудь оценивали продукт, который вы купили онлайн или заполняли форму онлайн-голосования? В любом случае, обе операции используют AJAX. После того, как вы нажмёте кнопку рейтинга или голосования, веб-сайт обновит расчёт, но вся страница останется неизменной.

1. Чаты

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

1. Функция автозаполнения

Живой поиск – классический пример использования AJAX, взятый на вооружение современными поисковыми системами.

Пользователь начинает печатать поисковую фразу, а JavaScript предлагает возможные варианты, получая список самых вероятных дополнений с сервера.

1. Элементы интерфейса

В первую очередь AJAX полезен для форм и кнопок, связанных с элементарными действиями: добавить в корзину, подписаться, и т.п. Сейчас – в порядке вещей, что такие действия на сайтах осуществляются без перезагрузки страницы.

1. Динамическая подгрузка данных

Например, Google Maps

Техническая реализация:

Нужно помнить, что технология AJAX не является ни единой технологией, ни языком программирования. Как уже говорилось ранее, AJAX — это набор методов веб-разработки. Система обычно состоит из:

• HTML/XHTML для основного языка и CSS для презентации.
• Объектная модель документа (DOM) для динамического отображения данных и их взаимодействия.
• XML для обмена данными и XSLT для их управления. Многие разработчики начали заменять JSON, потому что он ближе по форме к JavaScript.
• Объект XMLHttpRequest для асинхронного взаимодействия.
• Наконец, язык программирования JavaScript, чтобы объединить все эти технологии.

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

Сравнительная таблица:

Обычная модель

AJAX модель