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

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

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

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

Использование объекта XMLHttpRequest для обращения к серверу и получения от него ответа в фоновом режиме по http протоколу.

Динамическое обновление самой страницы через программные интерфейсы ее объектной модели (Document Object Model , DOM ) в коде . Все вместе это называется .

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

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

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

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

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


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


• Стандартные сервисы учета посетителей и просмотра страниц могут формировать неверную статистику.


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

Объект XMLHttpRequest

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

Function createRequest() { var request = null; if (window.XMLHttpRequest) { request = new XMLHttpRequest(); } else if (window.ActiveXObject) { try {request = new ActiveXObject("Msxml2.XMLHTTP");} catch (ex) { try { request = new ActiveXObject("Microsoft.XMLHTTP");} catch (ex){return null;} } } return request; }

//Создаем запрос var request = createRequest() //Передаем тип http запроса (GET или POST), URL запроса и режим: асинхронный запрос (true) //или синхронный (false), когда на время выполнения запроса работа браузера приостанавливается. request.open("GET", url, true); //Определяем обработчик завершения запроса request.onreadystatechange = onSuccess; //Выполняем запрос request.send();

Где функция обработки успешного завершения onSuccess запроса может выглядеть примерно следующим образом:

Function onSuccess () { try { if (request.readyState == 4) { //Запрос выполнен if (request.status == 200) { //и выполнен успешно //здесь что-то делаем с результатом запроса var result = request.responseText; } else { //здесь обрабатываем неудачное выполнение запроса alert(request.statusText); } } } catch(ex) {} }

AJAX и jQuery

В принципе ничего сложного в приведенном выше примере нет, но обратите внимание на функцию createRequest . Способность программного кода работать одинаково корректно под управлением любого браузера называется кроссбраузерностью . Чтобы ваш программный код стал кроссбраузерным нужно приложить серьезные усилия: необходимо знать нюансы каждого браузера и пути разрешения проблем несовместимости его инфраструктуры с применяемыми вами программными средствами. Популярная среди веб программистов Javascript библиотека JQuery не только облегчает работу с объектом XMLHttpRequest , но и гарантирует (старается это делать) кроссбраузерность вашего решения. В jQuery есть несколько методов для работы с технологиями AJAX. В первую очередь это сам метод ajax , который является наиболее универсальным и подходит для составления любых запросов к серверу. Методы get и post внутри себя также используют метод ajax (являются его обертками), и предназначены, как несложно догадаться по их названию, для отсылки серверу GET и POST запросов соответственно. Ниже представлены примеры JavaScript кода использования AJAX средствами jQuery.

Function loadArticle_ajax(type, id) { $..php", data: ({article_id:id}), success: OnComplete, error: OnFail }); } function loadArticle_get(id) { $..php", {article_id:id}, OnComplete) .fail(OnFail); } function loadArticle_post(id) { $..php", {article_id:id}, OnComplete) .fail(OnFail); } function OnComplete(html) { $("#content").html(html); } function OnFail(response) { $("#content").html("Ошибка загрузки данных:
" + response.statusText+"
" + response.responseText); }

Приведенные функции выполняют параметризованный http запрос по ссылке (URL) следующего вида:

Http://сайт/readarticle_content.php?article_id=id

Извлекаемое содержимое зависит от параметра id . Если в вашем случае никаких параметров передавать не нужно, то оставьте в качестве соответствующего аргумента пустое множество {}. Посмотреть на работу примера можно . На этом про AJAX и jQuery у меня все.

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

Надеюсь, она будет полезна для понимания, что такое AJAX и с чем его едят.

Что такое AJAX ? Пример реализации.

AJAX, или, более длинно, A synchronous J avascript A nd X ml - технология для взаимодействия с сервером без перезагрузки страниц.

За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.

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

Вот код кнопки в примере выше:

При нажатии она вызывает функцию vote , которая отправляет запрос на сервер, ждет ответа, а затем показывает сообщение об этом в div "е под кнопкой:

Здесь будет ответ сервера

Для обмена данными с сервером используется специальный объект XmlHttpRequest , который умеет отправлять запрос и получать ответ с сервера. Кроссбраузерно создать такой объект можно, например, так:

Function getXmlHttp(){ var xmlhttp; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest!="undefined") { xmlhttp = new XMLHttpRequest(); } return xmlhttp; }

Более подробно о деталях реализации AJAX с использованием XmlHttpRequest и других транспортов можно почитать в разделе про общение с сервером .

Здесь мы не будем на этом останавливаться и перейдем сразу к функции vote:

// javascript-код голосования из примера function vote() { // (1) создать объект для запроса к серверу var req = getXmlHttp() // (2) // span рядом с кнопкой // в нем будем отображать ход выполнения var statusElem = document.getElementById("vote_status") req.onreadystatechange = function() { // onreadystatechange активируется при получении ответа сервера if (req.readyState == 4) { // если запрос закончил выполняться statusElem.innerHTML = req.statusText // показать статус (Not Found, ОК..) if(req.status == 200) { // если статус 200 (ОК) - выдать ответ пользователю alert("Ответ сервера: "+req.responseText); } // тут можно добавить else с обработкой ошибок запроса } } // (3) задать адрес подключения req.open("GET", "/ajax_intro/vote.php", true); // объект запроса подготовлен: указан адрес и создана функция onreadystatechange // для обработки ответа сервера // (4) req.send(null); // отослать запрос // (5) statusElem.innerHTML = "Ожидаю ответа сервера..." }

Поток выполнения, использованный vote, довольно типичен и выглядит так:

Функция создает объект XmlHttpRequest

назначает обработчик ответа сервера onreadystatechange

открывает соединение open

отправляет запрос вызовом send (ответ сервера принимается срабатывающей в асинхронном режиме функцией onreadystatechange)

показывает посетителю индикатор состояния процесса

Серверный обработчик, к которому обращен AJAX-запрос (в примере это vote.php) по сути ничем не отличается от обычной страницы. AJAX-запрос, отправляемый XmlHttpRequest , ничем не отличается от обычного запроса.

Просто текст, который возвращает сервер, не показывается как HTML, а читается и обрабатывается функцией onreadystatechange .

Смысл AJAX - в интеграции технологий

Технология AJAX использует комбинацию:

• (X)HTML, CSS для подачи и стилизации информации
• DOM-модель, операции над которой производятся javascript на стороне клиента, чтобы обеспечить динамическое отображение и взаимодействие с информацией
• XMLHttpRequest для асинхронного обмена данными с веб-сервером. В некоторых AJAX-фреймворках и в некоторых ситуациях, вместо XMLHttpRequest используется IFrame, SCRIPT-тег или другой аналогичный транспорт.
• JSON часто используется для обмена данными, однако любой формат подойдет, включая форматированный HTML, текст, XML и даже какой-нибудь EBML

Типичное AJAX-приложение состоит как минимум из двух частей.

Первая выполняется в браузере и написана, как правило, на JavaScript, а вторая - находится на сервере и написана, например, на Ruby, Java или PHP .

Между этими двумя частями происходит обмен данными через XMLHttpRequest(или другой транспорт).

Что я могу сделать с помощью AJAX ?

Смысл AJAX - в интерактивности и быстром времени отклика.

Небольшие элементы управления

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

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

Например, дерево, узлы которого подгружаются по мере раскрытия.

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

• Проверка ошибок ввода формы ДО сабмита

  На сервер передается имя пользователя, результат проверки возвращается на страницу.

• "Мгновенная" загрузка

  Браузер обращается к серверу только за данными, а не обновляет весь громоздкий интерфейс

• Автоматическая "доставка" писем в открытую папку

  Время от времени отправляется запрос на сервер и, если пришли новые письма, они появляются в браузере.

• Автодополнение

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

Результат: обширная популярность, высокий спрос на account"ы с момента открытия.

Синхронная модель VS Асинхронная модель

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

Условно говоря, мы действуем так:

закидываем удочку

ждем, когда клюнет

клюнуло - включаем подтяжку спиннинга

При асинхронном подходе мы:

вешаем на удило специальный детектор клева, задаем ему тянуть спиннинг, когда клюнет

закидываем удочку

занимаемся другими делами

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

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

В асинхронном варианте - мы сначала задали программу, что делать при клеве, а затем опустили удочку ловить и занялись другими делами.
Например, поставили еще 5 таких удочек.

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

Существуют приемы, облегчающие асинхронное программирование, например, отложенный объект Deferred (Twisted,Dojo,Mochikit), но об этом - в отдельной статье.

Синхронная и асинхронная модель в AJAX

Вернемся к нашим баранам: браузеру, серверу и, скажем, базе данных.

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

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

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

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

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

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

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

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

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

Особенно в случае нескольких одновременных асинхронных запросов, нужно заботиться об очередности выполнения и ответа (race-conditions) и, в случае ошибки, оставлять приложение в целостном (consistent) состоянии.

Особенности асинхронной модели

• Сложность в реализации
  • Недостаточные возможности браузера (javascript)
  • Асинхронная модель сложнее для отладки
• Race conditions
  • Неопределена последовательность выполнения
  • Можно делать много одновременных задач ("удочек"), но задача, начатая первой, может окончиться последней.
• Реакция тут же, но неизвестно, какой будет результат. Усложнена обработка ошибок
  • Ошибок коммуникации - разрыв связи, и т.п.
  • Пользовательских ошибок - например, не хватило привилегий
• Контроль целостности (bugproof)
  • Например, редактор отправил асинхронный запрос на удаление ветки дерева. Добавление в нее нужно отключить, пока не придет ответ сервера. Если вдруг не хватило привилегий, то операция не удалась.
• Интерактивность
• Быстрый интерфейс

Плюсов всего два, зато какие! Овчинка стоит выделки.

Асинхронный drag"n"drop.

Иногда для асинхронных операций необходимо делать различные "финты ушами". Например, хочется сделать drag"n"drop в дереве, т.е перетаскивать статьи из одного раздела в другой мышкой, и чтобы они на сервере в базе данных меняли родителя.

Drag"n"drop - это "взял мышей объект - положил куда надо - готово". Но в асинхронной модели не может быть все прям сразу "готово".
Надо проверить привилегии на сервере, проверить, существует ли еще объект, вдруг его удалил другой пользователь.

Надо как-то показать, что процесс пошел, но результат "ща будет..". А как? В асинхронной модели указатель мыши не может просто так зависнуть над объектом, превратившись в часики.

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

Stale context, устаревший контекст

В примере с drag"n"drop также затронута проблема "stale context" - устаревшего контекста.

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

Как правило, для преодоления таких казусов используются следующие средства:

Политика редактирования

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

Локинг и/или версионный контроль

Локинг - блокирование редактируемых документов.

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

Более подробно о локинге и версионности можно почитать, например, в документации к системе версионного контроля Subversion .

Автообновление контекста

Проблема устаревшего контента может быть на 99% решена при помощи мгновенного автообновления.

Браузер держит постоянное соединение с сервером (или делает время от времени корректирующие запросы) - и нужные изменения отсылаются по этому каналу.

Например, в раскрытую ветку дерева иногда подгружаются новые статьи, в открытый почтовый интерфейс - новые письма.

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

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

Общая информация

Как расшифровывается AJAX? Что это значит? Данное сокращение является аббревиатурой. Она расшифровывается как Asynchronous Javascript and XML ("Асинхронный Яваскрипт и ИКСМЛ"). Часто можно увидеть или услышать информацию, что это новая технология. Но это не совсем так. Дело в том, что Javascript и XML существуют уже довольно длительное время, тогда как "Аякс" является синтезом этих технологий. Чаще всего он используется вместе с термином Web 2.0 и подразумевается как использование передовых методов разработки.

А чем особенность?

Итак, мы уже имеем общее представление о том, чем является AJAX. Что это даёт нам на практике? Почему ведутся активные разговоры о его применении? Особенность данной технологии - в том, что при её использовании не нужно обновлять всю страницу при первой же потребности. Ведь можно запросить новые данные только для её части. Это и удобно (ведь меньше времени приходится ждать), и экономично (для тех, у кого не безлимитный интернет). Правда, для информирования пользователя о происходящем обновлении желательно использовать хотя бы индикатор загрузки или текстовые сообщения, которые проинформируют про новые данные с сервера. В качестве минусов технологии часто упоминают тот факт, что она не поддерживается устаревшими и текстовыми браузерами. Да и возможность отключения технологии Javascript есть у пользователя, чем многие и пользуются. Поэтому не следует злоупотреблять AJAX. Что это может дать, если не предусмотреть альтернативные методы представления информации? В лучшем случае информация просто не будет отображена на сайте. В худшем - его внешний вид так пострадает, что пользователь на него больше не вернётся.

Преимущества "Аякса"

Данная технология предлагает два метода, по которым может быть реализована веб-страница. Первый предусматривает внесение изменений без перезагрузки. Это может быть осуществлено с помощью динамических обращений к серверу. Второй предусматривает использование отдельных технологий, наиболее популярной из которых является XMLHttpRequest. Относительно самих преимуществ "Аякса" можно сказать следующее:

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

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

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

Удобно использовать для реализации целого ряда задумок.

Обмен данными

Вот, допустим, нужна форма обратной связи, с помощью которой можно будет проконсультировать клиентов. Как её можно сделать? Для начала необходимо позаботится о «носителе» информации. Для этого необходимо создать объект XMLHttpRequest. Он выступает в роли посредника между сервером и браузером пользователя. С помощью этого объекта будут отправляться запросы, а также получаться ответы на них. Для непосредственного обмена данными нам нужен AJAX PHP. Этот инструментарий может быть реализован с помощью GET- или POST-запросов. В таком случае необходимые аргументы будут передаваться непосредственно через URL. Одновременно будет запущена функция, следящая за тем, чтобы передача данных не прерывалась. Но какой AJAX-запрос реализовать? Рекомендуют использовать POST. Благодаря ему можно передавать неограниченное количество данных, к которым, к тому же значительно сложней получить доступ.

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

Как же функционирует асинхронный Javascript и XML на практике? Давайте разберёмся с этим на примере. Относительно структуры постройки необходимо позаботиться о том, чтобы клиентская часть обеспечивала весь нужный функционал для безопасного обмена данными. Она должна предоставлять необходимые методы для передачи информации выбранными способами. Серверная же часть должна обеспечивать обработку полученных данных, и, уже основываясь на них, генерировать новую информацию, чтобы в последующем передать её к клиенту. Самым распространённым взаимодействием данного типа является работа с базой данных. Ранее мы уже упомянули такой элемент многих бизнес-сайтов, как форма обратной связи. Преимуществом "Аякса" в данном случае будет то, что он проводит асинхронную передачу данных. Иными словами, пока информация пересылается, пользователь может совершать все необходимые ему действия. Ориентируясь на специфику каждого конкретного случая, необходимо решить, нужно ли об этом процессе информировать посетителя сайта. Относительно той же формы обратной связи следует сказать, что в данном случае можно написать «оператор набирает ответ», или нечто подобное.

Ответ сервера

Он может приходить не только благодаря XML, как это можно подумать из-за названия технологии. Кроме этого, он может передаваться как обычный текст или JSON. В первом случае полученную информацию можно сразу же выводить на страницу. Если же используется XML, то необходимо позаботиться о том, чтобы AJAX-файл был должным образом обработан в браузере клиента. Все данные в этом случае преобразовываются к (X)HTML. Когда же используется необходимо выполнить полученный код, чтобы получить полноценный При этом необходимо проявить осторожность и учитывать тот факт, что многие злоумышленники любят передавать посредством этой технологии вредоносный код. Поэтому необходимо предусмотреть процедуру проверки полученных данных перед их обработкой. Особенности реализации для разных браузеров могут немного разниться, но, в целом, схема действия тут одна.

Делаем запрос к серверу и обработку ответа

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

Первоначально необходимо создать и удостовериться в том, что существует XMLHttpRequest.

Затем инициализируется соединение с сервером.

Посылаем к нему запрос.

Дожидаемся, пока придут данные, и обрабатываем их.

Следует рассказать о некоторых особенностях относительно создания объекта. Он может быть инициирован в любом месте, где это только возможно в рамках языка программирования. Но если ему присвоить статус глобального, то в какой-то один момент времени для него будет возможной только работа с одним запросом. Этому моменту необходимо уделить пристальное внимание. Относительно обработки - здесь ориентируемся по выбранному инструменту. Так, при XML данные необходимо обработать DOM-функциями и представить пользователю уже конечный результат в HTML. А что же делать с JSON-ном? Следует понимать, что он является объектной нотацией Javascript. Что это значит? Благодаря JSON можно представлять объект как строку. Но при этом необходимо помнить, что данный способ не является безопасным в полной мере, и необходимо будет учитывать кучу факторов. Но, в целом, он является весьма легким.

Серверные языки программирования

Практически любое веб-приложение использует их в той или иной мере. Для передачи данных наиболее популярным является PHP. На нём обычно пишут файлы для сайтов, где не является критически важным скорость передачи информации, а отдается предпочтение балансу между нею и надёжностью. Методы передачи XMLHttpRequest рассматривались выше.

Настраиваем сервер

Какие программы необходимы для того, чтобы полноценно работал AJAX? Что это нам даст? Для чего они нужны? Чтобы получить ответы на эти вопросы, следует ознакомиться со следующим списком:

HTML/XHTML. Они нужны для того, чтобы сервер распознавал разметку страницы.

CSS. Этот инструмент необходим для визуального подбора оформления страницы.

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

XML. Необходим для пересылки данных между клиентом и сервером.

JavaScript. Нужен для создания движка "Аякса" и обеспечения интерактивности.

XMLHttpRequest. Объект, посредством которого будут пересылаться запросы к серверу.

Использование на сайте

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

О базе данных

Необходимо проработать её структуру. А что делать, если передаются параметры, которые являются объектами? В таком случае необходимо предусмотреть создание переменной, где будет находиться ссылка не него, на случай вызова со стороны функции. Для возможности обращения к ней из любого места кода её нужно сделать глобальной. Для удобства желательно использовать Конечно, это не обязательно. Но всё же использование СУБД позволит работать с данными более удобно и эффективно.

Прорабатываем работу движка

Как же всё будет происходить? Итак, наступает определённое событие, которое будет вызывать особенную функцию. Она подготовит GET или POST-данные, которые будут пересылаться. Затем вызывается функция, которая сделает обращение к URL серверного скрипта. В ней необходимо предусмотреть создание XMLHttpRequest-объекта. Ссылку на него следует хранить в переменной. После того как данные были отправлены серверу, необходимо ждать от него ответа. Для этого можно включить «прослушку» до получения информации (если известно, что придёт и когда) или предусмотреть функцию, которая будет всегда готова принять данные. Первый вариант менее надёжен в случае возникновения внештатной ситуации. Вторая же реализация - более затратная с точки зрения ресурсов. Хотя, если это делается только относительно одной переменной, на быстром интернете это не скажется. Но если их сотни и тысячи, и они будут иметь большой размер, - тогда это будет другое дело. Поэтому необходимо искать баланс между пользованием имеющимися ресурсами и результативностью. Ведь следует понимать, что не все обладают оперативной памятью на 16 Гб. Для этого может устанавливаться определённое время ожидания, после которого подставляются предыдущие данные или информация о том, что сервер недоступен в данный момент времени.

Особенности

Когда с помощью "Аякса" создаётся интерфейс для страницы или приложения, то необходимо позаботиться о том, чтобы полученный результат хорошо работал как на разных операционных системах, так и на различных браузерах. В первом случае неоценимую помощь смогут оказать эмуляторы. Во втором случае достаточно будет просто установить различные программы и на них проверить работоспособность кода. Также необходимо предусмотреть определённые действия и на случай, если используемые пользователем браузеры будут устаревшими или он отключит необходимые настройки. В таких случаях следует позаботиться о выводе на страницу текста, в котором указана причина того, почему просмотр сайта в данном случае не является возможным. Да, сейчас подавляющее большинство людей использует современную технику, но не стоит полностью выпускать из внимания вероятность и того, что несколько процентов посетителей будут использовать несколько устаревшее программное обеспечение. А в масштабах бизнеса это может иметь значительные последствия.

Заключение

Вот и подходит к логическому окончанию эта статья. Если говорить про "Аякс" в целом, то этот инструмент позволяет создавать очень привлекательные и многофункциональные сайты, которые быстро работают и при грамотной верстке доставляют своим пользователям одно удовольствие. Можно не сомневаться, что в будущем появятся ещё более совершенные технологии, но пока будем использовать то, что у нас есть. По мере усовершенствования языков программирования и их методов вполне возможным является и такой вариант, что станут доступными способы реализации, которые позволят создавать ещё более качественный продукт. Но как бы там ни было, работать нужно сейчас с тем, что есть. И имя этому - "Аякс".

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 основных этапа:

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

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

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

JavaScript получает ответ, расшифровывает его и выводит пользователю.

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

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

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

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

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

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

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

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

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

Недостатки AJAX

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

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

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

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

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

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

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

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

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

Перепишите ссылки в URL. После каждой # необходимо поставить восклицательный знак.
Например, ссылку http://www.site.ru/#uslugi необходимо преобразовать в http://www.site.ru/#!uslugi.

Для всех страниц AJAX версию HTML следует сделать доступной по определенному адресу. В нем установленное нами сочетание «#!» Необходимо заменить на «?_escaped_fragment_=». (В нашем примере http://www.site.ru/?_escaped_fragment_=uslugi).

На странице AJAX нужно проставить тег: .

Карта сайта в формате.xml ускорит индексацию его страниц.

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

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

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

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

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

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

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

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

Технология AJAX базируется на использовании объекта XMLHttpRequest(), который позволяет отправлять и получать информацию в различных форматах включая XML и HTML. Реализация технологии состоит из клиентской и серверной частей. Клиентская часть выполняется в браузере пользователя и пишется на JavaScript, а серверная выполняется на веб-сервере и пишется на любом языке веб-программирования: php, asp, perl и др.

Клиентский JavaScript-код - это основной код, выполняющий Ajax-приложение и обеспечивающий взаимодействие с сервером. Клиентская часть выполняет сбор информации для отправки запроса серверу, устанавливает соединение с сервером, посылает запрос, получает ответ и обрабатывает ответ сервера. Рассмотрим реализацию клиентской части подробней.

1. Создание объекта запроса XMLHttpRequest .
В Internet Explorer и других браузерах создание объекта XMLHttpRequest отличается. Во всех браузерах кроме Internet Explorer этот объект создается очень просто: xmlHttp = new XMLHttpRequest(); Браузер Internet Explorer для создания объекта запроса использует анализатор MSXML. Кроме того существует две разных версии MSXML. Универсальный метод создания объекта запроса XMLHttpRequest для всех браузеров выглядит следующим образом:

var xmlHttp=null;
try
{


}
catch (e)
{

try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}

Создание объекта запроса происходит в строках xmlHttp = new XMLHttpRequest(); , xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); и xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); . Остальные строки обрабатывают ошибки.

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

Чтобы указать функцию которая будет обрабатывать ответ, необходимо свойству onreadystatechange присвоить имя JavaScript функции: xmlHttp.onreadystatechange = MyFunc; . Причем имя функции указывается без скобок.

Чтобы открыть соединение с сервером необходимо вызвать функцию open() . Эта функция имеет три обязательных параметра:

• метод запроса HTTP - обычно используют "GET" или "POST" , но можно использовать любой другой метод в соответствии с HTTP стандартами ;
• url запроса - адрес скрипта на сервере, который обрабатывает запрос;
• асинхронность запроса - TRUE или FALSE, если TRUE, то запрос асинхронный и пользователь сможет продолжать работу со страницей.

Для отправки запроса необходимо вызвать метод send() , параметром которого могут быть любые данные, которые вы хотите отправить на сервер. Данные должны быть сформированы в строку запроса param1=1¶m2=2¶m3=3 .

Если данные отправляются методом POST, то необходимо изменить MIME-тип запроса: xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); .

Выполнение запроса с использованием метода GET :

/*Устанавливаем соединение*/
xmlHttp.open("GET", "example.php?param1=1¶m2=2", true);
/*Указываем функцию*/

/*Отправляем запрос*/
xmlHttp.send(null);

И с использование метода POST :

/*Устанавливаем соединение*/
xmlHttp.open("POST", "example.php", true);
/*Меняем MIME-тип*/
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
/*Указываем функцию*/
xmlHttp.onreadystatechange = MyFunc;
/*Отправляем запрос*/
xmlHttp.send("param1=1¶m2=2");

3. Обработка ответа сервера .
Отправляя запрос, мы указали имя функции, обрабатывающей ответ сервера: xmlHttp.onreadystatechange = MyFunc; . Для начала, эта функция должна проверять статус запроса. Это можно сделать с помощью свойства readyState . Если xmlHttp.readyState = 4 , то ответ от сервера получен и можно приступать к его обработке. Далее необходимо проверить статус HTTP-ответа с помощью свойства status . Если xmlHttp.status = 200 значит все в порядке и можно продолжить обработку данных. Получить доступ к данным можно с помощью свойств responseText - в виде текста, либо responseXML - в виде объекта XMLDocument.

Полный пример работы Ajax-приложения:

/*переменная для хранения объекта запроса*/
var xmlHttp=null;
/*создание объекта запроса*/
function createRequest()
{
try{
//создаем объект запроса для Firefox, Opera, Safari
xmlHttp = new XMLHttpRequest();
} catch(e){
//создаем объект запроса для Internet Explorer
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e){
xmlHttp = null;
}
}
}

If(xmlHttp == null)alert("Браузер не поддерживает AJAX!");
}

/*отправка запроса*/
function sendRequest()
{
/*получаем объект запроса*/
createRequest();
/*Устанавливаем соединение*/
xmlHttp.open("GET", "ajax.php?param1=1¶m2=2", true);
/*Указываем функцию*/
xmlHttp.onreadystatechange = MyFunc;
/*Отправляем запрос*/
xmlHttp.send(null);
}

/*обрабатываем ответ*/
function MyFunc()
{
if(xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
alert(xmlHttp.responseText);
} else {
alert("Ошибка обработки запроса!");
}
}
}

Серверная часть может быть написана на чем угодно. Возвращаемое значение xmlHttp.responseText формируется стандартным выводом. Пример серверной части на php:

Попробуйте пример в действии:

И в дополнение некоторые справочные материалы по объекту XMLHttpRequest :
Методы класса XMLHttpRequest

Свойства класса XMLHttpRequest