Как работает ajax. Основы 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 сценариев может приводить к тому, что ваша страница будет вести себя по разному под управлением различных браузеров, и это поведение будет не всегда корректно.
Теперь я кратко опишу сценарий того, как используется 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 (Asynchronous JavaScript and XML) - подход к построению пользовательских интерфейсов веб-приложений, при котором web-страница, не перезагружаясь, сама догружает нужные пользователю данные. AJAX - один из компонентов концепции DHTML.
Что же дает нам эта технология. В настоящее время разработка WEB приложений стремится к разграничению клиентской части и серверной, этим и обуславливается повсеместное использование шаблонов, таких как Smarty и XSLT. Сейчас проекты становятся сложнее, и переплетать между собой различные технологии становиться слишком дорого для времени разработчика. Так, например, все стили форматирования выносятся в CSS или в XSL файлы, HTML или XML данные хранятся в других разделах, серверные обработчики в третьих, базы данных в четвертых. И если еще 5-6 лет назад практически везде можно было увидеть переплетение всего этого в одном файле, то сейчас это все чаще становиться редкостью.
При разработке более сложных проектов возникает необходимость в структурированности и удобочитаемости кода. Не следует засорять код программиста кодом верстальщика, а код верстальщика - правками дизайнера, и так далее.
Возникает необходимость в разграничении работы. Так, например, дизайнер будет делать свою работу, верстальщик свою, программист свою, и при этом никто друг другу мешать не будет. В итоге каждому участнику проекта достаточно будет знать только те данные, с которыми ему придется работать. В таком случае производительность группы и качество проекта повышается в разы. В настоящее время эта проблема с успехом решается путем использования шаблонов, однако это тоже создает определенные трудности, так как чтобы, скажем, подключить Smarty, необходимо подключить программный модуль обработки шаблонов, и четко связать со структурой проекта. А это далеко не всегда возможно и требует определенных затрат. Немного проще при использовании связки XML + XSL, так как они предоставляют больше возможностей, однако это альтернатива, не более. А что если посмотреть в сторону чего-то радикально нового, что позволяло бы объединить все лучше, используя возможности того, что есть? Попробуйте представить JavaScript, который обладает всем возможностями PHP или Perl, включая работу с графикой и базами данных, который имеет гораздо более удобную расширяемость и практичность, и к тому же кросс-платформен.
Так что же такое AJAX? Впервые об Ajax заговорили после появления в феврале 2005-го года статьи Джесси Джеймса Гарретта (Jesse James Garrett) "Новый подход к веб-приложениям" . Ajax - это не самостоятельная технология. Это идея, которая базируется на двух основных принципах.
Использование DHTML для динамичного изменения содержания страницы.
Использование XMLHttpRequest для обращения к серверу "на лету".
Использование этих двух подходов позволяет создавать намного более удобные WEB-интерфейсы пользователя на тех страницах сайтов, где необходимо активное взаимодействие с пользователем. Использование Ajax стало наиболее популярно после того, как компания Google начала активно использовать его при создании своих сайтов, таких как Gmail, Google maps и Google suggest. Создание этих сайтов подтвердило эффективность использования данного подхода.
Итак подробнее: если взять классическую модель WEB-приложения:
Клиент, набирая в строке поиска адрес интересующего его ресурса, попадая на сервер, делает к нему запрос. Сервер производит вычисления в соответствии с запросом, обращается к базе данных и так далее, после чего полученные данные идут клиенту и, в случае необходимости подставляются в шаблоны и обрабатываются браузером. Результатом является страница, которую мы видим, и которую 80% населения страны находящейся в WEB называют Интернетом. Это классическая модель, которая успела себя зарекомендовать и заслужить себе почетное место под солнцем. Это самая простая модель взаимодействия и, как следствие, самая распространенная. Однако ее все чаще становиться недостаточно. Представьте себе, on-line игру "Морской бой", в которую играют два закоренелых друга - житель ЮАР и житель Японии. Как с помощью такой модели сделать их игру максимально приятной? В любом случае данные потопленных кораблей будут хранится на сервере, и что бы проверить не походил ли оппонент, необходим будет каждый раз обновлять страницу и подгущать устаревшие данные. "Но ведь люди придумали кэширование" - скажете вы и будете абсолютно правы, но легче от этого не становиться. Кэширование всего лишь ускорит время взаимодействия с сервером, но не избавит от необходимости перезагружать страницу. Как вариант можно поставить определенное время самообновления, но и в этом случае страница будет перезагружаться полностью.
Теперь посмотрим на модель взаимодействия AJAX:
Последовательность действий клиента сохраняется и он, скорее всего не поймет того, что будет происходить, а слово AJAX будет ассоциироваться только с названием футбольного клуба. Но на стороне сервера все выглядит иначе.
При обращении к серверу, генерируется страница, которая будет отображаться пользователю, и предлагать ему совершить интересующую его последовательность действий. При сознательном (хотя и не обязательно) выборе клиента, его запрос будет обращаться к AJAX модулю, который и будет производить все интересующие его вычисления и работу с сервером как таковым. Но в чем же новшество? Основное отличие в том что этот метод дает нам возможность динамически обращаться к серверу и выполнять интересующие нас действия. Например, нам нужно выполнить обращение к базе данных и получить интересующие нас данные которые затем будем использовать. Данные мы будем хранить в XML файле который будет формироваться динамически, таким образом:
Создаем новый объект JavaScript:
Var req = new ActiveXObject("Microsoft.XMLHTTP"); (для IE) var req = new XMLHttpRequest(); (Для всего остального)
Затем пишем функцию использующий этот объект
Var req; function loadXMLDoc(url) { // branch for native XMLHttpRequest object if (window.XMLHttpRequest) { req = new XMLHttpRequest(); req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send(null); // branch for IE/Windows ActiveX version } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send(); } } }
Теле HTML файла пишем скрипт, который будет:
Function checkName(input, response) { if (response != ""){ // Response mode message = document.getElementById("nameCheckFailed"); if (response == "1"){ message.className = "error"; }else{ message.className = "hidden"; } }else{ // Input mode url = "http://localhost/xml/checkUserName.php?q=" \\ + input; loadXMLDoc(url); } }
В файле localhost/xml/checkUserName.php мы обрабатываем данные, полученные из командной строки в данном случае в переменной q. А результат сохраняем в XML структуре, которую храним в этом же файле. Так мы можем получить и обработать данные, полученные из БД, или что-нибудь другое необходимое нам. К тому же сервер будет обрабатывать только те данные, которые нам необходимо обновить, а не всю страницу в случае ее перезагрузки.
Теперь вернемся к двум друзьям - любителям морского боя: ввиду появления данного новшества, мы можем сделать следующее: поставить проверку в течении каждых трех секунд XML файла данная проверка подразумевает под собой проверку базы данных на предмет новой записи, то есть - сделанного оппонентом хода. Если ход был сделан, страница без перезагрузки топит корабли, тем самым, портя настроение участникам водных баталий. Данная функциональность достигается элементарным использованием Javascript и таблиц стилей. Этот пример достаточно наглядный, однако далеко не полный, применение данной технологии гораздо существенней.
Однако не все так просто. Давайте теперь рассмотрим отрицательные черты.
Во-первых - мы можем передавать данные только методом GET, соответственно большие объемы данных придется оставить в покое. Данная проблема уже не раз поднималась в разных источниках, но господа, есть ведь Сookies, которые вполне приемлемы в случаях передачи больших данных, чем может вместить в себя GET запрос, а Javascript в свою очередь имеет функции для работы с ними.
Вторая проблема - кросс-браузерность. Объект XMLHttpRequest еще не является частью какого-либо стандарта (хотя нечто подобное уже было предложено в спецификации W3C DOM Level 3 Load and Save). Поэтому существует два отличных друг от друга метода вызова этого объекта в коде скрипта. В Internet Explorer объект ActiveX вызывается так:
Var req = new ActiveXObject("Microsoft.XMLHTTP");
В Mozilla и Safari это делается проще (так как там это объект, встроенный в JavaScript):
Var req = new XMLHttpRequest();
Все современные браузеры поддерживают данный объект и проблемы возникнут только у 1,8% пользователей (согласно данными статистики компании SpyLog), которые пользуются очень старыми версиями браузеров, не поддерживающими этот объект.
И, наконец, защищенность. На этом остановимся поподробнее. Основная проблема заключается в том, что все данные и исходный код JavaScript функций можно увидеть путем просмотра исходного кода страницы, соответственно злоумышленник может проследить логику выполнения запросов и при определенном стечении обстоятельств выполнить необходимый ему набор команд. Это не играет особой роли, когда у нас идет простое сопоставление данных, но что делать в более сложных ситуациях, например при авторизации, и как в таком случае передавать пароли. Как уже было сказано выше, на помощь приходят Cookies. Необходимые данные можно пересылать с их помощью, так же их и обрабатывать. Возьмем пример, в котором пользователь будет проходить аутентификацию с помощью технологии которой посвящена статья.
Генерации страницы, мы формируем уникальные значения, которые затем помещаем в переменные сервера. И в Cookies браузера, затем при авторизации мы получаем имя пользователя и его пароль, которые нам необходимо передать модулю обработки на сервере.
После того как пользователь ввел данные и нажал кнопку Submit его пароль заноситься в Cookies, а имя пользователя передается открыто - ссылкой например http://www.mubestajax.com/ajax.php?login=pupkin при получении данных сервер, в первую очередь проводит сверку полученных данных. Так как значения которые мы генерировали с начала работы сервера а затем передавали их глобальным переменным сервера и cookies должны совпадать, то при проверке целостности переданных данных в случае несовпадения программа перестает работать. Если же все прошло хорошо, то извлекаются все необходимые данные и проводятся необходимые вычисления и работы. Такой способ защиты достаточно прост и эффективен. Но для больших проектов он не подойдет.
Когда на первый план выходит безопасность, лучше использовать более сложные и надежные решения. Но в большинстве случаев данных мер предосторожности будет более чем достаточно, так как использование более сложных модулей влечет за собой использование технологий которые не всегда входят в состав стандартного программного обеспечения современных серверов, основная черта которых - простота. Именно по этому такие технологии как MySQL и PHP получили очень широкое распространение, т.к. они обеспечивают простоту работы при своей небольшой ресурсоемкости и достаточной надежности. А к рамках данного программного обеспечения как нельзя лучше подойдет решение предложенное выше.
В заключении хотелось бы сказать, что AJAX с одной стороны - огромный скачок в WEB инженерии, но с другой стороны это давно назревавший этап эволюции, который открыл новые горизонты в сфере разработки программного обеспечения. В тоже время эта технология еще довольно "сыра" так как ее использование на данный момент скорее приятное исключение. Но я уверен, что о ней еще не раз все услышат.
Последнее обновление: 1.11.2015
Технология AJAX представляет собой технологию асинхронного взаимодействия с сервером. Благодаря данной технологии мы можем отправлять запросы к серверу и получать от него ответы без перезагрузки страницы в фоновом режиме, создавать насыщенные интерактивные веб-приложения, например, веб-чаты.
Первоначально возможность асинхронного взаимодействия с сервером была использована в виде объекта ActiveX в компании Microsoft. В последствии идея асинхронного взаимодействия была подхвачена и другими компаниями. И в настоящее время функционал асинхронных запросов в браузерах доступен веб-разработчикам через объект XMLHttpRequest .
Поскольку данный материал посвящен jQuery, я не буду подробно останавливаться на объекте XMLHttpRequest . Но вкратце покажу суть его использования.
Итак, прежде всего для работы с AJAX нам нужен веб-сервер. Это может быть Node.js, IIS, Apache, nginx. В дальнейшем я буду использовать веб-сервер Apache.
Создадим веб-страничку, где будет использоваться XMLHttpRequest:
Загрузить Нет новостей function ajaxload(){ var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if(this.readyState==4){ if(this.status >=200 && xhr.status < 300){ document.getElementById("news").innerHTML=this.responseText; } } } xhr.open("GET", "ajax.php"); xhr.send(); }
В плане разметки у нас есть два элемента: кнопка, по нажатию на которую совершается функция ajaxload , и блок div, в который будут загружаться данные при запросе.
Все основное действие у нас происходит в функции ajaxload. Во-первых, мы создаем объект XMLHttpRequest: var xhr=new XMLHttpRequest(); .
Через этот объект мы будем отправлять запросы. При получении ответа будет срабатывать событие onreadystatechange . И для обработки данного события мы присваиваем свойству xhr.onreadystatechange функцию обработки ответа.
В функции обработки мы, во-первых, смотрим на готовность ответа через свойство readyState (состояние this.readyState==4 означает, что запрос завершен). Далее мы проверяем статусный код ответа: если сервер возвратил статусный код от 200 до 300, то запрос прошел успешно.
И затем мы передаем текст ответа в блок div, который у нас имеется на странице через свойство responseText .
В строке xhr.open("GET", "ajax.php"); мы устанавливаем метод запроса и ресурс, к которому будет идти запрос.
Ну и последней строчкой xhr.send() отправляем запрос. В итоге мы написали очень много кода, чтобы выполнить простой запрос.
Пусть у нас на сервере находится обработчик запросов на языке php. Я сделаю его предельно простым. Он будет просто передавать в ответ разметку html:
Теперь по нажатию по кнопке будет происходить ajax-запрос, результаты которого будут загружаться на страницу:
Теперь перепишем код страницы с использованием jQuery:
Загрузить Нет новостей $(function(){ $("button").click(function(){ $("#news").load("ajax.php"); }); });
Таким образом, код становится чище и проще за счет использования библиотеки jQuery. Нам достаточно применить метод load , передав в качестве параметра адрес ресурса. И итоговый результат будет тот же самый.
AJAX (Asynchronous JavaScript and XML) – это технология, обеспечивающая динамические запросы на сервер, в ходе которых нет нужды перезагружать страницу. Сайт функционирует на порядок быстрее, потому что не нужно регулярно обновлять всю страницу, поэтому его использование становится более удобным для пользователя, но не для поисковых систем.
Огромное количество подобных технологий начали применяться еще в далеких 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 важнейших этапа:
Если объяснять суть технологии визуально, то на изображении данный процесс будет выглядеть так:
Без объекта XMLHttpReques обмен информацией невозможен, поэтому он предварительно размещается на самой странице. Объект выступает в роли связывающего звена для сервера и веб-браузера. Сами запросы переходят от системы к серверу в формате POST или GET. Для типа GET присущее обращение к документу, находящемуся на сервере, а в качестве аргумента он получает адрес сайта. Чтобы запрос не был прерван, создана надежная функция JavaScript Escape, предотвращающая такие случаи.
Если данные передаются в больших объемах, не обойтись без функции POST. Сервер занимается обработкой информации, которая ему поступает, и затем, основываясь на них, образует обновленные данные, которые отправляются пользователю.
Подход с применением AJAX подразумевает разновременную передачу информации. Благодаря этому клиенту доступны самые разные функции в ходе «фоновой» передачи данных. Юзеру приходит сообщение о процессе передачи информации, чтобы он не счел его зависшим - это позволяет удержать его на сайте.
Для отправки ответа, сервер применяет стандартный текст JSON либо XML. Получая JSON-документ, он сразу выводится на экран. Но еще пользователь обязан выполнить код, который он получит, после чего сформируется объект JavaScript. А если отправляется текст в формате XML, его сначала нужно заменить на HTML, а затем уже отобразить на странице.
Какие плюсы у AJAX?- Уменьшает нагрузку на сервер. Но это возможно только в том случае, если применять технологию правильно. Вы можете использовать шаблон, который поможет создавать постоянные элементы веб-ресурса: меню, логотип, шапка и прочее. А чтобы удовлетворять запросы посетителей, нет необходимости перезагружать страницу целиком. К примеру, вы создали блок с голосованием, и посетителю предлагается выбрать оптимальный для него пункт, чтобы проголосовать. Как только он нажмет на кнопку, информация моментально уйдет на сервер, а затем человеку придет ответ. И все это происходит без обновления страницы.
- Повышает работоспособность сервера. Потому что происходит загрузка лишь содержания страницы, и пользователям приходят результаты их действий намного быстрее.
- Снижает трафик. Число данных в процессе работы с приложениями существенно уменьшается. Обеспечивается это тем, что заново загружается не вся страница, а лишь ее измененные элементы или данные. Затем скрипт меняет информацию на странице в браузере.
- Открывает большое разнообразие возможностей. Сделав выбор в пользу AJAX, вам будет доступно изобилие действий. Так, регистрируясь на сайтах, посетитель, указывая логин, сразу же узнает, занят он, или нет. А вводя запрос в поисковой строке Google или Яндекс, после любого последующего слова или буквы, ниже отображаются готовые варианты запросов. Разумеется, это значительно облегчает задачу интернет-пользователям.
- Нужно постоянно включать JavaScript. Без данной поддержки технология AJAX на соответствующих страницах практически бесполезна.
- Проблемы с . Нередко контент, размещающийся на страницах динамически, остается без внимания поисковых ботов. В связи с этим рекомендуется применять динамический способ загрузки только по отношению к некоторым фрагментам содержимого. Только так можно свести к минимуму негативное влияние технологии на SEO-продвижение.
- Невозможно объединиться с инструментами браузера. Если создавать страницы динамическим методом, браузер не будет запоминать их и показывать в истории, в связи с чем при нажатии кнопки «Назад» вы не вернетесь на ранее посещенную страницу. Но проблема решается специальными скриптами. Еще у вас не будет возможности сохранить закладку на какой-нибудь контент.
- Отсутствие количества обращений. Из-за динамической загрузки материалов, система не может точно отображать статистику, потому что, когда пользователь перемещается по разным страницам, они не перезагружаются, и счетчик не учитывает эти переходы. Из за этого могут возникать проблемы при оценке аналитике на сайте.
- Снижается уровень безопасности. Установив AJAX, любой пользователь может просмотреть исходный код страницы, а это небезопасно.
Выше уже было сказано о том, что страницы на базе данной технологии очень плохо попадают в индекс. Чтобы этого избежать, лучше заранее побеспокоиться о том, чтобы динамически подгружаемые данные были доступны и по ссылкам тоже. Предусмотрев такую возможность, страницы веб-ресурса будут нормально отображаться и у тех пользователей, которые сидят в браузере без JavaScript.
Владельцам сайтов, где контент загружается динамическим способом, нужно убедиться, что роботы поисковых систем помимо того, что понимают содержимое страниц, еще и верно определяют правила навигации по сайту.
Для максимального снижения отрицательного воздействия AJAX на продвижение сайта, его необходимо оптимизировать:
Зачастую поисковые системы относятся к AJAX ресурсам хуже, чем к сайтам, где эта технология не используется. Причин этого бывает несколько:
- некоторый контент может быть не проиндексирован роботами;
- все страницы имеют одинаковые url;
- определенные страницы могут отображаться у поисковых ботов не так, как у пользователей.
Но если вы будете применять технологию AJAX грамотно, то есть использовать её только для определенных фрагментов на сайте, то тогда у вас не будут возникать проблемы с индексацией.
Я бы не рекомендовал для всего сайта использовать технологию AJAX, такие сайты плохо индексируются поисковыми системами. А вот для части пользовательских элементов (например опросы, добавление комментариев), такая технология полезна и наоборот может повышать юзабилити вашего проекта.
ЗаключениеТехнология AJAX открывает огромные возможности для пользователей, делает общение с веб-сайтами намного быстрее и комфортнее, повышает скорость их работы. Но у нее есть и существенные недостатки, которых можно избежать, если использовать ее правильно. Только при грамотном подходе ваш сайт поднимется на высокие позиции в поисковой выдаче и будет на хорошем счету у поисковых систем.
AJAX расшифровывается как Asynchronous Javascript And XML, что означает Асинхронный JavaScript и XML. AJAX позволяет обновлять данные HTML-страницы без полной её перезагрузки. Кроме этого технология позволяет работать с интернет-страницами асинхронно. То есть пока JavaScript взаимодействует с Web-сервером, пользователь может продолжать работать с web-страницей.
Примером использования технологии AJAX является Google Suggest . Работа Google Suggest заключается в том, что пока вы вводите слово или фразу для поиска, JavaScript обращается к базе данных Google и запрашивает у неё 10 самых популярных запросов, начинающихся с тех же букв. И затем выводит этот список без перезагрузки страницы.
Для рассмотрения принципов работы технологии AJAX, реализуем на своем сайте механизм подобный Google Suggest. Допустим, у нас есть сайт туроператора. На сайте есть поле поиска предложений по названию страны. Добавим к этому полю раскрывающийся список с автозаполнением по введенным буквам. Приступим к решению этой задачи. Сразу оговорюсь, что для реализации этой задачи необходимо знание HTML и немного JavaScript(знатоком быть не обязательно). В качестве серверного языка будет использован php.
Для начала создадим форму поиска. Для этого на вашем web-сервере создайте файл index.html, откройте его при помощи любого текстового редактора и введите следующий html-код.
Поиск предложений.
Отдых на море
Поиск предложений:
В этом листинге мы создали форму поиска с полем для ввода текста и кнопкой отправки, и создаем слой div для вывода результатов. К данной странице так же прикрепляется файл ajax.js, который будет содержать функции JavaScript.
Далее напишем функции JavaScript, которые будут посылать запросы серверу и обновлять страничку. Для того чтобы не приходилось перегружать html-документ полностью нам и понадобиться технология Ajax. Итак, приступим. Создайте файл ajax.js, поместите его в ту же папку, что и index.html, и откройте его в текстовом редакторе.
Для начала необходимо создать объект, который будет передавать запросы серверу и принимать ответы. В разных браузерах этот объект создается по разному. Мы напишем универсальную функцию, которая должна работать в разных браузерах. Добавьте в файл ajax.js следующий код JavaScript.
/*переменная для хранения объекта запроса*/
var request;
/*функция создания объекта запроса*/
function CreateRequest()
{
var request=null;
try
{
//создаем объект запроса для Firefox, Opera, Safari
request = new XMLHttpRequest();
}
catch (e)
{
//создаем объект запроса для Internet Explorer
try
{
request=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return request;
}
Выводить список результатов необходимо при каждом изменении в поле поиска. Для этого воспользуемся обработчиком событий JavaScript. Определять изменения будем при каждом событии клавиатуры keyup . Для этого в наш HTML-код файла index.html в строке, где создается поле поиска с именем country , добавим атрибут onkeyup="KeyPress(this.value)" :
Т. е. при нажатии любой клавиши будет вызываться функция JavaScript KeyPress() , в которую в качестве параметра передаются символы, введенные в строку поиска. Функция KeyPress() должна выполнить следующие задачи:
- Создать новый объект запроса посредством вызова функции CreateRequest();
- Сформировать URL-адрес, к которому необходимо подключиться для получения результатов;
- Настроить объект запроса для установки связи с сервером;
- Отправить запрос серверу.
Приступим к созданию функции KeyPress() . Для создания нового объекта запроса нам просто необходимо переменной request присвоить значение, возвращаемое ранее созданной функцией CreateRequest() . И для надежности проверим переменную request . Если она равна NULL , то объект запроса создать не удалось. Вот так будет выглядеть код JavaScript для решения данной задачи:
Function KeyPress(term)
{
request=CreateRequest();
if(request==null)
{
return;
}
}
Далее необходимо указать объекту запроса request какая функция JavaScript будет обрабатывать ответ сервера. Для этого необходимо свойству onreadystatechange присвоить имя соответствующей функции. Данное свойство указывает браузеру, какую функцию запускать при каждом изменении состояния готовности запроса. У нас обработкой ответа будет заниматься функция LoadResults() . Добавьте в функцию следующую строку: request.onreadystatechange = LoadResults; . Отметим, что после названия функции нет скобок.
Затем займемся настройкой подключения. Для этого сначала необходимо указать объекту, куда передавать этот запрос. Сформируем URL-адрес сценария, который будет вычислять результаты, и присвоим его переменной url . Допустим, за вычисление результатов на стороне сервера у нас будет отвечать php-скрипт country.php . Тогда наш URL-адрес будет выглядеть следующим образом: var url = "country.php" + "?s=" + encodeURIComponent(term) + "&sid=" + Math.random(); , где с переменной s передаются введенные в поле поиска символы, а sid присваивается случайное число, чтобы браузер не кэшировал страницу. Добавьте эту строчку в тело функции KeyPress() .
Далее необходимо инициализировать подключение с помощью метода open("GET", url, true) объекта request . Этот метод имеет три параметра. Параметр "GET" указывает, как отправить данные серверу. Мы используем метод GET , потому что введенные символы в строку поиска передаются серверному сценарию через url-адрес. Во второй параметре указывается url-адрес серверного сценария. У нас url-адрес храниться в переменной url , поэтому во втором параметре мы указываем эту переменную. Третий параметр может иметь два значения: true - асинхронный режим и false - синхронный режим. Наше приложение будет работать в асинхронном режиме, поэтому указываем true . После инициализации подключения, необходимо создать подключение и запросить результаты. Для этого просто необходимо вызвать функцию send(null) объекта request . Параметр null указывает, что запрос не содержит данных.
После внесения всех изменений функция KeyPress(this.value) примет следующий вид:
Function KeyPress(term)
{
/*создаем новый объект запроса*/
request=CreateRequest();
/*если не удалось создать объект запроса, то заканчиваем выполнение функции*/
if(request==null)
{
return;
}
/*формируем url-адрес*/
var url = "country.php" + "?s=" + encodeURIComponent(term) + "&sid=" + Math.random();
/*настраиваем объект запроса для установки связи*/
request.onreadystatechange = LoadResults;
request.open("GET", url, true);
/*отправляем запрос серверу*/
request.send(null);
}
Итак, соединение установлено, запрос отправлен, сервер обрабатывает данные и возвращает результат. Далее необходимо получить ответ, обработать и вывести результаты на web-страницу. Всем этим будет заниматься функция LoadResults() , которая будет вызываться при каждом изменении статуса готовности запроса. Рассмотрим, как должна работать эта функция.
Для начала необходимо проверить текущее состояние готовности. Статус готовности хранит свойство объекта запроса readyState . При завершении обработки запроса состояние готовности равно 4. Т.е. если request.readyState == 4 , то можно обрабатывать ответ:
Function LoadResults()
{
/*обрабатываем ответ*/
}
}
Function LoadResults()
{
/*Проверяем состояние готовности*/
if (request.readyState == 4){
/*Проверяем статус запроса*/
if (request.status == 200){
/*все в порядке, обрабатываем ответ*/
}
}
}
Если проверка состояния и статуса запроса закончилась успешно, то можно приступать к обработке данных, полученных от сервера. Получить данные можно двумя способами: request.responseText - получение данных в виде текста, либо request.responseXML - получение данных в виде объекта XMLDocument. Допустим, у нас сервер передает ответ в виде текстового списка стран через запятую. Тогда получаем данные: var answer = request.responseText . Далее обрабатываем данные и выводим их в слой с id="searchresults" .
Я не буду вдаваться в подробности обработки данных, а просто приведу код функции с комментариями:
Function LoadResults()
{
/*Проверяем состояние готовности*/
if (request.readyState == 4){
/*Проверяем статус запроса*/
if (request.status == 200){
//делаем слой searchresults видимым
ShowDiv("searchresults");
//очищаем результаты
ClearResults();
//получаем данные
var answer = request.responseText;
//преобразуем строку текста в массив
var array = answer.split(",");
//определяем размер массива
var count = array.length;
//находим слой searchresults
//создаем таблицу в объектной модели документа
var tbl = document.createElement("table");
var tblbody = document.createElement("tbody");
var tblRow, tblCell, tblNode;
//перебираем все элементы массива array
for(var i = 0; i
{
var text = array[i];
//создаем строки таблицы и добавляем в ее тело
tblRow = document.createElement("tr");
tblCell = document.createElement("td");
//задаем атрибуты и функции ячеек
tblCell.onmouseover = function(){this.className="mouseOver";};
tblCell.onmouseout = function(){this.className="mouseOut";};
tblCell.setAttribute("border", "0");
tblCell.onclick = function(){Replace(this);};
tblNode = document.createTextNode(text);
tblCell.appendChild(tblNode);
tblRow.appendChild(tblCell);
tblbody.appendChild(tblRow);
}
//добавляем в таблицу ее тело
tbl.appendChild(tblbody);
//помещаем таблицу в слой
div.appendChild(tbl);
}
}
}
И еще пару вспомогательных функций JavaScript для вывода результатов на экран:
/*делаем слой с результатами видимым*/
function ShowDiv(id)
{
if (document.layers) document.layers.visibility="show";
else document.getElementById(id).style.visibility="visible";
}
/*делаем слой с результатами не видимым*/
function HideDiv(id)
{
if (document.layers) document.layers.visibility="hide";
else document.getElementById(id).style.visibility="hidden";
}
/*очистка результатов*/
function ClearResults()
{
/* Удаление существующих строк из таблицы результатов
var div = document.getElementById("searchresults");
var counter = div.childNodes.length;
for(var i = counter-1; i >= 0; i--)
{
div.removeChild(div.childNodes[i]);
}
}
/*Заменяем значение в поле ввода значением, выбранным щелчком мыши*/
function Replace(tblCell)
{
var inputbox = document.getElementById("country");
inputbox.value = tblCell.firstChild.nodeValue;
ClearResults();
HideDiv("searchresults");
}
Так же в наш html-файл index.html между тегами и добавьте следующие правила CSS:
.mouseOut{ background: #ffffff; color: #0000000;
}
.mouseOver{ background: #ccccff; color: #0000000;
}
table {width:250px
}
На этом все. В данной статье мы рассмотрели основы работы технологии Ajax на примере.