WEB-дизайнОсновы технологии AJAX. Ajax - что это? Асинхронный JavaScript и XML: преимущества и недостатки
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 основных этапа:
Для обмена данными на странице создается объект XMLHttpRequest, он будет выполнять функцию посредника между браузером и сервером. Запросы могут отправляться в одном двух типов – GET и POST. В первом случае обращение производится к документу на сервере, в роли аргумента ему передается URL сайта. Для предотвращения прерывания запроса можно воспользоваться функцией JavaScript Escape. Для больших объемов данных применяется функция POST.
Серверная часть обрабатывает поступающие данные и на их основании создает новую информацию, которая будет отправлена клиенту.
AJAX применяет асинхронную передачу данных. Такой подход позволяет пользователю совершать различные действия во время «фонового» обмена информации с сервером. Действует оповещение пользователя о протекающих процессах, чтобы он не подумал, что сайт «завис» либо на нем произошел какой-то сбой.
В качестве ответа сервер использует простой текст, XML и JSON. В первом случае результат можно сразу же отобразить на странице. При получении XML-документа его обычно конвертируют в HTML и выводят на экран. Если ответ получен в формате JSON, клиенту следует выполнить полученный код. После этого будет сформирован объект JavaScript.
Преимущества технологии AJAXСокращение трафика. Объем данных при работе с web-приложениями значительно снижается. Это происходит за счет того, что не нужно загружать всю страницу целиком, достаточно получить только измененную часть либо набор данных. После этого JavaScript изменяет содержимое страницы в браузере.
Снижение нагрузки на сервер. Грамотное использование AJAX позволяет многократно уменьшить нагрузку на сервер. Например, можно использовать шаблон для создания постоянных элементов сайта: логотипа, меню и т. п. Кроме того, для удовлетворения конкретного запроса не нужно обновлять всю страницу. Например, при голосовании на сайте пользователь выбирает нужный пункт, нажимает кнопку, информация отправляется на сервер, после чего приходит ответ. В течение всего этого времени обновления страницы не происходит.
Увеличение скорости работы сервиса. Поскольку подгружается только содержательная часть, пользователь намного быстрее видит результат своих действий.
Широкий спектр возможностей. Использование AJAX не ограничивается формами. Например, при прохождении регистрации на некоторых сервисах пользователь вводит логин – и через мгновение ему выдается информация о том, свободен он или нет. Также при введении поискового запроса в Google после каждой буквы или слова предлагается несколько вариантов запроса. Это значительно повышает комфорт работы с сайтами.
Недостатки AJAXJavaScript должен быть включен . Страницы сайтов, созданные по технологии AJAX, не могут нормально работать при отключенной поддержке JavaScript. На них нельзя разместить закладки, да и поисковики далеко не всегда могут их проиндексировать.
Невозможность интеграции с инструментами браузера. При динамическом формировании страниц браузер не отображает их в истории посещения, поэтому кнопка «Назад» не поможет переместиться на предыдущий этап работы. Впрочем, такая проблема может быть решена за счет специальных скриптов. Также отсутствует возможность установить на нужный материал закладку.
Ухудшение безопасности. Заметным недостатком AJAX также являются пробелы в безопасности, ведь исходный код каждый может прочитать в браузере.
Невозможность установить число обращений. Механизм динамической подгрузки контента заметно искажает данные статистики. Ведь в этом случае при перемещении пользователя по различным страницам не выполняется операция их перезагрузки. И обычный счетчик не регистрирует переход. Для крупных проектов такое искусственное занижение количества просмотров приводит к значительному падению доходов.
Проблемы в индексации контента поисковыми ботами. Часто то содержание, которое загружается на страницы динамическим способом, оказывается недоступным для роботов. Поэтому специалисты рекомендуют использовать динамическую загрузку для строго определенных частей контента. При этом отрицательное влияние AJAX на SEO можно минимизировать.
Индексирование AJAX поисковикамиКак было указано выше, страницы на AJAX плохо индексируются. Поэтому специалисты рекомендуют предусмотреть на сайте возможность получения динамически подгружаемой информации непосредственно по ссылкам. Такое техническое решение обеспечит возможность правильного отображения сайтов у тех пользователей, которые по каким-то причинам не используют JavaScript.
При настройке работы сайтов с динамическим контентом стоит проверить, что поисковые боты не только верно определяют содержание страниц, но также распознают правила навигации по сайту и используют их в процессе организации полученной информации.
Чтобы минимизировать негативное влияние AJAX на SEO, сайт можно оптимизировать следующим образом:
Например, ссылку http://www.site.ru/#uslugi необходимо преобразовать в http://www.site.ru/#!uslugi.
Сайты с технологией AJAX могут иметь худшую репутацию у поисковых систем в сравнении с аналогичными ресурсами без ее использования. Среди основных причин:
- вероятность, что поисковые боты не учтут весь контент;
- бесполезная адресная строка (у всех страниц одинаковый адрес);
- робот может видеть не то содержание страницы, что отображается пользователю.
Этих негативных сторон можно избежать, если использовать AJAX по целевому назначению – для динамического взаимодействия с сервером. Например, часть статьи с ключевыми словами установить не динамически в начале страницы.
Динамические страницы можно кэшировать и отображать их в качестве статических. Для вызова AJAX лучше воспользоваться классическим якорем, чем событием «onClick».
Таким образом, грамотное использование AJAX позволит повысить скорость работы сайта и его удобство для пользователей, не жертвуя дружественным отношением со стороны поисковых систем.
От автора: данная серия статей призвана познакомить front-end дизайнеров и начинающих разработчиков с технологией AJAX, основной front-end технологией. В первом уроке мы затронем основы AJAX, начнем узнавать различные детали данной технологии, узнаем, что это такое, как работает и какие есть ограничения.
Приступим! Обратите внимание: предполагается, что вы уже знаете базовые front-end технологии, такие как HTML и CSS.
Что такое AJAX?AJAX расшифровывается как «Асинхронный JavaScript и XML». Под AJAX понимается не одна технология, и она не является новой. На самом деле это группа технологий (HTML, CSS, Javascript, XML, и т.д.), которые связываются вместе для создания современных веб-приложений.
С помощью AJAX клиент (браузер) общается с сервером и запрашивает у него данные. Полученный ответ обрабатывается, и в станицу вносятся изменения без полной ее перезагрузки. Разберем аббревиатуру AJAX:
«Асинхронный» означает, что когда клиент запрашивает данные с сервера, браузер не зависает, пока не получит ответ. Пользователь наоборот может перемещаться по страницам. Как только сервер вернул ответ, в фоновом режиме ответ начинает обрабатываться соответствующими функциями.
«JavaScript» это язык программирования, который используется для создания объекта запроса AJAX, парсинга этого ответа и обновления DOM страницы.
Для отправки запроса на сервер клиент использует XMLHttpRequest или XHR API. API (программный интерфейс) это набор методов, которые задают правила общения между двумя заинтересованными сторонами. Тем не менее, приходящие из AJAX запроса данные могут быть в любом формате, а не только в XML.
Как работает AJAXЧтобы понять основной принцип работы, давайте взглянем на картинку ниже:
На картинке описан стандартный AJAX сценарий:
Пользователь хочет увидеть больше статей, и он или она кликает на нужную кнопку. Данное событие запускает вызов AJAX.
Запрос посылается на сервер. С запросом можно передать различные данные. Запрос может посылаться в статический файл (к примеру, example.php), хранящийся на сервере. Также можно выполнять динамические скрипты (functions.php), на каждом этапе которых будет происходить общение с базой данных (или другой системой) для извлечения необходимой информации.
База данных отсылает обратно запрошенные статьи на сервер. А сервер посылает их в браузер.
JavaScript парсит ответ и обновляет часть DOM (структура страницы). В нашем примере обновится только сайдбар. Остальные части страницы не меняются.
Помня это, вы поймете, почему AJAX настолько важная технология в современном интернете. Разрабатывая приложения под управлением AJAX мы можем контролировать большие объемы данных, загружаемых с сервера.
Живой пример на AJAXAJAX сейчас уже повсюду. Чтобы убедить вас в этом мы коротко рассмотрим несколько популярных сайтов, которые вовсю используют данную технологию.
Сперва рассмотрим принципы работы Facebook и Twitter. При прокрутке страницы вниз AJAX подгружает новый контент. Также если вы ставите лайк или дизлайк вопросам и ответам на Stack Overflow, опять же срабатывает AJAX. Как только вы вбиваете в строку поиска что-то в Google или Youtube, срабатывают множественные запросы AJAX.
Более того, если мы захотим, то сможем отслеживать данные запросы. К примеру, в консоли Chrome это можно сделать, кликнув правой кнопкой мыши и активировав функцию Log XMLHttpRequests.
Как создать запросВыше мы уже говорили, что для создания запроса используется XMLHttpRequest API. Кроме того в jQuery, самой популярной JS библиотеке есть различные Ajax функции и методы. В серии статей мы рассмотрим различные примеры на чистом JS и JQuery для отправки запросов на сервер.
Управление запросамиВытаскиваемые данные с сервера могут храниться в различных форматах. XML, JSON, JSONP, обычный текст и HTML.
XMLXML (Расширяемый язык разметки) – один из самых популярных форматов для обмена данными между приложениями. Формат похож на HTML, и в качестве структуры используются теги. Однако в XML нет готовых тегов, мы сами задаем их. Пример структуры ниже:
Mike Mathew Australian English Spanish French Russian
< person > < name > Mike < / name > < surname > Mathew < / surname > < nationality > Australian < / nationality > < languages > < language > English < / language > < language > Spanish < / language > < language > French < / language > < language > Russian < / language > < / languages > < / person > |
В сети полно онлайн редакторов, с помощью которых можно создавать XML документы. Мой любимый это: XMLGrid.net. В этом редакторе наш пример выглядит так:
JSON (JavaScript Object Notation) – еще один популярный формат обмена данными. В JSON пример сверху будет выглядеть так:
{ "name" : "Mike", "surname" : "Mathew", "nationality" : "Australian", "languages" : ["English", "Spanish", "French", "Russian"] }
"name" : "Mike" , , JSON Editor OnlineВ JSN редакторе наш пример будет выглядеть так:
Перед тем, как начать использовать AJAX, необходимо узнать про ограничения. Мы рассмотрим только две проблемы. Ошибка появляется, когда запрос ссылается на локальный файл. В этом примере мы хотели получить доступ к данным из локального файла (Demo.json), который хранится не на сервере. Для устранения данной проблемы можно установить локальный сервер и хранить файлы там. Вторая проблема: Ошибка появляется, когда данные из запроса хранятся на другом домене относительно нашей страницы (ошибка известна как правило ограничения домена). В нашем примере данные хранятся на локальном сервере, а страница хранится на сервере Codepen. К счастью, данные ошибки устранимы. Один из способов это CORS от W3C. Но данный механизм требует внести изменения в конфигурацию файлов на сервере. К примеру, на данной странице описано, как настроить Apache сервер. Другой способ это JSONP (JSON с набивкой). ЗаключениеДанный обзор дал вам представление о том, что такое AJAX, где вы уже с ним могли сталкиваться, а также какие существуют потенциальные проблемы. Также мы рассмотрели самые популярные форматы обмена данными. В следующей статье мы рассмотрим работающий пример. Увидимся! |
Мы познакомились с прямыми методами jQuery для работы с Ajax (такими как get(), post() и load()). В этой статье описан низкоуровневый программный интерфейс jQuery Ajax API .
Казалось бы, термин низкоуровневый указывает на то, что вы получаете доступ к скрытым возможностям механизма запросов, но это не совсем так. Описываемые здесь методы менее удобны по сравнению с рассмотренными ранее, однако ценой небольших дополнительных усилий запрос можно сконфигурировать так, чтобы он в точности соответствовал вашим потребностям, чего не всегда удается добиться с помощью прямых или вспомогательных методов.
Простые Ajax-запросыСоздавать запросы с помощью низкоуровневого API не намного сложнее, чем с помощью прямых или вспомогательных методов. Разница состоит в том, что такой подход позволяет контролировать многие другие аспекты запроса и получать о выполняющемся запросе гораздо больше информации. Центральное место в низкоуровневом API занимает метод ajax() , простой пример использования которого приведен ниже (здесь используется исходный файл и файл mydata.json, описанные в предыдущей статье):
$(function() { $.ajax("mydata.json", { success: function(data) { var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); } }); });
Аргументами метода ajax() являются запрашиваемый URL и объект отображения данных, свойства которого определяют набор пар "ключ-значение", каждая из которых определяет некий параметр запроса. Здесь передаваемый методу ajax() объект содержит только один параметр, success, задающий функцию, которая будет вызываться в случае успешного выполнения запроса.
В данном примере мы запрашиваем у сервера файл mydata.json и используем его вместе с шаблоном данных для создания элементов и вставки их в документ, как это делалось в предыдущей статье с помощью прямых методов. По умолчанию метод ajax() создает HTTP-запрос GET, т.е. данный пример эквивалентен использованию методов get() и getJSON().
Объект jqXHRМетод ajax() возвращает объект jqXHR, который можно использовать для получения подробной информации о запросе и с которым можно взаимодействовать. Объект jqXHR представляет собой оболочку объекта XMLHttpRequest , составляющую фундамент браузерной поддержки Ajax.
При выполнении большинства операций Ajax объект jqXHR можно просто игнорировать, что я и рекомендую делать. Этот объект используется в тех случаях, когда необходимо получить более полную информацию об ответе сервера, чем та, которую удается получить иными способами. Кроме того, его можно использовать для настройки параметров Ajax-запроса, но это проще сделать, используя настройки, доступные для метода ajax(). Свойства и методы объекта jqXHR описаны в таблице ниже:
| readyState | Возвращает индикатор хода выполнения запроса на протяжении всего его жизненного цикла, принимающий значения от 0 (запрос не отправлен) до 4 (запрос завершен) |
| status | Возвращает код состояния HTTP, отправленный сервером |
| statusText | Возвращает текстовое описание кода состояния |
| responseXML | Возвращает ответ в виде XML (если он является XML-документом) |
| responseText | Возвращает ответ в виде строки |
| setRequest(имя, значение) | Возвращает заголовок запроса (это можно сделать проще с помощью параметра headers) |
| getAllResponseHeaders() | Возвращает в виде строки все заголовки, содержащиеся в ответе |
| getResponseHeaders(имя) | Возвращает значение указанного заголовка ответа |
| abort() | Прерывает запрос |
Объект jqXHR встречается в нескольких местах кода. Сначала он используется для сохранения результата, возвращаемого методом ajax(), как показано в примере ниже:
$(function() { var jqxhr = $.ajax("mydata.json", { success: function(data) { var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); } }); var timerID = setInterval(function() { console.log("Статус: " + jqxhr.status + " " + jqxhr.statusText); if (jqxhr.readyState == 4) { console.log("Запрос выполнен: " + jqxhr.responseText); clearInterval(timerID); } }, 100); });
В этом примере мы сохраняем результат, возвращаемый методом ajax(), а затем используем метод setInterval() для вывода информации о запросе каждые 100 мс. Использование результата, возвращаемого методом ajax(), не изменяет того факта, что запрос выполняется асинхронно, поэтому при работе с объектом jqXHR необходимо соблюдать меры предосторожности. Для проверки состояния запроса мы используем свойство readyState (завершению запроса соответствует значение 4) и выводим ответ сервера на консоль.
Для данного сценария консольный вывод выглядит так (в вашем браузере он может выглядеть несколько иначе):
Я использую объект jqXHR лишь в редких случаях и не делаю этого вообще, если он представляет собой результат, возвращаемый методом ajax(). Библиотека jQuery автоматически запускает Ajax-запрос при вызове метода ajax(), и поэтому я не считаю возможность настройки параметров запроса сколько-нибудь полезной. Если я хочу работать с объектом jqXHR (как правило, для получения дополнительной информации об ответе сервера), то обычно делаю это через параметры обработчика событий, о которых мы поговорим далее. Они предоставляют мне информацию о состоянии запроса, что избавляет от необходимости выяснять его.
Задание URL-адреса запросаОдним из наиболее важных доступных параметров является параметр url , позволяющий указать URL-адрес для запроса. Можно использовать этот параметр как альтернативу передаче URL-адреса в качестве аргумента метода ajax(), как показано в примере ниже:
$(function() { $.ajax({ url: "mydata.json", success: function(data) { var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); } }); });
Создание POST-запросаДля задания требуемого типа запроса, который необходимо выполнить, используется параметр type . По умолчанию выполняются GET-запросы, как в предыдущем примере. Пример использования метода ajax() для создания POST-запроса и отправки данных формы на сервер приведен ниже:
$(function() { $.ajax({ url: "mydata.json", success: function(data) { var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); } }); // Обработчик клика по кнопке "Заказать" $("button").click(function(e) { $.ajax({ url: "phphandler.php", type: "post", data: $("form").serialize(), success: processServerResponse, dataType: "json" }); e.preventDefault() }); function processServerResponse(data) { // Изначально скрываем всю продукцию var inputElems = $("div.dcell").hide(); for (var prop in data) { // Отображаем только ту продукцию, заказ которой больше 0 // (в ответе от сервера содержится только такая продукция) var filtered = inputElems.has("input") .appendTo("#row1").show(); } // Скрываем базовые элементы формы $("#buttonDiv, #totalDiv").remove(); // Отображаем новые элементы из шаблона totalTmpl $("#totalTmpl").tmpl(data).appendTo("body"); } }); Всего заказов: ${total} Заказать .png"/> ${name}:
Здесь я не буду подробно описывать этот пример, т.к. мы его рассмотрели подробно в предыдущей статье (только с использованием метода post()). Отмечу только, что здесь дополнительно к type мы использовали еще несколько параметров. Для указания цели POST-запроса используется описанный ранее параметр url. Пересылаемые данные указываются с помощью параметра data, значение которого устанавливается с помощью метода serialize(), описанного в предыдущей статье. Тип данных, получаемых от сервера указывается в параметре dataType.
Работа с событиями AjaxНесколько параметров позволяют указывать функции для обработки событий, которые могут запускаться на протяжении жизненного цикла Ajax-запроса. Именно таким способом вы будете указывать функции обратного вызова, играющие столь важную роль в Ajax-запросах. С одной из них вы уже познакомились при рассмотрении параметра success в предыдущем примере. Список параметров, связанных с событиями, вместе с их краткими описаниями приведен в таблице ниже:
Обработка успешных запросовВ примерах выше, при использовании параметра success, в вызове функции были опущены два аргумента - сообщение, описывающее результат запроса, и объект jqXHR. Пример использования функции, которая принимает эти аргументы, приведен ниже:
$(function() { $.ajax({ url: "mydata.json", success: function(data, status, jqxhr ) { console.log("Статус: " + status); console.log("jqXHR статус: " + jqxhr.status + " " + jqxhr.statusText); console.log(jqxhr.getAllResponseHeaders()); var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); } }); });
Аргумент status - это строка, описывающая исход запроса. Функция обратного вызова, которую мы задаем, используя параметр success, выполняется лишь для успешных запросов, и поэтому значением данного аргумента обычно является success. Исключением является случай, когда вы используете параметр ifModified, описанный далее.
Функции обратного вызова для всех событий Ajax следуют одному и тому же образцу, но наибольшую пользу этот аргумент приносит в случае ряда других событий.
Последний аргумент - это объект jqXHR. Вы не должны выяснять состояние запроса, прежде чем начать работу с этим объектом, поскольку знаете, что функция выполняется лишь тогда, когда запрос завершается успешно. В этом примере объект jqXHR используется для получения информации о состоянии запроса и заголовках, которые сервер включил в ответ, а также для вывода этой информации на консоль.
В данном случае результат имеет следующий вид (в зависимости от того, какой сервер вы используете, у вас может быть другой набор заголовков):
Параметр error используется для указания функции, которая должна вызываться при неудачном завершении запроса. Соответствующий пример приведен ниже:
Error {color: red; border: medium solid red; padding: 4px; margin: auto; width: 200px; text-align: center}
$(function() { $.ajax({ url: "NoSuchFile.json", success: function(data) { var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); }, error: function(jqxhr, status, errorMsg) { $("") .text("Статус: " + status + " Ошибка: " + errorMsg) .insertAfter("h1"); } }); });
Здесь запрашивается отсутствующий на сервере файл NoSuchFile.json, и поэтому запрос заведомо не сможет быть выполнен, в результате чего будет вызвана функция, заданная с помощью параметра error. Аргументами этой функции являются объект jqXHR, а также сообщение о состоянии ошибки и сообщение об ошибке, полученное в ответе сервера. Внутри этой функции в документ добавляется элемент div, отображающий значения аргументов status и errorMsg, как показано на рисунке:
Параметр beforeSend позволяет задать функцию, которая будет вызываться перед отправкой запросов. Это позволяет сконфигурировать запрос в последнюю минуту, добавляя или заменяя параметры, переданные методу ajax() (что может быть особенно полезным, если для множества запросов используется один и тот же объект, содержащий необходимые значения параметров). Пример использования такого подхода представлен ниже:
$(function() { $.ajax({ success: function(data) { var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); }, error: function(jqxhr, status, errorMsg) { $("") .text("Статус: " + status + " Ошибка: " + errorMsg) .insertAfter("h1"); }, beforeSend: function(jqxhr, settings) { settings.url = "mydata.json"; } }); });
Аргументами указанной функции являются объект jqXHR (который может пригодиться для настройки заголовков запроса или отмены запроса, прежде чем он будет отправлен) и объект, содержащий параметры, переданные методу ajax(). В данном примере URL-адрес для Ajax-запроса задается с помощью параметра beforeSend.
Задание нескольких обработчиков событийВ предыдущих примерах мы реагировали на наступление событий, связанных с Ajax-запросами, вызовом одной функции, но в параметрах success, error, complete и beforeSend можно задавать массив функций, каждая из которых будет выполняться при запуске соответствующего события. Простой пример этого приведен ниже:
$(function() { $.ajax({ success: , beforeSend: function(jqxhr, settings) { settings.url = "mydata.json"; } }); function processData(data, status, jqxhr) { var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); } function reportStatus(data, status, jqxhr) { console.log("Статус: " + status + " Код результата: " + jqxhr.status); } });
В этом примере для параметра success задан массив, состоящий из двух функций, одна из которых использует данные для добавления элементов в документ, а вторая выводит информацию на консоль.
Настройка контекста для событийПараметр context позволяет указать элемент, который будет назначен переменной this, когда будет вызван обработчик события. Это может быть использовано для обращения к целевым элементам в документе без необходимости их выбора в функции-обработчике. Соответствующий пример приведен ниже:
$(function() { $.ajax({ success: function(data) { var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); }, beforeSend: function(jqxhr, settings) { settings.url = "mydata.json"; }, context: $("h1"), complete: function(jqxhr, status) { var color = status == "success" ? "green" : "red"; this.css("border", "thick solid " + color); } }); });
Здесь параметр context устанавливается на объект jQuery, содержащий элементы h1 документа. В функции, определяемой параметром complete, мы выделяем рамкой выбранные элементы (в данном случае - элемент, поскольку в документе есть только один элемент h1) путем вызова метода css() для объекта jQuery (на который ссылаемся через this). Цвет рамки определяется на основании состояния запроса.
С помощью параметра context можно установить в качестве контекста любой объект, и ответственность за выполнение только допустимых для этого объекта операций лежит на вас. Например, если вы задаете в качестве контекста элемент HTMLElement, то до того, как вызывать для него какие-либо методы jQuery, вы должны передать этот объект функции $().
Настройка базовых параметров Ajax-запросовСуществует группа параметров, с помощью которых можно выполнить базовую настройку Ajax-запроса (некоторые из них, url и type, мы рассмотрели выше). Из всех доступных параметров они представляют наименьший интерес, и их имена в основном говорят сами за себя. Параметры, о которых идет речь, приведены в таблице ниже:
| accepts | Устанавливает для запроса значение заголовка Accept, который указывает MIME-типы, поддерживаемые браузером. По умолчанию это значение определяется параметром dataType |
| cache | Значение false указывает на то, что содержимое запроса не должно кэшироваться сервером. По умолчанию кешируются все типы данных, кроме script и jsonp |
| contentType | Устанавливает для запроса значение заголовка content-туре |
| dataType | Указывает, какие типы данных ожидаются от сервера. Если используется этот параметр, то jQuery будет игнорировать информацию, предоставляемую сервером о типе запроса |
| headers | Задает дополнительные заголовки и значения, которые должны включаться в запрос |
| jsonp | Задает строку, которую следует использовать вместо функции обратного вызова при выполнении запросов JSONP (кроссдоменные запросы). Этот параметр требует согласования с сервером |
| jsonpCallback | Задает имя функции обратного вызова, которое должно использоваться вместо автоматически сгенерированного случайного имени, используемого jQuery по умолчанию |
| password | Задает пароль, который должен использоваться в запросе при прохождении процедуры аутентификации |
| scriptCharset | Указывает jQuery, какой набор символов используется при кодировании запрашиваемого JavaScript-содержимого |
| timeout | Задает длительность тайм-аута (в миллисекундах) для запроса |
| userName | Задает имя пользователя, которое должно использоваться в запросе при прохождении процедуры аутентификации |
О том, что выполняются Ajax-запросы, пользователи часто даже не догадываются, и поэтому указание допустимой длительности тайм-аута - неплохая идея, поскольку это избавит пользователей от томительного ожидания завершения какого-то неведомого для них процесса. Пример задания тайм-аута для запроса приведен ниже:
$(function() { $.ajax({ timeout: 5000, headers: { "X-HTTP-Method-Override": "PUT" }, success: function(data) { var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); }, error: function(jqxhr, status, errorMsg) { console.log("Error: " + status); } }); });
В этом примере параметр timeout устанавливает максимальную длительность тайм-аута, равную 5 сек. Если запрос за это время не будет выполнен, то вызовется функция, заданная с помощью параметра error, и будет выведен код ошибки, определяемый параметром status.
Таймер запускается сразу же после передачи запроса браузеру, и большинство браузеров налагают ограничения на количество одновременно выполняющихся запросов. Это означает, что существует риск того, что к моменту истечения тайм-аута запрос даже не будет запущен. Чтобы избежать этого, необходимо располагать сведениями об ограничениях браузера, а также об объеме и ожидаемой длительности любых других выполняющихся Ajax-запросов.
Дополнительно в этом примере ниже используется параметр headers, с помощью которого в запрос добавляется заголовок. Для указания заголовков используется объект отображения данных. Используемый здесь заголовок может быть полезным для создания веб-приложений, поддерживающих архитектурный стиль REST, если только сервер правильно его распознает.
Использование дополнительных конфигурационных параметровВ следующих разделах описаны наиболее полезные и заслуживающие внимания дополнительные параметры, применимые к Ajax-запросам. Обычно они редко используются, но в случаях, когда в них возникает потребность, они оказываются незаменимыми. Эти параметры позволяют осуществлять точную настройку взаимодействия jQuery с Ajax.
Создание синхронных запросовУправление режимом выполнения запросов осуществляется с помощью параметра async . Значение true, используемое для этого параметра по умолчанию, означает, что запрос будет выполняться в асинхронном режиме, тогда как значению false соответствует синхронный режим.
При синхронном выполнении запроса метод ajax() ведет себя, как обычная функция, и браузер переходит к выполнению других инструкций сценария лишь после того, как закончится выполнение запроса.
Игнорирование данных, оставшихся неизменнымиС помощью параметра ifModified можно обеспечить получение данных лишь в том случае, если с момента последнего запроса они были изменены. Такое поведение определяется заголовком Last-Modified. Благодаря этому удается избежать бесполезной пересылки данных, которая не даст пользователю никакой новой информации по сравнению с той, которой он уже располагает. По умолчанию параметр ifModified имеет значение false, указывающее jQuery на необходимость игнорирования заголовка Last-Modified и предоставления данных в любом случае.
Пример использования этого параметра приведен ниже:
$(function() { $("button").click(function(e) { $.ajax("mydata.json", { ifModified: true, success: function(data, status) { if (status == "success") { $("#row1, #row2").children().remove(); var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); } else if (status == "notmodified") { $("img").css("border", "thick solid green"); } } }); e.preventDefault(); }) });
В этом примере значение параметра ifModified устанавливается равным true. Функция success вызывается всегда, но если с того момента, когда содержимое запрашивалось в последний раз, оно не изменилось, то аргумент data будет иметь значение undefined, а аргумент status - значение notmodified .
В данном случае выполняемые действия определяются значением аргумента status. Если значением этого аргумента является success, то аргумент data используется для добавления элементов в документ. Если же аргумент status имеет значение notmodified, то мы используем метод css() для выделения рамкой элементов, которые уже имеются в документе.
В ответ на событие click, связанное с кнопкой, вызывается метод ajax(). Это дает возможность многократно повторять один и тот же запрос, чтобы продемонстрировать влияние параметра ifModified, как показано на рисунке:
Каким бы полезным ни был этот параметр, я рекомендую использовать его с осторожностью. Если отправка запроса является следствием действий пользователя (например, щелчка на кнопке), то существует вероятность того, что пользователь щелкнул на кнопке, поскольку предыдущий запрос не был выполнен так, как ожидалось.
Представьте, что вы запрашиваете данные, но в методе, указанном в параметре success, содержится ошибка, которая препятствует правильному обновлению содержимого документа. Тогда вашим следующим действием будет попытка щелкнуть на кнопке еще раз, чтобы добиться ожидаемого результата. Непродуманно используя параметр ifModified, можно проигнорировать действия пользователя, вынуждая его предпринимать более серьезные действия для устранения проблемы.
Обработка кода ответаПараметр statusCode позволяет выбирать варианты дальнейших действий в зависимости от кода ответов на HTTP-запросы. Его можно использовать либо вместо параметров success и error, либо в дополнение к ним. Пример самостоятельного использования параметра statusCode приведен ниже:
$(function() { $.ajax({ url: "mydata.json", statusCode: { 200: function(data) { var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); }, 404: function(jqxhr, status, errorMsg) { $("") .text("Статус: " + status + " Ошибка: " + errorMsg) .insertAfter("h1"); } } }); });
Здесь параметр statusCode задан в виде объекта, устанавливающего связь между кодами ответов на HTTP-запросы и соответствующими им функциями, которые должны быть выполнены на сервере. Какие именно аргументы передаются функциям, зависит от того, отражает ли код ответа успешное выполнение запроса или ошибку.
Если код (например, 200) соответствует успешному запросу, то аргументы совпадают с теми, которые передавались бы функции, определяемой параметром success. В противном случае (например, при коде ответа 404, означающем, что запрашиваемый файл не найден) аргументы совпадают с теми, которые передавались бы функции, определяемой параметром error.
Как видите, это средство не дает непосредственной информации о кодах ответа. Я часто пользуюсь им в процессе отладки взаимодействия браузера с сервером, обычно для того, чтобы выяснить, почему jQuery ведет себя не так, как мне хотелось бы. При этом я использую параметр statusCode в дополнение к параметрам success и error и вывожу информацию на консоль. Если эти параметры используются совместно, то сначала будут выполнены функции success и error, а затем уже - функции, определяемые параметром statusCode.
Предварительная очистка ответных данныхС помощью параметра dataFilter можно задать функцию, которая будет вызвана для предварительной очистки данных, возвращаемых сервером. Это средство незаменимо в тех случаях, когда пересылаемые сервером данные не совсем вас устраивают либо из-за того, что отформатированы неподходящим образом, либо из-за того, что среди них есть данные, которые вы не хотите обрабатывать.
Это средство мне очень помогает при работе с серверами Microsoft ASP.NET, присоединяющими лишние данные к данным JSON. Удаление таких данных с помощью параметра dataFilter требует лишь минимальных усилий. Пример использования параметра dataFilter приведен ниже:
$(function() { $.ajax({ url: "mydata.json", success: function(data) { var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); }, dataType: "json", dataFilter: function(data, dataType) { if (dataType == "json") { var filteredData = $.parseJSON(data); filteredData.shift(); return JSON.stringify(filteredData.reverse()); } else { return data; } } }); });
Функции передаются данные, полученные с сервера, и значение параметра dataType. Если параметр dataType не используется, то второму аргументу присваивается значение undefined. Ваша задача заключается в том, чтобы вернуть отфильтрованные данные. В этом примере предмет нашего внимания - данные в формате JSON:
Var filteredData = $.parseJSON(data); filteredData.shift(); return JSON.stringify(filteredData.reverse()); ...
Для повышения иллюстративности примера в нем выполняются некоторые дополнительные операции. Во-первых, данные JSON преобразуются в массив JavaScript с помощью метода jQuery parseJSON. Затем из массива удаляется первый элемент с помощью метода shift(), а порядок следования остальных его элементов обращается с помощью метода reverse().
Все, что требуется от функции, - вернуть строку, и поэтому мы вызываем метод JSON.stringify(), зная, что jQuery преобразует данные в объект JavaScript, прежде чем вызвать функцию success. В данном примере была продемонстрирована возможность удаления элемента из массива, однако, в зависимости от ситуации, мы могли бы выполнить любой другой вид обработки.
Конечный результат представлен на рисунке:
Рассмотрение одной из самых любимых своих настроек я приберег напоследок. Должно быть, вы обратили внимание, что при получении определенных типов данных jQuery автоматически выполняет некоторые удобные преобразования. Например, получая данные JSON, jQuery предоставляет функцию success, использующую объект JavaScript, а не исходную необработанную строку JSON.
Для управления подобными преобразованиями используется параметр converters . Значением этого параметра является объект, устанавливающий соответствие между типами данных и функциями, используемыми для их обработки. В примере ниже показано, как использовать этот параметр для автоматического преобразования HTML-данных в объект jQuery:
$(function() { $.ajax({ url: "flowers.html", // В этом примере мы загружаем HTML-разметку, а не данные в формате JSON success: function(data, status, jqxhr) { var elems = data.filter("div").addClass("dcell"); elems.slice(0, 3).appendTo("#row1"); elems.slice(3).appendTo("#row2"); }, converters: { "text html": function(data) { return $(data); } } }); });
В этом примере регистрируется функция для типа данных text html. Обратите внимание на пробел между компонентами указываемого MIME-типа (в отличие от формы записи text/html). Функция принимает данные, полученные от сервера, и возвращает преобразованные данные. В этом случае преобразование данных заключается в передаче HTML-фрагмента, содержащегося в файле flowers.html, функции $() и возврате результата. Отсюда следует, что к объекту, передаваемому в качестве аргумента data функции success, применимы обычные методы jQuery.
Работая с преобразователями данных, можно слишком увлечься. Я всегда стараюсь избегать соблазна делать с помощью этих функций больше, чем следует. Например, иногда меня так и тянет применить к данным JSON шаблон и передать обратно полученные в результате HTML-элементы. И хотя этот прием очень удобен, он сослужит плохую службу, если кто-то другой будет пытаться расширить ваш код или, например, вам самому впоследствии потребуется организовать интенсивную обработку данных для получения их в исходной форме.
Настройка и фильтрация Ajax-запросовПосле того как вы познакомились с методом ajax() и доступными для работы с ним параметрами, мы можем рассмотреть несколько дополнительных методов, предоставляемых jQuery для упрощения настройки запросов.
Определение параметров, используемых по умолчаниюМетод ajaxSetup() позволяет установить значения параметров, которые будут применяться по умолчанию во всех Ajax-запросах, тем самым освобождая вас от необходимости настраивать параметры при каждом запросе. Пример использования этого метода приведен ниже:
") .text("Статус: " + status + " Ошибка: " + errorMsg) .insertAfter("h1"); }, converters: { "text html": function(data) { return $(data); } } }); $.ajax({ url: "flowers.html", success: function(data, status, jqxhr) { var elems = data.filter("div").addClass("dcell"); elems.slice(0, 3).appendTo("#row1"); elems.slice(3).appendTo("#row2"); } }); });
Метод ajaxSetup() вызывается с помощью функции jQuery $ аналогично тому, как это делалось в случае вызова метода ajax(). Аргументом метода ajaxSetup() является объект, содержащий значения параметров, которые вы хотите использовать по умолчанию для всех Ajax-запросов. В этом примере мы устанавливаем значения по умолчанию для параметров timeout, global, error и converters.
После того как был вызван метод ajaxSetup(), нам остается определить значения лишь те значения параметров, которые мы хотим изменить, или те, которые не предоставляются по умолчанию. Это обеспечивает значительную экономию времени в тех случаях, когда приходится делать множество запросов с одинаковыми значениями параметров.
Фильтрация запросовМетод ajaxSetup() определяет базовые значения конфигурационных параметров, применимые ко всем запросам Ajax. Возможности динамической настройки параметров для отдельных Ajax-запросов обеспечиваются методом ajaxPrefilter() . Пример использования этого метода приведен ниже:
$(function() { $.ajaxSetup({ timeout: 15000, global: false, error: function(jqxhr, status, errorMsg) { $("") .text("Статус: " + status + " Ошибка: " + errorMsg) .insertAfter("h1"); }, converters: { "text html": function(data) { return $(data); } } }); $.ajaxPrefilter("json html", function(settings, originalSettings, jqxhr) { if (originalSettings.dataType == "html") { settings.timeout = 2000; } else { jqxhr.abort(); } }) $.ajax({ url: "flowers.html", dataType: "html", success: function(data, status, jqxhr) { var elems = data.filter("div").addClass("dcell"); elems.slice(0, 3).appendTo("#row1"); elems.slice(3).appendTo("#row2"); } }); });
Указанная вами функция будет выполняться для каждого нового Ajax-запроса. Аргументами, передаваемыми функции, являются параметры запроса (включая любые значения по умолчанию, установленные вами с помощью метода ajaxSetup()), а также исходные параметры, переданные методу ajax() (исключая любые значения по умолчанию) и объекту jqXHR запроса.
Мы вносим изменения в объект, передаваемый в качестве первого аргумента, как показано в примере. В данном сценарии, если среди параметров, передаваемых методу ajax(), присутствует параметр dataType, то длительность тайм-аута устанавливается равной двум секундам. Чтобы предотвратить отправку всех остальных запросов, для объекта jqXHR вызывается метод abort().
Все начинающие web-мастера рано или поздно сталкиваются с проблемой динамического изменения данных на HTML странице, причем без перезагрузки этой самой страницы. И на помощь приходит, конечно же, JavaScript, но он не умеет обращаться к серверу и получать данные без перезагрузки страницы, но зато - это умеет AJAX , именно о нем мы сегодня и поговорим.
Примечание. Если Вы не знаете основы JavaScript, и не можете понять простой код на JavaScript, советую, для начала, прочитать вот эти статьи "JavaScript для начинающих – Простые примеры " и "JavaScript – Пример расширения формы регистрации " ,так как без знаний JavaScript учить AJAX бессмысленно!
Что такое AJAX?AJAX (Asynchronous JavaScript and XML ) - асинхронный JavaScript и XML, это механизм взаимодействия с сервером, посредствам которого происходит обмен данными с этим сервером, не перезагружая всю страницу целиком. Запрос на AJAX может быть не только асинхронный, но и просто синхронным, но такие запросы используются редко. Так как при таких запросах браузер зависает, до того момента пока не будет получен ответ с сервера, в отличие от асинхронного запроса, при котором посылается запрос и пользователь может делать на странице все что угодно, а когда будет получен ответ от сервера, сработает обработчик и появятся изменения на странице. Как посылать синхронные и асинхронные запросы научимся ниже в примерах.
Для чего нужен AJAX?И первое что приходит на ум это, конечно же, быстрый и удобный интерфейс для пользователя . Другими словами, пользователь любит, когда у него быстро все работает и не нужно делать лишних телодвижений, к тому же, чтобы это все красиво выглядело, JavaScript и AJAX с этим отлично справляются.
Второе, что хотелось бы отметить, это уменьшение нагрузки на сервер . Так как при перезагрузке страницы или при открытии новой страницы, нагрузка на сервер гораздо больше в отличие от запроса и получение конкретных данных. По-другому можно объяснить еще и так, при открытии страницы отрабатывают все серверные скрипты, которые нужны для отображения этой страницы, а при запросе через ajax отрабатывает только один скрипт, нужный для обработки конкретного запроса, а вывод на экран происходит уже с помощью JavaScript, который является клиентской технологией.
В-третьих, это, конечно же, уменьшение трафика , так как вес всей страницы намного больше небольшого куска данных, которые Вы будете получать через запрос на ajax.
Недостатки AJAXНе могу не отметить и небольшие недостатки данного механизма. Во-первых, JavaScript и AJAX работает на стороне клиента, поэтому для того чтобы все работало, нужно включить поддержку JavaScript в браузере , просто она, в целях безопасности может быть выключена и Ваше творение просто на всего может не работать.
Во-вторых, можно отметить то, что при использовании ajax полученные данные не индексируются поисковыми системами и, конечно же, нельзя поставить закладки в браузере.
Пример использования AJAXХватит теории, перейдем к практике. Сразу скажу, что ajax - это не сложно, и если Вы разобрались с JavaScript, то разобраться с ajax будет очень просто, даже легче чем с JavaScript!
И начну я с того, что весь ajax строится на объекте XMLHttpRequest , у которого есть несколько свойств и несколько методов, которые легко освоить и запомнить. Объект XMLHttpRequest - это своего рода мини-браузер, от имени которого и будет посылаться запрос к серверному скрипту.
Весь механизм начинается с создания этого объекта, и создать его можно по-разному, в старых браузерах это делается одним способом, а во всех новых другим способом. Если вдруг Вы не планируете использовать ajax на старых браузерах, например, Вы создаете ajax-приложение для корпоративной сети, в которой установлены современные браузеры, Вы можете смело создать этот объект одной строкой:
Var request = new XMLHttpRequest();
где, в переменной request и будет храниться наш объект.
Но если Ваше приложение могут использовать и в старых браузерах, то лучше использовать универсальный способ создания данного объекта, мне, например, нравится вот такой способ:
Function getXmlHttpRequest() { if (window.XMLHttpRequest) { try { return new XMLHttpRequest(); } catch (e){} } else if (window.ActiveXObject) { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){} try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } return null; }
Для создания объекта XMLHttpRequest мы просто вызовем функцию getXmlHttpRequest, которая вернет нам нужный объект.
Объект создан, теперь можно писать код на JavaScript, который будет формировать запрос на сервер, и обрабатывать данные, полученные с сервера.
Для того чтобы наш урок прошел полноценно, нам потребуется небольшой серверный скрипт, я буду использовать серверный язык программирования PHP, и наш скрипт будет просто возвращать текущие время на сервере. Назовем его mytime.php, его код:
Код mytime.php:
Здесь я думаю все понятно, мы проверяем параметр, пришедший к нам методом GET, т.е. MyTime, и если параметр действительно к нам пришел, то возвращаем текущие время на сервере. Советую при разработке ajax приложения на серверном скрипте делать больше проверок, так как ajax запрос можно подделать. Можно делать вот такие проверки, например:
- можно дополнительно посылать заголовок X-REQUESTED-WITH , а на серверном обработчике проверять его;
- также добавить проверку реферера, т.е. откуда пришел запрос;
- еще можно осуществлять проверку с помощью сессий.
Код index.php:
//функция создания объекта XMLHttpRequest function getXmlHttpRequest(){ if (window.XMLHttpRequest) { try { return new XMLHttpRequest(); } catch (e){} } else if (window.ActiveXObject) { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){} try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } return null; } function serverTime(){ // Объект XMLHttpRequest var request = getXmlHttpRequest(); /*свойство onreadystatechange это обработчик события, которое реагирует на любое изменения данного объекта*/ request.onreadystatechange = function (){ /*свойство readyState - состояние объекта 0 - не инициализирован 1 - открыт, 2 - отправка данных, 3 - получение данных, 4 - данные загружены рекомендую использовать только 4*/ if (request.readyState == 4) { /*свойство status это HTTP-статус ответа: 200-OK, 404-Not Found*/ if (request.status == 200){ var result = document.getElementById("MyId"); // Чтение ответа result.firstChild.nodeValue = request.responseText; // Вывод на экран } else document.write("Произошла ошибка. Обнови страничку"); } } // Адрес серверного скрипта var url = "mytime.php?MyTime"; /* Запрос на сервер, true означает что это асинхронный запрос если было бы false, то это синхронный запрос*/ request.open("GET", url, true); request.setRequestHeader("Content-type", "charset=utf8"); request.send(null); // посыл данных }
Вот два файла (mytime.php и index.php ), с помощью которых Вы легко можете проверить работу ajax, код этих файлов представлен выше.
Кстати, в вышеуказанном примере мы использовали передачу данных методом GET, есть много способов передачи данных и все основные данные передаются с помощью метода POST. Давайте переделаем нашу функцию serverTime, чтобы она передавала данные методом post, это сделать очень легко, так как поменять нужно всего несколько строк.
Код функции serverTime с передачей параметров методом post:
Function serverTime(){ var request = getXmlHttpRequest(); request.onreadystatechange = function (){ if (request.readyState == 4) { if (request.status == 200){ var result = document.getElementById("MyId"); result.firstChild.nodeValue = request.responseText; } else document.write("Произошла ошибка. Обнови страничку"); } } var url = "mytime2.php";//изменим адрес серверного обработчика var data = "MyTime=1";//задаем параметры request.open("POST", url, true); // указываем метод post //посылаем два заголовка: тип данных и размер данных request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); request.setRequestHeader("Content-Length", data.length); request.send(data); // посыл данных, вместо null вставляем переменную с параметрами }
Не забудьте изменить серверный обработчик, чтобы он проверял данные пришедшие методом post. Измените строку isset($_GET["MyTime"] на isset($_POST["MyTime"] и все будет работать точно так же, как и с помощью GET.
Как Вы заметили, ajax совсем не сложная штучка, хотя это только основы, но все равно если Вы разобрались, например, с JavaScript, то освоить ajax будет не проблема.
В сегодняшнем уроке мы рассмотрели только основы, в ajax есть еще что изучать (хотя не много), например, передача сложных данных и т.д., но надеюсь, этот урок Вам помог узнать, что же такое ajax и в следующих уроках мы продолжим изучать этот механизм взаимодействия с сервером!
Сейчас можно наблюдать, что в интернете приобретает популярность использование и применение новых технологий. Одна их них - это 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. Когда же используется необходимо выполнить полученный код, чтобы получить полноценный При этом необходимо проявить осторожность и учитывать тот факт, что многие злоумышленники любят передавать посредством этой технологии вредоносный код. Поэтому необходимо предусмотреть процедуру проверки полученных данных перед их обработкой. Особенности реализации для разных браузеров могут немного разниться, но, в целом, схема действия тут одна.
Делаем запрос к серверу и обработку ответа
Вся последовательность действий будет выглядеть следующим образом:
Следует рассказать о некоторых особенностях относительно создания объекта. Он может быть инициирован в любом месте, где это только возможно в рамках языка программирования. Но если ему присвоить статус глобального, то в какой-то один момент времени для него будет возможной только работа с одним запросом. Этому моменту необходимо уделить пристальное внимание. Относительно обработки - здесь ориентируемся по выбранному инструменту. Так, при XML данные необходимо обработать DOM-функциями и представить пользователю уже конечный результат в HTML. А что же делать с JSON-ном? Следует понимать, что он является объектной нотацией Javascript. Что это значит? Благодаря JSON можно представлять объект как строку. Но при этом необходимо помнить, что данный способ не является безопасным в полной мере, и необходимо будет учитывать кучу факторов. Но, в целом, он является весьма легким.
Серверные языки программированияПрактически любое веб-приложение использует их в той или иной мере. Для передачи данных наиболее популярным является PHP. На нём обычно пишут файлы для сайтов, где не является критически важным скорость передачи информации, а отдается предпочтение балансу между нею и надёжностью. Методы передачи XMLHttpRequest рассматривались выше.
Настраиваем сервер
Какие программы необходимы для того, чтобы полноценно работал AJAX? Что это нам даст? Для чего они нужны? Чтобы получить ответы на эти вопросы, следует ознакомиться со следующим списком:
Итак, сейчас у нас есть и теоретические знания, и представления о том, как работает AJAX. Отправка данных сейчас требует только определённой практики. Давайте же в целом посмотрим, как можно подходить к реализации поставленной задачи с использованием "Аякса". Итак, нам необходимо создать базу данных драйверов. Причем разниться они будут по устройствам, на которых могут работать. Следует отметить, что рассматриваемая база данных очень большая, поэтому просто пересылать её клиенту и уже ему предлагать делать выборку с помощью JavaScript нет смысла. Также нежелательно, чтобы сама веб-страница перезагружалась из-за одного параметра. На сервере запросы будут обрабатывать специальные скрипты РНР. БД реализована в виде XML-файла.
О базе данных
Необходимо проработать её структуру. А что делать, если передаются параметры, которые являются объектами? В таком случае необходимо предусмотреть создание переменной, где будет находиться ссылка не него, на случай вызова со стороны функции. Для возможности обращения к ней из любого места кода её нужно сделать глобальной. Для удобства желательно использовать Конечно, это не обязательно. Но всё же использование СУБД позволит работать с данными более удобно и эффективно.
Прорабатываем работу движкаКак же всё будет происходить? Итак, наступает определённое событие, которое будет вызывать особенную функцию. Она подготовит GET или POST-данные, которые будут пересылаться. Затем вызывается функция, которая сделает обращение к URL серверного скрипта. В ней необходимо предусмотреть создание XMLHttpRequest-объекта. Ссылку на него следует хранить в переменной. После того как данные были отправлены серверу, необходимо ждать от него ответа. Для этого можно включить «прослушку» до получения информации (если известно, что придёт и когда) или предусмотреть функцию, которая будет всегда готова принять данные. Первый вариант менее надёжен в случае возникновения внештатной ситуации. Вторая же реализация - более затратная с точки зрения ресурсов. Хотя, если это делается только относительно одной переменной, на быстром интернете это не скажется. Но если их сотни и тысячи, и они будут иметь большой размер, - тогда это будет другое дело. Поэтому необходимо искать баланс между пользованием имеющимися ресурсами и результативностью. Ведь следует понимать, что не все обладают оперативной памятью на 16 Гб. Для этого может устанавливаться определённое время ожидания, после которого подставляются предыдущие данные или информация о том, что сервер недоступен в данный момент времени.
Особенности
Когда с помощью "Аякса" создаётся интерфейс для страницы или приложения, то необходимо позаботиться о том, чтобы полученный результат хорошо работал как на разных операционных системах, так и на различных браузерах. В первом случае неоценимую помощь смогут оказать эмуляторы. Во втором случае достаточно будет просто установить различные программы и на них проверить работоспособность кода. Также необходимо предусмотреть определённые действия и на случай, если используемые пользователем браузеры будут устаревшими или он отключит необходимые настройки. В таких случаях следует позаботиться о выводе на страницу текста, в котором указана причина того, почему просмотр сайта в данном случае не является возможным. Да, сейчас подавляющее большинство людей использует современную технику, но не стоит полностью выпускать из внимания вероятность и того, что несколько процентов посетителей будут использовать несколько устаревшее программное обеспечение. А в масштабах бизнеса это может иметь значительные последствия.
ЗаключениеВот и подходит к логическому окончанию эта статья. Если говорить про "Аякс" в целом, то этот инструмент позволяет создавать очень привлекательные и многофункциональные сайты, которые быстро работают и при грамотной верстке доставляют своим пользователям одно удовольствие. Можно не сомневаться, что в будущем появятся ещё более совершенные технологии, но пока будем использовать то, что у нас есть. По мере усовершенствования языков программирования и их методов вполне возможным является и такой вариант, что станут доступными способы реализации, которые позволят создавать ещё более качественный продукт. Но как бы там ни было, работать нужно сейчас с тем, что есть. И имя этому - "Аякс".
