Ajax новый подход к веб приложениям


Содержание

Устройство веб-приложений

Веб-приложение состоит из клиентской и серверной частей, тем самым реализуя технологию «клиент-сервер».

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

Серверная часть получает запрос от клиента, выполняет вычисления, после этого формирует веб-страницу и отправляет её клиенту по сети с использованием протокола HTTP.

Само веб-приложение может выступать в качестве клиента других служб, например, базы данных или другого веб-приложения, расположенного на другом сервере. Ярким примером веб-приложения является система управления содержимым статей Википедии: множество её участников могут принимать участие в создании сетевой энциклопедии, используя для этого браузеры своих операционных систем (будь то Microsoft Windows, GNU/Linux или любая другая операционная система) и не загружая дополнительных исполняемых модулей для работы с базой данных статей.

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

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

Виды Веб-приложений и технологии их создания:

AJAX(Asynchronous JavaScript and XML) — подход к построению пользовательских интерфейсов Web-приложений, при котором в ответ на каждое действие пользователя Web-страница на его браузере, не перезагружается полностью — с Web-сервера только догружаются нужные ему данные. Этим обеспечивается оперативная работа как одного, так и групп пользователей с приложениями. AJAX представляет собой не одну, а группу технологий и базируется на принципах использования DHTML для динамичного изменения содержания страницы и использования XMLHttpRequest для обращения к серверу (альтернативный вариант — динамическая подгрузка JavaScript с использованием объектной модели документа — DOM). С учетом этих принципов можно создавать удобные Web-интерфейсы на тех страницах сайтов, где необходимо активное взаимодействие с пользователями. Популярность AJAX приобрела после того, как компания Google начала применять его при создании Gmail, Google maps, Google suggest.

ASP (Active Server Pages) — технология создания Web-приложений, использующая объектную модель интерфейса, созданного на основе ISAPI-фильтра. ASP упростила задачи генерации HTML-страниц и позволила производить обращение к компонентам баз данных. Принцип, заложенный в основу интерфейса приложения, заключается в том, что на Web-странице присутствуют фрагменты кода, который интерпретируется Web-сервером и предоставляет пользователю готовый результат выполнения выбранных фрагментов кода. Web-страница, созданная с использованием технологии ASP, имеет расширение «.asp».

CGI(Common Gateway Interface, общий шлюзовой интерфейс) — программа поиска в удаленных БД, переадресации ссылок, использования графических меню, связи с базами данных (путем запуска программы преобразования форматов баз данных в формат языка HTML).

CRM (Customer Relationship Management) — Web-приложения для автоматизации и повышения эффективности процессов, связанных с бизнесом (обработка заказов, маркетинг, обслуживание клиентов). CRM используются в специализированных операторских «контакт-центрах». Первая версия программного продукта Microsoft CRM появилась в 2002 году. Web-сервисы Microsoft CRM реализуются на основе использования SQL-сервера и предусматривают создание основного хранилища данных Microsoft CRM, БД метаданных, БД для построения отчетности и дистрибуционной БД, предназначенной для отслеживания взаимодействия автономных пользователей клиента Outlook с основной БД Microsoft CRM. Использование XML позволяет интегрировать Microsoft CRM с приложениями подобного назначения независимо от языка программирования и операционной системы, под управлением которой работает стороннее приложение (например, SAP R/3). Система предусматривает ограничения доступа и проверку прав доступа клиентов.

ERP (Enterprise Resource Planning) — Web-приложения, предназначенные для автоматизации процессов управления внутрихозяйственной деятельностью корпорации, включая управление производством, финансами, снабжением, персоналом.

ISAPI (Internet Server Application Programming Interface) — интерфейс к серверу Интернета фирмы Microsoft, предназначен для программного управления сервером. ISAPI поддерживается большинством производителей программных средств. ISAPI-программы представляют собой специальный вид приложений, обрабатывающих пользовательские запросы и отображающих их вывод в виде потока HTML, который поступает непосредственно в браузер клиента.

ITRP (IT Resources Planning) — класс Web-приложений, предназначен для поддержки управления корпоративными ИТ-ресурсами и сервисами.

JSP (Java Server Pages) — технология создания Web-приложений, основанная на однократной компиляции Java-кода (сервлета) при первом обращении к нему с последующим выполнением методов этого сервлета и помещением полученных результатов в набор данных, которые отправляются в браузер.

OSS (Operation Support Systems) — вид Web-приложений, предназначен для обеспечения работы операторов распределенных вычислительных сетей. OSS обеспечивает управление сетью, производительность, ликвидацию сбоев в работе, создание и учет сервисов, планирование сетевых ресурсов, мониторинг процессов, контроль за безопасностью, качество услуг и уровень обслуживания клиентов, сбором статистических данных. Разновидностью OSS является система поддержки бизнеса — BSS (Business Support Systems). К ним относятся биллинговые системы, системы управления взаимоотношениями с клиентами, управления сетями, заказами, качеством услуг.

PHP (Personal Home Page) — сценарный язык и программное средство для создания Web-страниц. В его состав входит CGI-интерфейс, интерпретатор языка и набор функций для доступа к базам данных и различным объектам WWW. PHP позволяет формировать страницы в режиме интерактивного взаимодействия в системах «клиент-сервер».

Требования к веб-приложениям

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

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

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

• надежность: Формально, надежность – это свойство приложения сохранять

во времени в установленных пределах значения всех параметров, характеризующих

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

применения (ГОСТ 27.002-89). Т.е. требования к надежности приложения

определяются условиями функционирования приложения (параметры сервера,

максимальное количество пользователей приложения) и допустимыми показателями

качества работы системы в этих условиях (время обработки запроса пользователя к

системе, количество отказов системы). Таким образом, надежное веб-приложение

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

(т.е. все возможные условия для данного приложения должны быть рассмотрены и учтены

при проектировании системы).

быстродействие приложения: Быстродействие определяется как среднее

время обработки запроса пользователя к системе. Максимальным приемлемым

временем отклика для веб-приложений считается 5 секунд.

• безопасность: Требование безопасности веб-приложения включает в себя:

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

приложения может, контроль уровня доступа компонентов и/или пользователей,

авторизация и верификация пользователей.

масштабируемость:– это способность системы увеличивать свою


производительность при повышенной нагрузке и добавлении ресурсов. Для

пользователя масштабируемого веб-приложения должен оставаться незаметным

момент (т.е. время отклика системы на запросы пользователя не должно заметно

изменяться), когда возрастет нагрузка (например, к приложению получают доступ

одновременно еще несколько пользователей), и при изменении конфигурации

приложения (например, если на уровень бизнес-логики будет добавлен

дополнительный компонент обработки данных).

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

Не нашли то, что искали? Воспользуйтесь поиском:

Лучшие изречения: Для студентов недели бывают четные, нечетные и зачетные. 9438 — | 7438 — или читать все.

188.64.174.135 © studopedia.ru Не является автором материалов, которые размещены. Но предоставляет возможность бесплатного использования. Есть нарушение авторского права? Напишите нам | Обратная связь.

Отключите adBlock!
и обновите страницу (F5)

очень нужно

Лекции по веб-программированию

Технология Ajax

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

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

Обычные (классические) веб страницы, (которые не используют AJAX) должны быть перезагружены полностью при необходимости обновить содержимое.

История

Впервые термин AJAX был публично использован 18 февраля 2005 года в статье Джесси Джеймса Гарретта (Jesse James Garrett) «Новый подход к веб-приложениям»[3]. Гарретт придумал термин, когда ему пришлось как-то назвать новый набор технологий, предлагаемый им клиенту.

Однако в той или иной форме многие технологии были доступны и использовались гораздо раньше, например в подходе «Remote Scripting», предложенном компанией Microsoft в 1998 году, или с использованием HTML-элемента IFRAME, появившегося в Internet Explorer 3 в 1996 году.

AJAX стал особенно популярен после использования его компанией Google в сервисах Gmail, Google Maps и Google Suggest.

Принцип работы

AJAX имеет вид всего лишь одного объекта под названием XMLHttpRequest.

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

Когда Вы используете Ajax нужно учитывать следующие правила: Вся информация передается/получается исключительно в кодировке UTF-8; В разных браузерах XMLHttpRequest вызывается по-разному.

Преимущества

Экономия трафика. Передаются данные только конкретной части страницы, что существенно снижает трафик.

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

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

Разнообразие в использовании. Действие AJAX подразумевает под собой не только работу с формами. Например, в поиске Google вы можете видеть подборку поисковых фраз после ввода уже первых букв Вашего запроса.

Недостатки

Требуется включенный Java Script. Если в настройках безопасности браузера будет выключен Java Script, то результата работы AJAX можно не увидеть.

Данные не доступны поисковикам. Что логично, динамически изменяемые данные, как и прочие в Java Script не видимы поисковым роботом.

Сложность самого проекта. Со временем, при частом использовании AJAX на сервисе могут возникнуть трудности в работе с программным кодом и масштабностью проекта. Поэтому использование AJAX в самом начале стоит ограничить и использовать точечно.

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

Методы и свойства объекта XMLHttpRequest

Методы

abort() — отмена текущего запроса к серверу.

getAllResponseHeaders() — получить все заголовки ответа от сервера.

getResponseHeader(«имя_заголовка») — получить указаный заголовок.


open(«тип_запроса»,«URL»,«асинхронный»,«имя_пользователя»,«пароль») — инициализация запроса к серверу, указание метода запроса. Тип запроса и URL — обязательные параметры. Третий аргумент — булево значение. Обычно всегда указывается true или не указывается вообще (по умолчанию — true). Четвертый и пятый аргументы используются для аутентификации (это очень небезопасно, хранить данные об аутентификации в скрипте, так как скрипт может посмотреть любой пользователь).

send(«содержимое») — послать HTTP запрос на сервер и получить ответ.

setRequestHeader(«имя_заголовка»,«значение») — установить значения заголовка запроса.

Свойства

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

readyState — номер состояния запроса. От 0 до 4:

0 — Объект не инициализирован.

1 — Объект загружает данные.

2 — Объект загрузил свои данные.

3 — Объек не полностью загружен, но может взаимодействовать с пользователем.

4 — Объект полностью инициализирован; получен ответ от сервера.

responseText — представление ответа сервера в виде обычного текста (строки). Полный текст есть только при readyState=4, ряд браузеров дают доступ к полученной части ответа сервера при readyState=3.

responseXML — объект документа, совместимый с DOM, полученного от сервера.

status — состояние ответа от сервера. Например, для HTTP-запросов — статусный код ответа сервера: 200 — OK, 404 — Not Found, и так далее. Запросы по протоколам FTP, FILE:// не возвращают статуса, поэтому нормальным для них является status=0.

statusText — текстовое представление состояния ответа от сервера. Например, Not Found или OK.

Пример использования XMLHttpRequest

Создадим html-страницу, содержащую контейнер div, в котором будет отображаться информация и кнопку для вызова функции.

Теперь создаем функцию для отправки запроса

Технология AJAX

AJAX (аббревиатура от Asynchronous JavaScript and XML) – это технология взаимодействия с сервером без перезагрузки страницы. Поскольку не требуется каждый раз обновлять страницу целиком, повышается скорость работы с сайтом и удобство его использования.

История технологии

Многие технологии, которые используются в AJAX, известны еще с 1990-х годов. Так, в 1996 году в Internet Explorer 3 применялся HTML-элемент IFRAME, а в 1998 году компания Microsoft предложила подход Remote Scripting.

Непосредственно термин AJAX впервые был использован Джесси Джеймсом Гарретом 18 февраля 2005 года в статье «Ajax: A New Approach to Web Applications». Ее автор является одним из основателей и главой компании Adaptive Path. В своей статье он описал принцип разработки web-приложений, применяемый на тот момент в Google Maps и Gmail. По его словам, это стало «фундаментальным прорывом в возможностях, доступных в веб-приложениях».

Тогда же господин Гаррет объяснил, что такое AJAX, дал название этому подходу и обратил внимание непосредственно на возникший тренд. Все это позволило вывести разработку web-приложений на принципиально новый уровень. Теперь мы можем на своем дисплее наблюдать результаты «фонового» обмена данными браузера с сервером.

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

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

Как работает AJAX

Понять основной принцип работы AJAX помогает представленное ниже изображение:

В работе технологии можно выделить 4 основных этапа:

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

Для обмена данными на странице создается объект XMLHttpRequest, он будет выполнять функцию посредника между браузером и сервером. Запросы могут отправляться в одном двух типов – GET и POST. В первом случае обращение производится к документу на сервере, в роли аргумента ему передается URL сайта. Для предотвращения прерывания запроса можно воспользоваться функцией JavaScript Escape. Для больших объемов данных применяется функция POST.

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

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

В качестве ответа сервер использует простой текст, XML и JSON. В первом случае результат можно сразу же отобразить на странице. При получении XML-документа его обычно конвертируют в HTML и выводят на экран. Если ответ получен в формате JSON, клиенту следует выполнить полученный код. После этого будет сформирован объект JavaScript.

Преимущества технологии AJAX

Сокращение трафика. Объем данных при работе с web-приложениями значительно снижается. Это происходит за счет того, что не нужно загружать всю страницу целиком, достаточно получить только измененную часть либо набор данных. После этого JavaScript изменяет содержимое страницы в браузере.

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

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

Илон Маск рекомендует:  Тег summary

Широкий спектр возможностей. Использование AJAX не ограничивается формами. Например, при прохождении регистрации на некоторых сервисах пользователь вводит логин – и через мгновение ему выдается информация о том, свободен он или нет. Также при введении поискового запроса в Google после каждой буквы или слова предлагается несколько вариантов запроса. Это значительно повышает комфорт работы с сайтами.


Недостатки AJAX

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

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

Ухудшение безопасности. Заметным недостатком AJAX также являются пробелы в безопасности, ведь исходный код каждый может прочитать в браузере.

Невозможность установить число обращений. Механизм динамической подгрузки контента заметно искажает данные статистики. Ведь в этом случае при перемещении пользователя по различным страницам не выполняется операция их перезагрузки. И обычный счетчик не регистрирует переход. Для крупных проектов такое искусственное занижение количества просмотров приводит к значительному падению доходов.

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

Индексирование AJAX поисковиками

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

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

Чтобы минимизировать негативное влияние AJAX на SEO, сайт можно оптимизировать следующим образом:

  1. Перепишите ссылки в URL. После каждой # необходимо поставить восклицательный знак.
    Например, ссылку http://www.site.ru/#uslugi необходимо преобразовать в http://www.site.ru/#!uslugi.
  2. Для всех страниц AJAX версию HTML следует сделать доступной по определенному адресу. В нем установленное нами сочетание «#!» Необходимо заменить на «?_escaped_fragment_=». (В нашем примере http://www.site.ru/?_escaped_fragment_=uslugi).
  3. На странице AJAX нужно проставить тег: .
  4. Карта сайта в формате .xml ускорит индексацию его страниц.
  5. После индексации ресурса сравните его версию AJAX с сохраненной копией. Это позволит увидеть, все ли страницы проиндексированы ботами.

Влияние AJAX на ранжирование

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

  • вероятность, что поисковые боты не учтут весь контент;
  • бесполезная адресная строка (у всех страниц одинаковый адрес);
  • робот может видеть не то содержание страницы, что отображается пользователю.

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

Динамические страницы можно кэшировать и отображать их в качестве статических. Для вызова AJAX лучше воспользоваться классическим якорем, чем событием «onClick».

Таким образом, грамотное использование AJAX позволит повысить скорость работы сайта и его удобство для пользователей, не жертвуя дружественным отношением со стороны поисковых систем.

AJAX — технология Web 2.0

В последнее время термин AJAX уже неоднократно упоминался на Софтодроме (два раза), а также были упоминания этого термина на софтодромном СофтФоруме («AJAX — классный футбольный клуб»). Эти крайне любопытные обстоятельства и послужили побуждением к написанию настоящей заметки.

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

Сам термин AJAX является сокращением и расшифровывается как «Asynchronous JavaScript And XML» (Aсинхронный JavaScript и XML). AJAX — это не самостоятельная технология, а синтез технологий, которые сами по себе существовали еще за несколько лет до появления термина AJAX. Так еще в 1996 году в браузере Internet Explorer была реализована поддержка тэга IFRAME, позволяющего загружать контент во фрейм без необходимости перезагрузки всей страницы. Поскольку тэг IFRAME и его аттрибут SRC позволяют осуществлять загрузку любого URL во фрейме, то при использовании JavaScript это в принципе позволяет добиться характерных для AJAX эффектов.

Термин AJAX впервые появился в статье Дж. Гарретта (Jesse James Garrett) «AJAX: Новый подход к веб-приложениям», опубликованной в феврале 2005 года. В этой статье автор обращает внимание читателя на новый подход к работе веб-приложений, реализованный программистами корпорации Google в известных интерактивных сервисах Google Maps и Google Suggest, и предлагает назвать этот новый подход термином AJAX. Полезная статья, очень рекомендуемая к прочтению каждому, кто интересуется современными веб-технологиями (технологиями Web 2.0).

Чтобы не изобретать велосипед, можно процитировать приведенное в статье Wikipedia простое схематическое сравнение двух подходов к генерации веб-страниц — подхода AJAX и стандартного подхода (т.е. подхода, использовавшегося до появления AJAX):

Сравнение стандартного подхода и AJAX

Классическая модель веб-приложения:

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

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

AJAX-подход к разработке веб-приложений базируется на двух основных принципах:

— Использование DHTML для динамического изменения содержимого страницы.
— Использование XMLHttpRequest для обращения к серверу «на лету», не перезагружая всю страницу полностью (также существует альтернативный вариант — динамическая подгрузка JavaScript с использованием DOM).

Более детальное описание AJAX и ссылки на руководства по разработке AJAX-приложений можно найти здесь (англ.) и здесь (рус.)

В настоящий момент технологии AJAX используются на целом ряде известных веб-сайтов. В частности, как отмечает в своей статье Дж. Гарретт, компания Google инвестирует в разработку AJAX-приложений существенные средства. Все новые сервисы Google, и в том числе такие сервисы как GMail, Orkut, Google Groups, Google Maps, Google Suggest, Google Finance и т.д., являются AJAX-приложениями.

Тема: AJAX. Программирование AJAX-сайтов с использованием JsHttpRequest

Опции темы
Поиск по теме
Отображение
  • Линейный вид
  • Комбинированный вид

  • Древовидный вид

AJAX. Программирование AJAX-сайтов с использованием JsHttpRequest

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

По-английски AJAX произносится как эй-джэкс, по-русски довольно распространено аякс.

AJAX — это не самостоятельная технология, а концепция использования нескольких смежных технологий. AJAX базируется на двух основных принципах:
использование технологии динамического обращения к серверу «на лету», без перезагрузки всей страницы полностью, например:
с использованием XMLHttpRequest (основной метод);
через динамическое создание дочерних фреймов;
через динамическое создание тега

Традиционно World Wide Web организуется как взаимосвязанный набор HTML-страниц, перемещение между которыми осуществляется посредством гиперссылок. Щелкнув по такой ссылке, пользователь открывает в своем браузере ту или иную HTML-страницу, а о старой «забывает». При этом страницы чаще всего являются не статическими (раз и навсегда сохраненными на сервере), а динамическими, то есть каждый раз строятся заново (по запросу пользователя) на основе информации, хранящейся в базе данных сайта.

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

AJAX (Asynchronous JavaScript and XML — асинхронный JavaScript и XML) — это технология загрузки данных с сервера, при использовании которой страница, открытая в браузере, не заменяется на новую целиком. Вместо этого обновляется только определенный блок на странице. Самое главное в AJAX — именно отсутствие перехода, что делает web-сайт очень похожим на оконное GUI-приложение.

[img w >
В настоящее время строгого стандарта создания AJAX-приложений не существует, а вместо этого применяются различные библиотеки и средства, облегчающие работу программиста.

В этой статье мы рассмотрим популярную в России библиотеку JsHttpRequest, разработанную автором данной статьи. Ключевые особенности этой библиотеки: поддержка PHP, простота использования, «прозрачная» работа с русскоязычными (и другими) кодировками, возможность закачивать файлы на сервер методом AJAX, а также отличная кроссбраузерность (работает даже в очень старых браузерах).

Домашняя страница библиотеки — http://dklab.ru/lib/JsHttpRequest. Там же вы сможете прочитать полную документацию, а также скачать примеры использования библиотеки.

Любое приложение, построенное по технологии AJAX, состоит из двух взаимосвязанных между собой частей: клиентской и серверной.

Клиентская часть системы (назовем ее frontend’ом) — некоторый код на языке программирования JavaScript, выполняемый непосредственно в браузере пользователя. Его задача — послать запрос на сервер, дождаться от него ответа, а затем принять данные, обработать их и отобразить в заранее отведенной для этого области без перезагрузки всей страницы.

Серверная часть системы (backend-приложения) — это скрипт, который запускается на сервере по запросу клиентской части. Он выполняет всю основную работу по генерации данных, которые будут в дальнейшем показаны пользователю. Здесь мы рассматриваем только PHP-сценарии, поскольку они штатно поддерживаются в JsHttpRequest.

Таким образом, чтобы разрабатывать AJAX-приложения, необходимо знать как минимум два языка программирования: серверный (PHP) и клиентский (JavaScript).

Пример использования JsHttpRequest

Проиллюстрируем простоту использования JsHttpRequest. Для этого рассмотрим пример AJAX-приложения, вычисляющего значение MD5 (криптографическая хэш-функция) от введенной пользователем строки или закачанного им файла. Вычисление происходит на сервере (функция md5() встроена в PHP, но ее нет в JavaScript), а результат отображается в специальном блоке на странице, открытой в браузере. Для загрузки используется технология AJAX.

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

См. код клиентской и серверной части приложения. Листинги программ также находятся на CD: клиентская часть в файле md5_frontend.html, а серверная — в файле md5_backend.php.

Ключевые возможности JsHttpRequest

Функциональность, предоставляемая библиотекой:
«прозрачная» работа с русскоязычными кодировками (как в PHP, так и в JavaScript). Язык JavaScript является полностью Unicode-ориентированным, в то время как PHP-скрипты, как правило, пишут с использованием национальных кодировок (например, windows-1251). Преобразование данных из Unicode в windows-1251 и обратно при «ручном» AJAX-программировании очень однообразно и чревато ошибками (в этом может убедиться всякий, кто имеет опыт создания AJAX-приложений без применения библиотек). К счастью, JsHttpRequest берет всю эту работу на себя. Вы можете писать скрипты так, как привыкли к этому раньше, обо всех перекодировках позаботится библиотека;
закачка файлов (upload) из браузера на сервер без перезагрузки страницы. Принято считать, что при помощи AJAX невозможно закачивать файлы на сервер. Такое мнение возникло потому, что компонент XMLHttpRequest, встроенный во многие браузеры, действительно, не поддерживает закачку файлов. Тем не менее обходной способ все же существует, и именно он реализуется в JsHttpRequest. Для библиотеки файл представляет собой обычные данные, поэтому она без проблем передает их на сервер;
полная поддержка отладочных возможностей PHP. Если в скрипте на серверной стороне происходит ошибка (включая фатальную, например вызов неопределенной функции), клиентская часть имеет возможность корректно ее обработать и вывести диагностику. Помимо данных ответа, ей передается выходной поток скрипта, содержащий текст ошибки PHP. Собственно, в приведенном выше примере мы продемонстрировали это при помощи инструкции echo, но вместо echo могло быть все что угодно, начиная от Notice и заканчивая фатальной ошибкой PHP (например, «вызов неопределенной функции») или даже ошибкой нехватки памяти (превышение значения, заданного директивой memory_limit файла php.ini). Таким образом, отладка AJAX-приложений из сложного и неприятного занятия превращается в нечто обыденное;
кроссбраузерность. Библиотека работает в IE5.0+, Mozilla 1.7+, Firefox 1.0+, Opera 7.20+, Safari (здесь «+» означает «в этой и более новых версиях»). Кроме того, код может работать без поддержки ActiveX и XMLHttpRequest (однако если эти возможности включены в браузер, то они автоматически задействуются);

передача многомерных структур данных запроса и ответа сервера. Приведенный выше пример AJAX-приложения показывает, что JsHttpRequest может передавать данные на сервер в виде произвольного объекта JavaScript (в нашем случае это был объект < str: “строка”, upl: “элемент закачки” >, см. второй параметр метода query()). Этот объект автоматически трансформируется в привычный PHP-разработчику массив $_REQUEST (автоматически происходят все необходимые преобразования кодировок). И наоборот, PHP-часть приложения передает произвольный массив PHP из серверной части в клиентскую (он сохраняется в глобальной переменной $_RESULT либо в свойстве $JsHttpRequest->RESULT — кому как удобнее). Этот массив можно получить в виде JavaScript-объекта в обработчике результата (в нашем примере это параметр с именем result). Таким образом, JsHttpRequest берет на себя всю работу по преобразованию PHP-массивов в JavaScript-объекты и обратно. Более того, эти массивы и объекты могут иметь произвольную степень вложенности: например, можно создать в PHP массив $_RESULT = array(‘first’ => array(‘second’ => 123)) и получить к его элементу 123 доступ из JavaScript в виде result.first.second;

Итак, работа со структурами данных происходит «родными» средствами языков. Пользователю библиотеки не нужно ничего знать об XML, традиционно используемом в AJAX-программировании.
поддержка сессий PHP стандартными средствами. При применении JsHttpRequest вы можете работать с сессиями PHP (массив $_SESSION) привычным образом, никаких дополнительных знаний не требуется.

Работа JsHttpRequest как PHP-модуля для Prototype

Отдельного рассмотрения заслуживает тот факт, что JsHttpRequest может использоваться в качестве PHP-части AJAX-сайта, применяющего библиотеку Prototype.

Prototype (http://prototypejs.org) — это популярное средство для упрощения разработки сложных JavaScript-приложений, включающее поддержку AJAX и другие возможности. Вы наверняка о нем слышали, если активно работали с JavaScript.

Итак, после подключения небольшого модуля совместимости (файл JsHttpRequest-prototype.js в дистрибутиве библиотеки) вы можете работать с Prototype так, как привыкли. Но при этом вы пишете PHP-составляющую приложения с использованием JsHttpRequest, а потому получаете в свое распоряжение всю функциональность этой библиотеки (кроссбраузерность, закачка файлов, работа с русскими кодировками, обмен многомерными структурами данных и т.д.). Небольшой пример JavaScript-кода, в котором JsHttpRequest и Prototype работают совместно, приведен в листинге.

В качестве PHP-части можно использовать тот же самый скрипт, что был приведен в предыдущем примере.

Ajax: новый подход к веб приложениям

AJAX (англ. Asynchronous JavaScript and XML — асинхронный JavaScript и XML) — это не технология сама по себе, а термин, который описывает «новый» подход к использованию существующих технологий вместе. АJAX включает: HTML или XHTML, CSS, JavaScript, DOM, XML, XSLT, и объект XMLHttpRequest. Когда эти технологии объединяются в модель AJAX, web-приложения способны делать быстрые дополняющие обновления интерфейса пользователя без необходимости полной перезагрузки страницы браузером. Приложения работают быстрее и становятся более отзывчивыми к действиям пользователей.

AJAX: что это такое, влияние на seo, преимущества и недостатки технологии

AJAX (Asynchronous JavaScript and XML) – это технология, обеспечивающая динамические запросы на сервер, в ходе которых нет нужды перезагружать страницу. Сайт функционирует на порядок быстрее, потому что не нужно регулярно обновлять всю страницу, поэтому его использование становится более удобным для пользователя, но не для поисковых систем.

История возникновения технологии AJAX

Огромное количество подобных технологий начали применяться еще в далеких 90-х годах прошлого века. Например, в 96-ом году в браузер Internet Explorer 3 внедрили HTML-элемент IFRAME, а спустя два года Microsoft реализовала механизм Remote Scripting.

Однако сам термин «Asynchronous JavaScript and XML» стал известен миру лишь на заре 2005 года, когда Джесси Гаррет выпустил статью под названием «Ajax: новый подход к веб-приложениям». В своем материале Гаррет подробно рассказал, как создаются интернет-приложения для Google Maps и Gmail. Он с уверенностью заявил, что это стало началом стремительного развития возможностей, доступных пользователям в приложениях.

Джесси Джеймс Гарретт (Jesse James Garrett)

Особое внимание Джесси Гаррет уделил именно технологии AJAX, дал ей название и детально описал новый тренд. Но стоит отметить, что не он придумал эту технологию, он дал ей только название.


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

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

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

Принцип работы технологии

Чтобы конкретно понять, как именно работает AJAX, рассмотрим 4 важнейших этапа:

  1. Посетитель обращается к AJAX. Как правило, делает он это посредством определенной кнопки, которая сообщает о том, что при нажатии вы ознакомитесь с дополнительной информацией.
  2. Затем система отсылает запрос и различные данные на сервер. К примеру, может понадобиться загрузить какой-нибудь файл или информацию, находящиеся в базе данных.
  3. Получив ответ от базы данных, сервер отправляет данные в браузер.
  4. JavaScript приходит ответ, и он расшифровывает его в читабельный для пользователя вид.
Илон Маск рекомендует:  SeekEoln - Функция Delphi

Если объяснять суть технологии визуально, то на изображении данный процесс будет выглядеть так:

Без объекта XMLHttpReques обмен информацией невозможен, поэтому он предварительно размещается на самой странице. Объект выступает в роли связывающего звена для сервера и веб-браузера. Сами запросы переходят от системы к серверу в формате POST или GET. Для типа GET присущее обращение к документу, находящемуся на сервере, а в качестве аргумента он получает адрес сайта. Чтобы запрос не был прерван, создана надежная функция JavaScript Escape, предотвращающая такие случаи.

Если данные передаются в больших объемах, не обойтись без функции POST. Сервер занимается обработкой информации, которая ему поступает, и затем, основываясь на них, образует обновленные данные, которые отправляются пользователю.

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

Для отправки ответа, сервер применяет стандартный текст JSON либо XML. Получая JSON-документ, он сразу выводится на экран. Но еще пользователь обязан выполнить код, который он получит, после чего сформируется объект JavaScript. А если отправляется текст в формате XML, его сначала нужно заменить на HTML, а затем уже отобразить на странице.

Какие плюсы у AJAX?

    • Уменьшает нагрузку на сервер. Но это возможно только в том случае, если применять технологию правильно. Вы можете использовать шаблон, который поможет создавать постоянные элементы веб-ресурса: меню, логотип, шапка и прочее. А чтобы удовлетворять запросы посетителей, нет необходимости перезагружать страницу целиком. К примеру, вы создали блок с голосованием, и посетителю предлагается выбрать оптимальный для него пункт, чтобы проголосовать. Как только он нажмет на кнопку, информация моментально уйдет на сервер, а затем человеку придет ответ. И все это происходит без обновления страницы.
    • Повышает работоспособность сервера. Потому что происходит загрузка лишь содержания страницы, и пользователям приходят результаты их действий намного быстрее.
    • Снижает трафик. Число данных в процессе работы с приложениями существенно уменьшается. Обеспечивается это тем, что заново загружается не вся страница, а лишь ее измененные элементы или данные. Затем скрипт меняет информацию на странице в браузере.
    • Открывает большое разнообразие возможностей. Сделав выбор в пользу AJAX, вам будет доступно изобилие действий. Так, регистрируясь на сайтах, посетитель, указывая логин, сразу же узнает, занят он, или нет. А вводя запрос в поисковой строке Google или Яндекс, после любого последующего слова или буквы, ниже отображаются готовые варианты запросов. Разумеется, это значительно облегчает задачу интернет-пользователям.

Какие недостатки у технологии?

  • Нужно постоянно включатьJavaScript. Без данной поддержки технология AJAX на соответствующих страницах практически бесполезна.
  • Проблемы с индексацией содержимого. Нередко контент, размещающийся на страницах динамически, остается без внимания поисковых ботов. В связи с этим рекомендуется применять динамический способ загрузки только по отношению к некоторым фрагментам содержимого. Только так можно свести к минимуму негативное влияние технологии на SEO-продвижение.
  • Невозможно объединиться с инструментами браузера. Если создавать страницы динамическим методом, браузер не будет запоминать их и показывать в истории, в связи с чем при нажатии кнопки «Назад» вы не вернетесь на ранее посещенную страницу. Но проблема решается специальными скриптами. Еще у вас не будет возможности сохранить закладку на какой-нибудь контент.
  • Отсутствие количества обращений. Из-за динамической загрузки материалов, система не может точно отображать статистику, потому что, когда пользователь перемещается по разным страницам, они не перезагружаются, и счетчик не учитывает эти переходы. Из за этого могут возникать проблемы при оценке аналитике на сайте.
  • Снижается уровень безопасности. Установив AJAX, любой пользователь может просмотреть исходный код страницы, а это небезопасно.

Как AJAX индексируется поисковыми системами?

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

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

Для максимального снижения отрицательного воздействия AJAX на продвижение сайта, его необходимо оптимизировать:

  1. Поменяйте ссылки в URL. После всех символов # пропишите знаки !. К примеру, ссылку http://mysite.com/#catalog поменяйте на http://www.mysite.com/#!catalog
  2. Откройте доступ к HTML версиям каждой страницы AJAX по конкретным адресам. Для этого поменяйте в них заданное нами значение «#!» на «?_escaped_fragment_=». В результате получится http://www.mysite.com/?_escaped_fragment_=catalog
  3. Для AJAX страницы пропишите тег:
  4. Создайте xml карту. Это ускорит индексацию страниц сайта.
  5. После того, как сайт попадет в индекс, посмотрите разницу между AJAX версией и копией. Так вы сможете проконтролировать, какие страницы роботы не внесли в базу данных поисковиков. Как проверить индексацию сайта, читайте здесь.

Как технология сказывается на ранжировании и стоит ли ее использовать на сайте?

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

  • некоторый контент может быть не проиндексирован роботами;
  • все страницы имеют одинаковые url;
  • определенные страницы могут отображаться у поисковых ботов не так, как у пользователей.

Но если вы будете применять технологию AJAX грамотно, то есть использовать её только для определенных фрагментов на сайте, то тогда у вас не будут возникать проблемы с индексацией.

Я бы не рекомендовал для всего сайта использовать технологию AJAX, такие сайты плохо индексируются поисковыми системами. А вот для части пользовательских элементов (например опросы, добавление комментариев), такая технология полезна и наоборот может повышать юзабилити вашего проекта.


Заключение

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

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

AJAX. Так что же это?

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

Впервые об AJAX я услышал весной этого года. Сразу заинтересовался этой технологией, и, как и положено в таких случаях, отправился в поиск за статьями, которые смогли бы ответить на возникшие у меня вопросы: «Что это такое? Как это работает? И в чем преимущества? Что нужно дополнительно установить на сервер/клиент для работы с AJAX? Как это можно использовать на своем сайте?». Прочтя с десяток статей, я получил ответ лишь на первые два вопроса, но на остальные ответа так нигде не нашел. И лишь после прочтения нескольких публикаций на английском языке я окончательно понял, что к чему. Это и подвигло меня к написанию данного материала.

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

По ходу изложения под термином «браузер» мы будем понимать браузеры: Internet Explorer 5.0+, Safari 1.3 и 2.0+, Netscape 7+, Opera 8.5+, Mozilla Firefox (плюс означает данную версию и более новые). Если речь станет заходить о других версиях, об этом будет упоминаться отдельно.»Что это такое? Как это работает и в чем преимущества?»

Для того чтобы понимать, какие преимущества дает AJAX, нужно знать, как работают веб-приложения в настоящее время. А работают они по клиент-серверной технологии (рис. 1).

Пользователь в браузере открывает какую-либо страницу page. На странице есть гиперссылки, которые ведут на другие страницы. При нажатии на любую из них браузер посылает запрос URL на сервер, с которым связана эта ссылка. Если в природе не существует сервера, связанного с этой ссылкой (например, когда, набирая URL в адресной строке, вы ошиблись при написании имени ресурса), или имеются проблемы связи с интернетом, то браузер сгенерирует страницу, подобную показанной на картинке (так она выглядит в Operа-е):

В случае существования сервера, но отсутствии на нем документа, указанного в запросе сервер сам создаст HTML страницу с описанием ошибки. Например, это может быть всем известная 404-ая ошибка (документ не найден). Или, если все верно, в ответ сервер отдаст новую страницу. В любом случае, в браузер будет загружена новая страница new_page, даже если по сравнению со старой на ней изменилась лишь пара слов. Довольно существенный минус данной технологии. Кроме того, работа ведется в синхронном режиме. То есть после того как браузер отослал на сервер запрос он ожидает от него ответ, и пока ответ не получен ничего предпринимать не будет. А порой ответ, и загрузка новой страницы может длиться слишком долго. Настолько долго, что пользователь может не дождаться загрузки страницы и просто закрыть её. Поэтому веб-программмисты прибегают к некоторым уловкам.

Например, используя DOM методы языка JavaScript [1], можно динамически изменять фоновый рисунок блока без перезагрузки страницы. Это обеспечивает необходимую интерактивность. При наведении курсора мыши на ячейку таблицы исходная фоновая картинка pic_1.gif заменяется pic_2.gif. При уходе курсора с ячейки происходит обратный процесс.

Или такой пример. В файл с изображением в формате JPEG можно записать (и прочитать) метаданные EXIF. Многие интернет фоторесурсы позволяют для отображаемой фотографии показать и эти данные. Но они появляются только после нажатия соответствующей кнопки на экране. При этом обновление страницы не происходит. Делается это очень просто. EXIF данные находятся на странице, но расположены в скрытом блоке с помощью CSS (display: none). При нажатии на кнопку блок становится видимым (display: block). Минусы очевидны: вместе со страницей передаются данные, которые, возможно, не будут использованы; отобразить можно лишь те данные, которые были присланы вместе со страницей.

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

Широкое распространение этого понятия началось с публикации в англоязычной части интернета статьи Джесси Джеймса Гарретта «Новый подход к веб-приложениям» в феврале 2005 года [2]. Статья писалась проектировщиком и для проектировщиков. Но со статьей ознакомилось много человек, в том числе и программисты. Которые и поспешили забросать автора электронными посланиями с вопросами о технических деталях реализации данного подхода. Писем, видимо, было настолько много, что уже в декабре того же года Гаррету в предисловии одной из книг по AJAX пришлось дать пояснения, что он не является программистом, и вопросы по конкретной реализации AJAX-приложений не к нему («The truth is, I’ve never built an Ajax application. Sure, I’ve worked on Ajax projects. . «).

Так в чем ключевое отличие AJAX технологии от классической клиент-серверной? Это наличие AJAX-движка, состоящего из двух частей: клиент-приложение (написанное на языке JavaScript) и сервер-приложение (написанное на любом серверном языке). Также немного другой логикой общения приложения-клиента с сервером (рис. 2).

Теперь при активации какого-либо элемента управления интерфейса браузер не делает запрос новой страницы с сервера, а запускает клиентскую часть. А уже приложение-клиент, в свою очередь, обращается к серверу через запрос requst и запрашивает только те данные, которые должны измениться на странице. После получения данных data от приложения-сервера клиент-приложение производит обновление части страницы через DOM методы без перегрузки всей страницы в целом. При этом возможна работа в асинхронном режиме. То есть когда пользователь не дожидается получения ответа с сервера и перегрузки страницы, а продолжается работать со страницей page, как ни в чем не бывало.

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

Тут мне хочется сделать небольшое лирическое отступление. Немало статей, в которых говорится о том, что AJAX это не технология, это подход к написанию приложения, идея. В принципе, верно, все, что нас окружает и есть идеи, но лично я настаиваю на термине «технология AJAX» для подчеркивания того факта, что это еще одна технология взаимодействия клиентского и серверного приложений (наряду с клиент- и файл-серверными технологиями).»Что нужно дополнительно установить на сервер/клиент для работы с AJAX?»

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

AJAX расшифровывается как Asynchronous JavaScript + XML (асинхронный JavaScript+XML) и уже это указывает, на что опирается технология. А опирается практически на все то же самое, что и другие веб-приложения:

  • HTML/XHTML [3]/[4] для написания разметки страницы;
  • CSS [5] для визуального оформления страницы;
  • DOM [1] для динамического изменения страницы в ответ на действия пользователя;
  • XML [6, 7] для обмена данными между клиентской и серверными частями;
  • JavaScript [8] собственно для написания AJAX движка, для обеспечения интерактивности;
  • XMLHttpRequest объект [9] для осуществления запросов к серверу.

Когда я решил поработать с AJAX-приложением, то подумал, что для поддержки нужно что-то поставить на сервер. Какой-либо модуль, может, в виде dll. Но как потом понял, ничего никуда устанавливать не нужно. Требуется лишь корректно написать движок и все. Возникает вопрос, а что за AJAX-движки распространяются в сети? Ответ прост: это уже готовые приложения, которые предназначены для каких-либо задач, и которые в готовом виде можно использовать на своем сайте. Например, существует библиотека для PHP, которая называется xAjax. Она включает в себя как клиентский скрипт, написанный на JavaScript, так и серверный скрипт, с которым JavaScript взаимодействует. Помните об этом! У меня был случай, когда человек думал, что AJAX-приложение это только JavaScript, использующий XMLHttpRequest объект, и все. Но это далеко не все. Есть еще скрипт на стороне сервера, логику работы которого также придется проектировать, а потом писать код.

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

Основа любого AJAX-приложения — это XMLHttpRequest объект, с его рассмотрения и начнем.

У данного объекта немало свойств и методов [10], но не все из них поддерживаются ведущими браузерам. Полная поддержка есть только в FireFox-е. Поэтому привожу только то, что будет работать в современных браузерах [9].

СВОЙСТВА:

readonly onreadystatechange function

Указывает функцию обратного вызова (callback function), которая будет вызываться каждый раз, когда будет изменяться readyState свойство. Несмотря на то, что вызывается функция, параметры передать в нее не получиться. Но об этом чуть позже в примере.

readonly readyState integer

Состояние запроса. Может принимать значения:

  • — не неинициализированный (uninitialized), метод open() еще не был вызван;
  • 1загружается (loading), метод send() еще не вызван;
  • 2загружен (loaded), метод send() был вызван и ответные заголовки/статус (свойство status) получены;
  • 3интерактивный (interactive), идет прием данных, которые доступны через свойство responseText;
  • 4завершенный (completed), в ответ на запрос получены не только все заголовки и статус, но и приняты все данные от сервера, ответ завершен.

readonly responseText string

Ответ сервера в виде обыкновенного текста. Только чтение.

readonly responseXML object

Ответ сервера в виде объекта DOM Document. Используется, если ответ сервера является корректным XML документом. Если документ не корректный, данные не получены или еще не оправлены, то свойство равно NULL. Только чтение.

readonly status string

Статус ответа. Например: 200 (ОК), 404 (документ не найден), 503 (временная перегрузка сервера).

МЕТОДЫ:

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


Возвращает все заголовки ответа сервера в виде отформатированной строки. Каждый новый заголовок начинается с новой строки.

string getResponseHeader(string header)

Вернуть заголовок с именем header.

void open(string method, string uri, [boolean asynch])

Подготавливает запрос по адресу uri методом method (POST или GET) с указанием режима asynch, асинхронный режим или нет. В результате вызова свойство readyState становиться равным 1.

Инициирует запрос к серверу. В запросе передаются данные data.

void setHeader(string header, string value)

Присваивает заголовку с именем header, значение value. Перед началом использования этого метода не забудьте вызвать open()!

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

Илон Маск рекомендует:  ReplaceTime - Процедура Delphi

Итак, у нас задача: нужно реализовать базу данных (БД) драйверов для различных устройств. При этом БД настолько большая, что нет смысла пересылать её приложению-клиенту и делать выборку из неё посредством JavaScript. Из-за изменения одного значения на странице перегружать её тоже нежелательно. Лично я для реализации данной задачи применяю для серверных скриптов PHP, а реализации БД применяю XML файл.

Структуру БД выбираю следующую:

Листинг БД файл data.xml: ATI 9600 128 DDR (128bit) ATI 9600 256 DDR (128bit) ATI 9600XT 256 DDR (128bit) ATI X800GTO 256 DDR (256 bit) ATI X1300 512 DDR(128bit) ATI X1300 256 DDR (128bit) NVidia 6600 128 DDR (128bit) NVidia 7800GS 256 DDR (256 bit) ATI X1300Pro 256 DDR (128bit) ATI X1600Pro 256 DDR (128bit) ATI X1800GTO 256 DDR (256bit) ATI X1600Pro 256 DDR (128bit) ATI X1900XT 512 DDR (256bit) NVidia 6600 Silencer 128 DDR (128bit) NVidia 6600GT 128 DDR (128bit) ATI X1900XT 512 DDR (256bit) ATI X1900XTX 512 DDR (256bit) ATI X800 SilentPipe 128 DDR(256bit) Nvidia 6600GT 128 DDR (128bit) NVidia 6600GT PassiveHeatsink 128 DDR (128bit) PCI-E ATI X550 128 DDR (128bit) PCI-E ATI X800GT Uniwise 256 DDR (256 bit) ATI X800GTO 256 DDR (128bit) Audigy 2 6.1 Audigy 2 ZS 7.1 X-Fi Platinum Audiophile 192 Revolution 5.1 Audiophile Audiophile Fast Track PIXMA iP 90 PIXMA iP4200 PIXMA iP6600D Picture Mate 100 Stylus Color C48 Stylus Color C87U DeskJet 1280 DeskJet 5443 Photo Smart 385 Laser Shot LBP2900 Laser Shot LBP3300 ML 1615 ML 2015 LaserJet 1018 LaserJet 2420 LaserJet 2420DN 4200F LiDE500F LiDE60 Perfection 1270 Perfection 3590 Perfection 4990 Bear Paw 2400CU Perfection 4990

Как в этой БД человек ведет поиск? Скорее всего, он от корневого элемента шел бы по дереву документа до тех пока в нужной ветви не нашел ссылку или убедился, что драйвера для данного устройства нет в базе. Также поступим и мы, используя для нахождения нужного узла или набора узлов выражения языка XPath [11].

Листинг формы для отправки данных index.htm:

В форме есть две переменные: path и flag. В первой хранится запрашиваемый путь, который отправляется на сервер. Так как один элемент в форме уже есть, то у этой переменной уже есть начальное значение. Вторая переменная служит для того, чтобы указать серверному скрипту, что из документа нужно извлечь определенный элемент Device. Кроме того, формат возвращаемых данных с сервера изменится.

Как я уже говорил, в функцию свойства onreadystatechange нельзя передать параметры. Точнее нельзя передавать параметры, которые являются объектами. Поэтому в самом начале создаем переменную, в которой и будем хранить ссылку на вызвавший функцию объект. Поскольку данная переменная находится в глобальной зоне видимости переменных, то обратиться к ней можно будет из любой части программы. На данный момент это самый разумный способ передать параметры call-back функции свойства onreadystatechange объекта.

А теперь разберем по шагам работу движка.

При наступлении события onblur (элемент select потерял фокус) вызывается функция sendData(), которая и подготавливает POST данные для оправки запроса. Кроме того, она формирует XPath выражение в зависимости от значения переменной flag=0 (например, //Devices/V ]).

Далее вызываем функцию sendRequest(), в которую передаем URL серверного скрипта, а также переменную типа строка, в которой содержатся готовые POST-данные. И первым делом создаем XMLHttpRequest объект, ссылку на который храним в переменной requestObj. Функция httpRequest() является кросс-браузерной, и будет работать во всех браузерах.

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

После отправки данных браузер ждет ответа с сервера. При каждом изменении свойства readyState будет вызываться функция responseServer(). Если статус ответа пришел с кодом «200» (все нормально), то будет вызвана функция addSelect(), которая и добавит полученный данные в DOM текущего документа. Все браузеры будут ждать ответа от сервера. Однако по истечении некоторого времени (time-out) принудительно назначат XMLHttpRequest.readyState = 4 и перестанут ожидать ответа с сервера. Например, для Opera значение тайм-аута составляет 10 секунд. Используя другие статусы, можно добавить в движок обработчик ошибок в ответах сервера.

Функция addSelect() добавляет в DOM текущего документа еще один узел DIV, в который и помещает ответ с сервера. Может возникнуть вопрос, почему используется свойство responseText, а не responseXML? У кого-то обязательно возникнет желание, используя это свойство, импортировать ответ сервера (а серверный скрипт в ответ присылает XML документ) прямо в DOM документа. Возникло такое желание и у меня. Я хотел импортировать корневой элемент присланного XML файла и все его потомки методом importNode. Но браузер импортировал элемент без потомков, даже несмотря на то, что второй параметр данного метода был установлен в true: importNode(Object importedNode,true). Поэтому не точная реализация этого метода пока исключает его использование.

Равнозначное решение было найдено, используя innerHTML метод элемента.

На этом работа клиентской части заканчивается. Оставшаяся нерассмотренной функция reset() призвана вернуть DOM документа к начальному виду. Достичь того же можно, обновив страницу по F5, но AJAX-движок как раз и пишется для того, чтобы избежать перезагрузки страницы. Поэтому все элементы, добавленные в документ скриптом, должны быть удалены из него также скриптом.

В ответ на запрос серверный скрипт формирует XML данные вида: childrenElementName_1 . childrenElementName_1

Если запрашиваемый узел имеет имя Device, то возвращается обычный отформатированный текст. Серверный скрипт написан на PHP V5 и не будет работать на более ранних версиях этого интерпретатора, так как расширение для работы с DOM было введено в этот язык только с пятой версии, и заменило собой расширение DOM XML, интерфейс которого не соответствовал спецификации. А теперь посмотрим на код серверного скрипта.

AJAX с помощью jQuery. Руководство для начинающих. Часть 1

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

Разработка кода для JavaScript для реализации AJAX с нуля является весьма трудоемким и нудным процессом. Однако множество библиотек JavaScript, включая jQuery, имеют отличную высокоуровневую реализацию AJAX в виде набора методов и функций, которые облегчают и ускоряют построение веб сайтов.

В данной серии уроков мы рассмотрим основы построения запросов AJAX с помощью jQuery. Будут раскрыты следующие темы:

  • Что такое технология AJAX? Как она работает? В чем ее преимущества?
  • Как выполнить различные типы запросов AJAX с помощью jQuery?
  • Отправка данных на сервер с помощью запросов AJAX.
  • Обработка и выделение данных из ответов AJAX с сервера.
  • Как настроить обработку AJAX в jQuery и изменить установки по умолчанию?

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

Что такое AJAX и чем он полезен?

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

  • Обычная веб страница содержит ссылки или формы, которые при нажатии или отправке создают запрос к новому адресу URL на веб сервере. Сервер отправляет полностью новую страницу HTML, которую затем выводит браузер, заменяя оригинальную страницу. Такой подход занимает много времени и плохо действует на посетителя, так как тому приходится ждать загрузки новой страницы.
  • При использовании технологии AJAX, JavaScript код делает запрос к URL на сервере. Код также может отправить данные вместе с запросом. Затем JavaScript код обрабатывает ответ сервера и действует соответствующим образом. Например, могут быть произведены вычисления с возвращаемыми данными, добавлен или обновлен виджет на странице, выдано сообщение посетителю об обновлении базы данных на сервере.

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

Фундаментальным моментом AJAX является объект JavaScript XMLHttpRequest . Он предоставляет ряд методов, таких как open() , send() и onreadystatechange() , которые могут быть использованы при отправке запросов AJAX на сервер и обработке ответов в фоновом режиме.

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


Для тех кто более любопытен, слово AJAX является аббревиатурой из первых букв выражения на английском языке «Asynchronous JavaScript And XML» (Асинхронный JavaScript и XML). Однако, термин может ввести в заблуждение — запрос не обязательно должен быть асинхронным и необязательно использовать XML для отправки данных.

Делаем запрос GET с помощью $.get()

Метод jQuery $.get() предоставляет легкий и удобный способ сделать простой запрос AJAX. Он выполняет запрос с помощью метода HTTP GET (используется для получения URL, например страниц и изображений), вместо метода POST (который традиционно используется для отправки данных формы).

В простейшей форме можно вызвать метод так:

. где url является адресом URL ресурса, от которого ожидается ответ. Обычно это скрипт на стороне сервера, который выполняет какие-нибудь действия и может возвращать некие данные:

. хотя можно также запросить статический документ:

При запросе URL, вы можете отправить данные с запросом. Вы можете передать данные в строке запроса, так же как и при обычном запросе GET:

Корректно будет сделать то же самое передав объект данных в качестве второго параметра методу $.get() . Объект данных должен содержать информацию в виде пар имя свойства/значение свойства. Например:

В качестве альтернативы вы можете передать данные методу $.get() как строку:

Получаем данные с сервера

До сих пор мы рассматривали примеры использования $.get() только для отправки запросов на сервер, игнорируя любой ответ, который может сформировать скрипт на серверной стороне. Но в большинстве случаев ваш JavaScript код будет ожидать ответ от скрипта на серверной стороне и обрабатывать полученные данные.

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

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

Как только возвратная функция создана, вы можете передать ее в качестве третьего аргумента в метод $.get() :

Определяем тип данных ответа

Обычно, серверная сторона передает данные в одном из нескольких типовых форматов, включая XML, JSON, JavaScript, или HTML. По умолчанию jQuery пытается определить наиболее подходящий формат и разобрать данные соответствующим образом. Но лучше явно определить формат.

Для указания формата надо передать четвертый аргумент методу $.get() . Данный аргумент может быть строкой из следующего списка:

Например, если вы знаете, что скрипт сервера возвращает данные в формате JSON, то вызываете метод $.get() следующим образом:

Пример использования метода $.get()

Здесь приводится пример создания запроса AJAX с помощью метода $.get() и простая обработка ответа. Для работы примера нужно на сервере создать простой текстовый файл с именем getForecast.txt , содержащий следующий текст:

Данный файл будет имитировать ответ в формате JSON, который мог быть сформирован скриптом прогноза погоды на сервере.

Затем создаем страницу showForecast.html в той же папке что и getForecast.txt :

Открываем showForecast.html в браузере и нажимаем кнопку «Получить прогноз погоды». В окне сообщения получим прогноз погоды с нашего сервера.

Вот как работает данный код:

  1. showForecast.html содержит элемент button «Получить прогноз погоды» с ID getForecast .
  2. JavaScript вверху страницы выполняется как только страница будет загружена и DOM окажется в состоянии готовности.
  3. Код JavaScript сначала привязывает обработчик события click к кнопке #getForecast . Данный обработчик выполняет AJAX запрос GET к getForecast.txt , передавая название города и дату для прогноза. Также определяется возвратная функция success(), которая будет выполняться по завершению запроса. Формат возвращаемых сервером данных определяется как JSON.
  4. Файл getForecast.txt возвращает браузеру данные прогноза в формате JSON.
  5. Вызывается функция success() . jQuery разбирает данные JSON, полученные от getForecast.txt , конвертирует их в объект JavaScript, и передает их в функцию.
  6. Функция возвращает объект данных forecastData и выводит сообщение, которое содержит несколько свойств объекта, включая название города, прогноз и температуру.

Простой пример в несколько строк демонстрирует работу запроса AJAX с использованием метода $.get() .

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/ajax-with-jquery-a-beginners-guide/
Перевел: Сергей Фастунов
Урок создан: 5 Марта 2012
Просмотров: 162887
Правила перепечатки

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

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

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Веб-программирование. Ajax скрипты

Что такое Ajax скрипты? Для чего применяются Ajax скрипты? Нужно ли использовать Ajax при создании сайтов для бизнеса? Специалисты студии веб-дизайна WebStudio2U дают ответы на эти вопросы.

Ajax — Asynchronous JavaScript + XML (асинхронный JavaScript+XML) — это относительно новый подход (впервые термин «Ajax» встречается в статье Джесси Джеймса Гарретта «Новый подход к веб-приложениям», 2005 г.) к построению интерактивных пользовательских интерфейсов веб-приложений.

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

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

Ajax — это не какая-то одна определенная технология, а концепция использования нескольких смежных технологий. Так, для реализации на сайте Ajax необходимо связать воедино стандартизованное представление с использованием XHTML и CSS, объектную модель документа (Document Object Model), JavaScript-код, асинхронное получение данных с использованием XMLHttpRequest, обмен и управление данными через XML и XSLT.

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

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

Во-вторых, Ajax приводит к некоторой потере функциональности браузера: пользователям становятся недоступны кнопки браузера «вперед»/«назад», недоступно создание закладок. Это серьезный удар по юзабилити сайта, который может свести на нет преимущества использования Ajax.

Ajax скрипты имеют довольно широкую область применения. Например, с помощью Ajax можно:

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

Нужны ли Ajax скрипты на сайтах для бизнеса?

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

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

Все это свидетельствует о том, что доверять разработку Ajax скриптов для бизнес-сайта следует только профессиональным веб-программистам. Именно профессионалы благодаря своему большому практическому опыту знают, как обойти «подводные камни» Ajax и выполнить задачу, поставленную перед сайтом.

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

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL