Адресная книга на ajax (текстовая версия)


Содержание

Технология AJAX

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Недостатки AJAX

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сайт целиком на ajax

Стоит ли так делать? Чтобы по всем страницам перемещаться и общаться с сайтом без перезагрузки страницы? Да, есть минусы вроде кнопки «назад» и т.п. мелочей.

Стоит ли для таких не малозначимых операций пользоваться jquery-методом $.ajax(), или самостоятелно вручную все проделывать лучше?

Мне на такую идею возразили, мол ajax не для этого придумали — так для чего же?

10 ответов 10

Сайт полностью на ajax не всегда идеологический бред, например, если это не совсем сайт, а веб-приложение. В некоторых случаях обновление страницы и переход по ссылкам просто не имеет смысла и не удобно, а удобна именно имитация desktop-приложения: диалоги с кнопками и т.п. Например, приложения для торговли на бирже.

Ajax создан для того, чтобы сделать отдельные страницы интерактивными.
Делать кашу из одной страницы это идеологический бред.

Ajax нужен, чтобы не перегружать страницу полностью, а обновить часть контента страницы. Помимо стандартных решений типа $.ajax, jsHttpRequest и т.д. нужно понимать, что необходимы будут прерывания, иначе сайт не будет работать так, как нужно.
А вообще, согласен, делать сайты на аяксе полностью — идеологический бред :)

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

стоит ли использовать $.ajax()? да, стоит, это ускоряет разработку и отлаживание ошибок.

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

AJAX FAQ для Java-разработчиков

Нам всем доводилось использовать технологию AJAX (Asynchronous Java Technology and XML, Асинхронная технология Java и XML) и многие из нас открывают здесь для себя целый новый мир.
В то время как многие программисты лишь случайно столкнутся с AJAX в рамках существующих систем (так мы будем далее переводить термин framework), вы, возможно, захотите исследовать эту технологию глубже или расширить уже имеющиеся функциональности.
Этот FAQ предназначен для Java-разработчиков, которые хотели бы добавить AJAX-функциональность в свои приложения.

Следует ли использовать AJAX?

Вне всякого сомнения, AJAX сейчас популярен, но, может быть, он не совсем подходит именно вам: его использование ограничено web-браузерами самых последних версий, а также заставляет решать вопросы совместимости web-браузеров и требует новых знаний и навыков. Поэтому прежде чем вы с головой погрузитесь в AJAX, вам стоит прочитать очень хороший блог (blog) Алекса Босворта (Alex Bosworth) на странице AJAX Mistakes.
С другой стороны, AJAX позволяет создавать web-приложения с богатыми интерактивными возможностями, которые реагируют на действия пользователя и выполняются действительно быстро.
Хотя утверждение о том, что приложения, использующие AJAX, работают быстрее, может показаться спорным, нельзя отрицать тот факт, что пользователи испытывают чувство незамедлительной реакции приложения, так как AJAX обеспечивает для них активную обратную связь в то время, как обновление данных происходит в фоновом режиме «за кадром».
Если вы не боитесь решать вопросы совместимости web-браузеров и готовы к получению новых навыков, AJAX — именно то, что вам нужно.
Для начала попробуйте изменить с помощью AJAX лишь небольшие части или компоненты ваших приложений. Нам всем нравятся новые технологии, однако не стоит забывать, что применение AJAX должно улучшать взаимодействие с пользователем, а не быть ему помехой.

AJAX и Java: совместная работа возможна?

Конечно. Java прекрасно работает вместе с AJAX! Вы можете использовать JavaEE-серверы (Java Enterprise Edition), чтобы создавать AJAX-страницы для клиентских web-приложений и обслуживать поступающие от них AJAX-запросы, управлять на стороне сервера состоянием объектов, связанных с клиентскими приложениями, использующими AJAX, и предоставлять AJAX-клиентам различные серверные ресурсы.
Компонентная модель JavaServer Faces отлично подходит для определения и использования AJAX-компонентов.

Предоставляют ли серверные системы средства для работы с AJAX?

Вполне вероятно, что вы уже пользуетесь преимуществами AJAX: многие существующие системы на основе Java обеспечивают определенное AJAX взаимодействие, а новые системы и библиотеки компонентов создаются с улучшенной поддержкой AJAX.
Я не стану приводить здесь список всех систем, базирующихся на Java и обеспечивающих работу с AJAX, из опасения что-то пропустить. Хороший список приводится на сайте www.ajaxpatterns.org/Java_Ajax_Frameworks.

Если вы еще не выбрали подходящую систему, я бы рекомендовал вам рассмотреть использование технологии JavaServer Faces (JSF) и инструментарий на базе этой технологии. Создание и использование JSF-компонентов позволяет абстрагироваться от рассмотрения многих деталей генерации JavaScript-кода, AJAX-взаимодействия клиента и сервера, обработки DHTML-данных и, таким образом, упростить применение технологии AJAX как разработчиками JSF-приложений, так и плагинами в JSF-совместимых интегрированных средах разработки (Integrated Development Environment, IDE), таких как Sun Java Studio Creator.

С чего начать?

Если система, которую вы используете, не вполне подходит для решения ваших задач и вы хотите разработать свои собственные AJAX-компоненты или дополнительную функциональность, начните со статьи Asynchronous JavaScript Technology and XML (AJAX) With Java 2 Platform, Enterprise Edition.

Самый простой пример с исходным кодом приводится в статье Using AJAX with Java Technology. Более полный список AJAX-ресурсов приводится на странице Blueprints AJAX Home.

Полезно изучить статью AJAX libraries and frameworks, чтобы не изобретать велосипед при разработке собственных клиентских AJAX-скриптов.

Книга AJAX in Action, написанная Дейвом Крейном (Dave Crane) и Эриком Паскарело (Eric Pascarello) совместно с Дарреном Джеймсом (Darren James) полезна Java-разработчику, поскольку содержит готовые примеры JavaScript.
Что необходимо знать, чтобы создать свою собственную AJAX-функциональность?

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

Dynamic HTML (DHTML) — технология, которая является основой для AJAX. DHTML обеспечивает взаимодействие пользователя с приложением в режиме реального времени средствами браузера. DHTML — сочетает в себе JavaScript, Документную Объектную Модель (Document Object Model, DOM) и Каскадные Таблицы Стилей (Cascading Style Sheets, CSS).

* JavaScript — это нестрого типизированный объектно-ориентированный язык сценариев, поддерживаемый всеми наиболее популярными web-браузерами и необходимый для организации AJAX-запросов. JavaScript код вызывается на странице в ответ на некоторое событие, такое как завершение загрузки страницы, щелчок мыши или нажатие клавиши на элементе формы.
* DOM — это API для работы со структурированными документами такими как XML или HTML. В большинстве случаев DOM представляет структуру XML- или HTML- документов.
* CSS позволяет вам определить внешний вид страницы: шрифты, цвета, размеры и расположение. CSS предназначен для четкого разделения содержания от внешнего представления, которое может быть изменено программно с помощью JavaScript.

Также важно понимать, что сутью HTTP протокола является механизм запросов/ответов (request/response). Многие трудноуловимые ошибки могут возникнуть, если вы игнорируете различия между методами GET и POST при настройке клиентского объекта XMLHttpRequest или при обработке кодов HTTP-ответов во время обратных вызовов.

JavaScript соединяет воедино все остальные части клиентского интерфейса. Во-первых, он используется для создания объекта XMLHttpRequest и запуска асинхронных вызовов. Во-вторых, JavaScript позволяет анализировать и обрабатывать возвращаемые с сервера данные и сообщения. И наконец, JavaScript позволяет добавлять новое содержание в HTML документ и изменять CSS стили, используя DOM API.

Действительно ли надо изучать JavaScript?

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

С другой стороны, JSF-компоненты (JSF components) и их библиотеки могут скрывать детали, касающиеся JavaScript, DOM и CSS. Эти компоненты могут сгенерировать для вас все необходимые составные части для обеспечения поддержки взаимодействий с использованием AJAX. Визуальные средства разработки, такие как Java Studio Creator, также позволяют применять JSF-компоненты c поддержкой AJAX для создания эффективных web-приложений, позволяя при этом разработчикам не заботиться о специфичных деталях реализации AJAX.

Если вы планируете разрабатывать свои собственные JSF-компоненты или обрабатывать генерируемые ими события, важно, чтобы вы были знакомы с основами JavaScript. Существуют клиентские JavaScript-библиотеки (смотри ниже), которые можно вызывать из JavaScript на своей странице и которые автоматически решают проблему несовместимости браузеров.
Кроме этого существует интересный Internet-ресурс, знакомящий Java-разработчиков с объектами JavaScript: Иерархия объектов и наследование в JavaScript (Object Hierarchy and Inheritance in JavaScript).

Какие JavaScript-библиотеки и системы предлагаются в помощь Java-разработчику?

Существует множество JavaScript-библиотек и наборов компонентов (еще большее количество появляется новых), которые помогают справляться с такими малоприятными проблемами, как различия браузеров. Рекомендуется обратить внимание на 3 хорошие библиотеки — The Dojo Toolkit, Prototype и DWR.

* The Dojo Toolkit содержит API и набор элементов GUI для поддержки разработки web-приложений со сложным графическим интерфейсом.
Dojo включает в себя интеллектуальную систему для формирования структуры web-приложения (packaging system), различные UI-эффекты, API для реализации механизма «drag and drop», API элементов управления GUI, обработки событий, API для хранения проектов и API для реализации AJAX-взаимодействия. Dojo помогает решать общие проблемы пользователя (usability), такие как действия при навигации между web-страницами, способность распознать нажатие кнопки «Back» в браузере или изменения в строке ввода URL для создания закладки (bookmarking), способность отключать лишнюю функциональность, если AJAX/JavaScript не полностью поддерживаются клиентом-браузером.
По богатству возможностей, универсальности и удобству использования JavaScript-библиотеку Dojo можно сравнить со швейцарским армейским ножом. Она предоставляет широчайший набор опций и поддерживает как новые, так и старые браузеры.
* Prototype специализируется на AJAX-взаимодействиях и содержит AJAX-объект, который включает в себя несколько объектов, предназначенных для выполнения основных задач, таких как формирование HTTP-запросов, обновление части документа однократно или периодически, вставка нового содержимого в документ, периодическое обновление части документа. Кроме того, эта JavaScript-библиотека содержит набор объектов для представления AJAX запросов и набор функций для доступа к компонентам на странице и манипулирования DOM-объектами. Script.aculo.us и Rico являются надстройками над Prototype и предоставляют UI-эффекты, поддержку «drag and drop», а также включают общие элементы управления GUI, ориентированные на JavaScript.
Технологии Prototype достаточно в случаях, когда требуется только поддержка AJAX-взаимодействий и решение некоторых основных задач. Если же необходимы и UI-эффекты, подойдут Rico и Script.aculo.us.
* Yahoo UI Library — это библиотека утилит и набор элементов управления GUI, использующий API для поддержки сложных клиентских приложений. Она включает поддержку AJAX и событий, распространяемую на все виды браузеров, анимацию, DOM, реализацию механизма «drag and drop» и обмен событиями между браузерами. Yahoo UI Library хорошо документирована и содержит много примеров.
* DWR (Dynamic Web Remoting) — это система, включающая как клиентскую, так и серверную часть, который ориентирован на использование разработчиками механизма вызовов удаленных процедур (Remote Procedure Calls, RPC) между клиентскими сценариями на JavaScript и серверными Java-объектами (plain old Java objects, POJO) , развернутых на Java EE web-контейнере.
На серверной стороне DWR использует сервлеты для взаимодействия с Java-объектами и возвращает или объект-представление данного Java-объекта, или XML-документ.
DWR легко кооперируется с другими технологиями Java. Если вам нужна среда с тесно интегрированными клиентской и серверной частями, используйте DWR.
* Zimbra — клиент-серверная система, ориентированная на обмен сообщениями и доставку e-mail в сложных клиентских приложениях на базе JavaScript. Zimbra включает API для набора инструментов UI, учитывающий различия между браузерами и предоставляющий множество встроенных элементов управления GUI, API событий для обмена событиями как между элементами управления UI, так и между клиентом и сервером, вспомогательные классы, упрощающие разработку клиентской функциональности на JavaScript, надстройку над DOM, которая облегчает решение вопросов, касающихся несовпадения реализаций DOM в разных браузерах, и сетевые API, которые помогают JavaScript-клиентам общаться через AJAX и SOAP.

Илон Маск рекомендует:  font-size в CSS

Существует множество устаревших библиотек и совершенно новых библиотек для JavaScript, но вышеприведенный список дает обзор только нескольких неспециализированных библиотек. Вы можете выбрать как одну библиотеку, так и использовать несколько в соответствии с вашими потребностями. Вот более широкий список клиентских систем: Survey of AJAX/JavaScript Libraries.

Какой тип возвращаемого значения — XML, plain text, JavaScript или HTML — следует использовать?

Понятно, что символ ‘X’ в слове «AJAX» означает «XML», но поклонники AJAX быстро обратили внимание, что, по существу, ничто в AJAX не мешает использовать другие типы выходных наборов данных: JavaScript, HTML или plain text.

* XML — web-сервисы и AJAX, кажется, созданы друг для друга. Вы можете использовать клиентский API c для загрузки и анализа XML-данных с web-сервиса, поддерживающего архитектуру REST (Representational State Transfer). (Однако имейте ввиду, что для некоторых web-сервисов, базирующихся на архитектуре SOAP, возвращаемые данные могут быть достаточно большими и сложными и, таким образом, не годиться для технологии AJAX).
* Plain Text — сгенерированный сервером текст может быть вставлен в документ или проанализирован приложением-клиентом.
* JavaScript — этот вариант является расширением предыдущего варианта plain text с тем лишь исключением, что сервер возвращает фрагмент сценария JavaScript, включая объявление объектов JavaScript. Используя JavaScript-функцию eval(), вы можете затем создать этот объект на стороне клиента. JSON, который представляет собой спецификацию по обмену данными на основе JavaScript-объектов, полагается именно на такую технику.
* HTML — включение сгенерированного сервером HTML-фрагмента непосредственно в web-документ обычно является весьма эффективной AJAX-техникой. Однако, бывает затруднительно сохранить соответствие между HTML-кодом, созданном на сервере, и тем, что будет показано в браузере клиента.

Mashup — это популярный термин, обозначающий создание совершенно нового web-приложения путем объединения данных от различных web-сервисов и другого online ПО. Хороший пример mashup — housingmaps.com, который наглядно объединяет объявления по жилью с craiglist.org и географические карты с maps.google.com.

Существуют ли в AJAX проблемы с удобством использования (так мы будем далее переводить термин usability)?

В результате использования техники динамического обновления web-страницы с помощью данных, полученных через AJAX-взаимодействие и DHTML, внешний вид страницы и ее структура могут сильно измениться.
Пользователь может захотеть в любое время нажать кнопки браузера «Back» или «Forward», создать закладку для страницы, скопировать URL страницы из строки URL браузера и поделиться ею с другом через e-mail или чат, распечатать страницу. Поэтому при проектировании AJAX-приложений вам необходимо все тщательно продумать, чтобы ожидаемое поведение при навигации, создании закладок, печати и прочих действий в браузере было бы таким, как описано ниже.

* Навигация (Navigation).
Какой ожидается реакция вашего приложения на кнопки браузера «Back», «Forward», «Refresh», «Bookmark»? Вы могли бы реализовать требуемое поведение самостоятельно (manually), но, может быть, проще использовать JavaScript-среду, такую как Dojo, которая предоставляет API для манипуляций с историей загрузки страниц в браузере и управления навигацией.
* Создание закладок и манипуляции с URL (Bookmarking and URL sharing).
Многие пользователи хотят создавать закладки или копировать/вставлять URL в соответствующую строку браузера. Dojo содержит API для выполнения этих действия.
* Печать (Printing).
В некоторых случаях печать динамически формируемых страниц может представлять сложность.

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

* Поддержка браузера (Browser Support).
Не все браузеры (и не все их версии) поддерживают полный набор функций AJAX/DHTML. Смотрите quirksmode.org со списком браузеров, поддерживающих AJAX, и возможными способами решения проблем.
* Запрет на выполнение JavaScript.
Вы должны предвидеть, что произойдет, если пользователь запретит выполнение JavaScript (может быть несколько законных причин, по которым поддержка JavaScript и CSS может отключаться в web-браузере пользователя).
* Задержка (Latency).
Помните о задержке при проектировании приложения. Уже работающее приложение будет отвечать на запросы гораздо быстрее, чем то, которое было только что запущено на сервере, но к которому еще не было обращений. Также помните о том, что если почти одновременно было сделано несколько клиентских запросов, такой же порядок ответов сервера не гарантирован. Более детальное обсуждение вопросов задержки можно найти на сайте Проблемы задержек в AJAX: миф или реальность?
* Accessibilty.
Предоставление доступа к вашему сайту людям с ограниченными возможностями (инвалидам) не только приветствуется, но также является требованием законодательства во многих случаях при продажах. Существуют некоторые удивительные адаптирующие технологии, которые помогают людям получать доступ к Web-ресурсам, несмотря на ограниченные возможности зрения, слуха, речи, физические ограничения. Изучив некоторые хорошо документированные методики и немного поразмышляв, вы сможете сделать свои приложения совместимыми с этими технологиями обеспечения доступа.

Degradability — это термин, используемый для описания технических приемов, предназначенных для адаптирования приложений к широкому диапазону web-браузеров. Многие AJAX-библиотеки имеют встроенную degradability. Но если вы будете создавать свою собственную AJAX-функциональность, просто следуйте практическим рекомендациям, предоставляемым организациями по выработке стандартов, такими как World Wide Web Conrsoritum (W3C), продвижению стандартов, такими как Web Standards-сообщество, и многими другими. В этом случае ваше приложение может работать эффективно в браузерах, которые не поддерживают AJAX, т.к. даже утратив часть своих эффектных возможностей при выполнении в таких менее «способных» браузерах, ваше приложение все равно будет готово к использованию.

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

Как отладить JavaScript?

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

* Firefox/Mozilla/Netscape — имеют очень полезный встроенный отладчик Venkman. Я изначально разрабатываю мои приложения в Firefox, а затем переношу их на другие браузеры.
* Safari — имеет отладчик, который требуется включить в работу. Подробности смотрите на: Safari FAQ.
* Internet Explorer — имеется документация по отладке JavaScript: MSDN Documentation. Также может быть полезна панель инструментов разработчика (developer toolbar) для Internet Explorer.

При использовании отладчиков может также применяться и знание общих технических приемов, как например отладочный вывод («Alert Debugging»). Вы просто помещаете вызов функции «alert()» внутри кода JavaScript подобно вызову System.out.println() в java-коде. Этот маленький фрагмент годится для большинства случаев.
Некоторые системы, такие как Dojo, предоставляют API для трассировки отлаживаемых операторов.

Какой HTTP-метод — GET или POST — надо использовать для AJAX-вызовов?

HTTP метод GET следует использовать для получения данных, возвращаемых по URL-запросу, параметры которого не будут меняться. Если же состояние обновляется на сервере, следует использовать HTTP-метод GET. Если же данные клиентского AJAX-запроса будут обновляться на сервере, должен использоваться HTTP-метод POST.
Эти правила согласуются с HTTP idempotency recommendations. Их настоятельно рекомендуется соблюдать для сохранения непротиворечивости архитектуры web-приложения.

Как предоставить многоязычную поддержку для AJAX-запросов?

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

* Присвойте набору символов (charset) на вашей web-странице ту кодировку, которая поддерживается выбранными вами языками. Я обычно использую UTF-8, поскольку она охватывает большинство языков. Вот мета-декларация для HTML/JSP-страницы, задающая кодировку данных:

* В JavaScript-сценариях необходимо кодировать все параметры, передаваемые на сервер. JavaScript имеет функцию escape(), которая возвращает escape-последовательность (текстовую строку) в кодировке Unicode, где все национальные символы заменены своим шестнадцатиричным представлением. Более подробно см.: Сравнение escape(), encodeURI(), and encodeURIComponent().
* На серверной стороне задайте кодировку символов с помощью метода HttpServletRequest.setCharacterEncoding() перед тем, как вы будете извлекать локализованный параметр с помощью вызова HttpServletRequest.getParameter(). В случае UTF это будет выглядеть так: request.setCharactherEncoding(«UTF-8»);.

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

Для дополнительной информации по применению AJAX с JEE технологиями см.: AJAX and Internationalization, а для разработки многоязычных приложений: Developing Multilingual Web Applications Using JavaServer Pages Technology.

Как обрабатывать параллельные AJAX-запросы?

Используя JavaScript, можно одновременно обрабатывать несколько AJAX-запросов. Чтобы гарантировать правильный порядок их последующей обработки, рекомендуется использовать технику JavaScript Closures.
Пример ниже показывает использование XMLHttpRequest-объекта, скрытого внутри другого JavaScript-объекта с именем AJAXInteraction. В качестве аргументов функции AJAXInteraction() вы передаете URL, на который посылается HTTP-запрос, и функцию (callback), которая вызывается после обработки запроса сервером.

Функция makeRequest() в приведенном примере создает объект AJAXInteraction с 2 параметрами: URL со значением «processme» и inline-функцию, которая будет показывать Alert-диалог с сообщением «Doing Post Process». Когда выполняется вызов ai.doGet(), инициируется AJAX-взаимодействие и, когда серверный компонент, связанный с URL «processme», возвратит документ, тот передается callback-функции, которая была определена при создании AJAXInteraction.

Применение техники » closures» гарантирует, что будет вызываться именно та callback-функции, которая связана с соответствующим AJAX-взаимодействием. Однако следует проявлять осторожность при создании большого числа closure-объектов в том смысле, что создание новых объектов XmlHttpRequests (как это сделано в примере) будет ограничено числом сокетов (sockets), используемых для передачи запросов в данный момент времени. Это происходит вследствие ограничения на число запросов, которые могут выполняться параллельно. Например, Internet Explorer разрешает только 2 одновременных AJAX-запроса в данный момент времени. Другие браузеры могут разрешать большее число запросов, но обычно от 3 до 5. Вы также можете использовать пул AJAXInteraction-объектов.

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

Много полезного можно почерпнуть из обсуждения, озаглавленного Ajaxian Fire and Forget Pattern.

Что надо сделать на сервере для взаимодействия с AJAX-клиентом?

Заголовку «Content-Type» должно быть присвоено значение «text/xml». В сервлете это можно сделать с помощью метода HttpServletResponse.setContentType() — надо передать ему значение «text/xml», когда возвращаемые данные имеют тип XML. Однако многие реализации XMLHttpRequest дадут ошибку, если будет указан заголовок «Content-Type». Фрагмент кода ниже показывает, как задать значение для «Content-Type»:


Вы можете также задать значение заголовка «Cache-Control», например, при использовании автозаполнения, чтобы дать понять proxy-серверу и браузеру не кэшировать полученные результаты:

Замечание для разработчиков: Internet Explorer автоматически будет использовать кэшированные результаты AJAX-ответов на HTTP-запросы по методу GET, если данный заголовок не задан, что может представлять трудность для разработчиков. При разработке это следует учитывать и присваивать значение этому заголовку.

Где следует хранить состояние клиента при использовании AJAX?

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

* На стороне клиента в cookies.
Размер данных в этом случае ограничен — примерно, 80 Кб (обычно около (4 Кб * 20 cookies) на домен). Кроме того, данные могут быть не защищены, если их не шифровать (при использовании JavaScript это трудно, но все же возможно).
* На стороне клиента в содержимом web-страницы.
Это более защищенный вариант, но он может затруднить работу. Подробности по этой теме можно найти на Storing State on the Client.
* На стороне клиента в файловой системе.
Это осуществимо лишь в том случае, если клиент предоставит приложениям, выполняемым в браузере, право доступа на запись в файлы локальной файловой системы. В зависимости от различных условий это может быть необходимо, но надо соблюдать осторожность.
* На сервере.
Это ближе всего к традиционной модели, где клиент служит лишь для визуализации данных, хранящихся на сервере. Поддержание синхронности данных между клиентом и сервером может оказаться проблематичным, но для этого есть решение: Refreshing Data.

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

При создании формы следует в элементе «form» назначить атрибуту «onSubmit» имя соответствующей JavaScript-функции, которая возвращает значение false:

Также для отправки формы можно использовать кнопку (input-элемент «button» в элементе «form»), назначив ей аналогичным образом соответствующую JavaScript-функцию:

Обратите внимание, что значение атрибута формы «onSubmit» задано и в этом примере. Это сделано для того, чтобы корректно обрабатывать ситуации, когда пользователь, например, во время редактирования текстового поля нажмет клавишу «Enter» и форма будет отправлена.

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

Кто должен управлять приложением — сервер или клиент?

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

* Управление сосредоточено на сервере.
Ключевая проблема при централизованном управлении — обеспечение синхронизации данных, представленных на клиентской web-странице, с аналогичными данными, хранящимися на сервере. Для решения этой проблемы можно, например, сделать так, что приложение будет хранить все свои данные на сервере и передавать все изменения в клиентском представлении (DOM) с помощью простого JavaScript-контроллера.
* Управление распределено между клиентом и сервером.
Эта архитектура использует JavaScript для обработки событий, манипуляций со страницей, управления внешним видом страницы и визуализации модели данных у клиента. Серверная же сторона отвечает за управление бизнес-логикой и передачей измененных данных модели клиенту. В этом случае сервер ничего не знает о внешнем представлении за исключением начальной страницы, данные для которой отсылаются им в ответ на клиентский запрос.

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

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

Есть ли проблемы с безопасностью при использовании AJAX?

Если пользователь выберет режим просмотра исходного текста HTML-страницы (view page source), он сможет увидеть все содержащиеся на этой странице JavaScript-сценарии в виде обычного текста.
Но JavaScript по умолчанию не имеет доступа к локальной файловой системе, если пользователь специально не предоставит такие права. AJAX-взаимодействие может осуществляться только с теми серверными компонентами, которые содержатся на том же сервере, откуда была загружена текущая web-страница. Для AJAX-взаимодействий с внешними сервисами следует использовать proxy-шаблоны.

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

Введение в AJAX

История и текущее состояние популярного подхода к разработке Web-приложений

За последние несколько лет язык JavaScript прошел путь от «вечно отстающего» и объекта насмешек до ключевого языка Web-программирования. Если попытаться выделить ключевой фактор, способствовавший росту популярности JavaScript, то это появление приложений на основе технологии AJAX.

Наработка навыков использования JavaScript

Эта статья является частью курса по развитию навыков использования JavaScript. Дополнительную информацию можно найти в полном руководстве по JavaScript.

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

Краткая история AJAX

История технологии AJAX, которая, казалось бы, мгновенно завоевала огромную популярность, похожа на историю других прорывных технологий. Хотя кажется, что эта технология появилась из ниоткуда, на самом деле для этого потребовалось определенное время. Несколько лет исследований в области Web-разработки привели к созданию инструментов и подходов, которые распространялись под «брендом» AJAX. Начиная с эры DHTML в период первоначального Интернет-бума и на протяжении «темных» лет после массового краха доткомов разработчики по всему миру открывали для себя неожиданные возможности JavaScript, открывающие новые пути для разработки Web-приложений.

XMLHttpRequest

Первый и самый важный компонент технологии AJAX – это XMLHttpRequest (XHR) API. XHR – это JavaScript API для передачи данных в виде сообщений между Web-браузером и Web-сервером. Этот API позволяет использовать HTTP POST -запросы (для передачи данных на сервер) и GET -запросы (для загрузки данных с сервера в фоновом режиме). XHR – это «ядро» большинства AJAX-вызовов и одна из важнейших технологий в современном Web-программировании.

Наконец, XHR — это лучший подарок Интернет-сообществу, сделанный командой Microsoft® Internet Explorer®.

Это действительно так. XHR впервые появился в пятой версии Internet Explorer в 2000 г. Изначально написанный Алексом Хопманном (Alex Hopmann) в виде элемента управления Microsoft® ActiveX®, XHR был создан для использования в Microsoft Outlook® Web Access и предназначался для «сглаживания» взаимодействия между передовым для того времени пользовательским интерфейсом и Microsoft Exchange Server.

Хотя пакет от Microsoft нельзя считать скромным началом, но XHR определенно переросл рамки исходного продукта. С тех времен XHR был интегрирован во все основные Web-браузеры и даже был признана W3C в качестве стандарта.

Первооткрыватели

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

Oddpost

Oddpost — это функционально насыщенный Web-клиент для электронной почты, выпущенный в 2002 году. В нем использовались многие подходы, сохранившие популярность и по сей день. По стилю и функциональности он напоминал стандартный клиент для работы с электронной почтой. Но в его реализации применялась технология DataPacks, позволяющая передавать небольшие фрагменты данных между сервером и Web-браузером. В то время такое решение считалось инновационным.

В дальнейшем Oddpost был куплен компанией Yahoo! и использовался в качестве основы при создании обновленной версии Yahoo! Mail.

Google Maps, Google Suggest, Gmail и одна важная статья

Видимые изменения начались несколько лет назад с появления Gmail, Google Suggest и Google Maps. Все эти проекты интенсивно использовали AJAX-подход и радикально изменили область разработки Web-приложений. Их отзывчивость и интерактивность поразили рядовых пользователей, и продукты Google быстро завоевали популярность у активной части Интернет-сообщества.

Хотя не все об этом знали, но область разработки Web-приложений ожидали еще более значительные изменения. Пользователи понимали, что Web-приложения меняются и приобретают новые замечательные возможности, но в чем конкретно заключаются эти изменения, было неизвестно.

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

18 февраля 2005 года Джесси Джеймс Гаррет (Jesse James Garrett), сооснователь и президент компании Adaptive Path, написал статью «Ajax: A New Approach to Web Applications» (см. ссылку в разделе Ресурсы). В этой статье он описал подход к разработке Web-приложений, который уже использовался в таких приложениях, как Gmail и GoogleMaps. Он назвал это «фундаментальным сдвигом в возможностях, доступных Web-приложениями».

Также он дал название данному подходу. Это важно, так как новый термин сфокусировал внимание сообщества на самом тренде и стал отправной точкой для обсуждения новых возможностей разработки Web-приложений. В статье Гаррета термин AJAX описывался следующими словами.

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

  • стандартное представление с помощью XHTML и CSS;
  • динамическое отображение и интерактивность благодаря DOM;
  • обмен и манипулирование данными с помощью XML и XSLT;
  • асинхронное получение данных с помощью XMLHttpRequest;
  • использование JavaScript для интеграции вышеперечисленных технологий.

Хотя это техническое описание несколько устарело, основная идея сохранилась: HTML и CSS представляют данные и стиль; DOM и связанные с ней методы позволяют обновлять страницу в режиме реального времени, XHR отвечает за общение с сервером, а JavaScript управляет процессом в целом.

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

Библиотеки

Одним из ключевых факторов, способствовавших развитию Web-разработки на основе AJAX, стало появление и внедрение нескольких высокофункциональных JS-библиотек. За исключением опытных JS-разработчиков мало кто в действительности понимал, как работают технологии, формирующие AJAX. Поэтому, хотя многие аспекты интерактивности и анимации внутри Web-браузера в эпоху DHTML были доведены почти до предела возможного, сложность использования AJAX привела к большому разрыву между потребностями в Web-сайтах с AJAX-возможностями и количеством людей, способных создавать такие интерфейсы с нуля. Библиотеки, подобные Prototype, Dojo и jQuery, помогли преодолеть этот разрыв, предоставив готовую функциональность, которая позволила реализовать анимацию и интерактивность, преодолеть различия между Web-браузерами и сгладить недостатки базового JavaScript API.

Илон Маск рекомендует:  HTML статьи, примеры и другое о html

Асинхронный JavaScript и не только

Одним из крупнейших изменений в мире AJAX с момента его зарождения и до сегодняшнего дня стало появление JSON — протокола для обмена данными на основе JavaScript. JSON, благодаря небольшому объему передаваемой информации и удобному доступу с помощью родного JavaScript API (в отличие от сложных методов и свойств, основанных на DOM и XML), был быстро принят разработчиками в качестве стандартного транспортного протокола. С момента своего появления JSON также успел попасть в последнюю 5-ую версию спецификации ECMAScript.

JSON+Padding

Стоит также упомянуть одно важное усовершенствование исходной спецификации JSON — JSON+Padding (JSONP). Как будет показано, объект XMLHttpRequest обладает строгой моделью безопасности, которая допускает взаимодействие только в рамках того же домена и протокола, которые использовались при запросе страницы. JSONP предоставляет элегантный способ обойти это ограничение, поместив JSON-отклик в callback-функцию или переменную, объявленную пользователем. После того, как JSON сценарий будет добавлен в документ, доступ к данным, лежащим в объекте, можно будет получить через этот метод. Сегодня этот подход стал фактически стандартом. Например, крупные Web-сервисы используют его для объединения и связывания информации из разных источников.

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

Теперь, после изучения истории, можно переходить к изучению самой технологии. Так как базовый JavaScript API находится «в тени» библиотек, то даже для опытных разработчиков будет интересно узнать, как всё это работает на самом деле.

XMLHttpRequest API и его возможности

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

Модель безопасности

Как уже говорилось, исходный объект XMLHttpRequest обладает четкой моделью безопасности. Политика «same-origin» (объекты, происходящие из одного места) позволяет взаимодействовать только с тем хостом, протоколом и портом, которые использовались запрошенной страницей. Это означает, что общение между различными доменами (example.com и example2.com), различными хостами (my.example.com и www.example.com) и различными протоколами (http://example.com и https://example.com) запрещено и приводит к возникновению ошибки.

Однако благодаря разработке консорциумом W3C второй версии XHR-объекта и нового протокола Cross-origin Request Protocol и реализации этих концепций в большинстве Web-браузеров, включая InternetExplorer 8+, Mozilla Firefox 3.5+, Apple Safari 4+ и Google Chrome, появилась возможность выполнять запросы между доменами. Хотя для этого и потребовалось время, но теперь, указав в запросе специальный заголовок Origin :

и настроив сервер отправлять обратно соответствующий заголовок Access-Control-Allow-Origin :

стало возможным осуществлять дуплексное взаимодействие между доменами с помощью XHR-объектов.

Запрос (request)

Со стороны запроса доступны следующие четыре метода:

  • open() – открывает подключение к серверу и принимает несколько аргументов:
    • method — используемый HTTP-метод (допускается POST или GET )
    • url — запрошенный URL-адрес.
    • async — необязательный Boolean -параметр, сигнализирующий о том является ли запрос асинхронным или нет (по умолчанию равен True ).
    • user – необязательный параметр, содержащий имя пользователя для аутентификации.
    • password – необязательный параметр, содержащий пароль, используемый для аутентификации.
  • setRequestHeader() – устанавливает заголовки запроса и принимает два аргумента: header (имя заголовка) и value (значение заголовка).
  • send() – отправляет запрос и может принимать необязательный параметр, содержащий тело POST -запроса.
  • abort() – прерывает отправку запроса.

Ответ (response)

Объект response также обладает определенными атрибутами и методами:

  • status – стандартный HTTP-статус запроса (например, в случае успешного выполнения запроса будет возвращено значение 200 ).
  • statusText – строка, содержащая полное описание статуса, возвращенного Web-сервером (например, 304 Not Modified ).
  • getResponseHeader() – возвращает значение определенного заголовка ответа; в качестве параметра принимает имя запрашиваемого заголовка.
  • getAllResponseHeaders() – возвращает текстовое содержание всех заголовков ответа.
  • responseText – атрибут, в котором хранится текстовое представление тела запроса.
  • responseXML – атрибут, содержащий XML-представление тела запроса – фрагмент документа с DOM и всеми соответствующими методами.

Состояние readyState

После создания объект XMLHttpRequest может находиться в одном из пяти состояний, перечисленных ниже:

  • 0: UNSENT – объект только что был создан.
  • 1: OPENED – был успешно вызван метод open() данного объекта.
  • 2: HEADERS_RECEIVED – заголовки ответа были успешно загружены.
  • 3: LOADING – тело ответа загружается.
  • 4: DONE – запрос был выполнен, но неизвестно – успешно или нет (информацию о результате выполнения запроса можно получить с помощью стандартных статусов и заголовков HTTP-ответа).

Пример, использующий базовый JavaScript API

Прежде чем переходить к рассмотрению популярных библиотек, стоит изучить несколько примеров на «чистом» JavaScript, чтобы разобраться, как работает базовая технология. Все представленные примеры можно найти в разделе «Материалы для скачивания» и запустить на любом Web-сервере с поддержкой PHP. Все примеры работают с документом, представленным в листинге 1.

Листинг 1. Пример HTML-документа

В листинге 2 представлен простой GET -запрос, обрабатывающий объект responseXML . Этот пример AJAX-вызова выполнен в духе первых лет этой технологии, но он работает во всех современных Web-браузерах, включая Internet Explorer версий 7 и 8.

Листинг 2. Базовая AJAX-функция

В листинге 3 используется оригинальный ActiveX объект. В случае, если его реализация отсутствует, с помощью блока try … catch выполняется поиск потенциальных ссылок на этот объект в других версиях Internet Explorer. Этот пример полностью совместим с различными версиями Web-браузера Internet-Explorer начиная с версии 5.

Листинг 3. AJAX-сценарий, совместимый с различными Web-браузерами семейства IE

В листинге 4 приведен подход, чаще всего используемый сегодня: получение объекта responseText в формате JSON и преобразование его в «родной» JS-объект. Как видно из примера, работать с JSON-данными очень просто. Если сравнить этот листинг с порой неочевидными и многословными методами обработки XML-данных, станет ясно, почему большинство разработчиков в качестве транспортного протокола выбрали именно JSON.

Листинг 4. Использование JSON

Во всех последующих листингах (с 5 по 11) используются JSON-данные.

В листинге 5 приведен простой пример JSONP. Как можно заменить, в нем полностью игнорируется XHR, а к сценарию просто добавляется callback-аргумент. Когда callback-вызов срабатывает (сервер возвращает ответ), полученный объект с данными помещается в исполняемый JS-код.

Листинг 5. Пример использования JSONP

Использование AJAX-библиотек

Для большинства программистов внутренняя структура AJAX-запроса интересна только с академической точки зрения, так как основная часть их работы выполняется в контексте одной или нескольких JS-библиотек. Кроме решения проблем совместимости между различными Web-браузерами, библиотеки также предоставляют функциональность, надстроенную над базовым API. В следующих примерах показывается, как выполнять GET — и POST — запросы с помощью API трех наиболее популярных библиотек.

jQuery

Сначала рассмотрим пример, использующий популярную библиотеку jQuery. Поддержка AJAX в jQuery была не так давно переписана, чтобы добавить новую функциональность, описание которой выходит за рамки данной статьи. Однако общей чертой всех AJAX-запросов в jQuery является наличие объекта с конфигурацией, передаваемого функции в качестве аргумента. Стоит отметить, что в jQuery есть несколько удобных методов, таких как $.post и $.get, служащих для быстрого доступа к конфигурации стандартных запросов.

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

Листинг 6. Реализация GET-запроса в jQuery

В листинге 7 показано, как использовать POST -запрос для получения JSON-объекта. В данном случае для «разбора» полученных данных используется «родной» объект JSON. В документации jQuery говорится о том, что неподдерживающие Web-браузеры необходимо дополнить сценарием JSON2.js.

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

Листинг 7. Реализация POST-запроса в jQuery

Как будет видно из следующих примеров, библиотека Dojo способна на большее, нежели простое манипулирование DOM-объектом и отправка AJAX-запросов. Её возможности позволяют создавать самые сложные приложения, но все равно стоит изучить её API и с такой «начальной» позиции.

В Dojo есть две специальные AJAX-функции: xhrGet и xhrPost . Кроме того, для разбора полученных данных используется JSON-утилита, входящая в Dojo. В листинге 8 приведен пример создания GET -запроса.

Листинг 8. Реализация GET-запроса в Dojo

В листинге 9 приведен пример обработки POST -запроса с конфигурацией обработчика ошибок.

Листинг 9. Реализация POST-запроса в Dojo

Yahoo! User Interface (YUI)

В библиотеке YUI используется немного другой подход, отличающийся от рассмотренных ранее. При использовании YUI всегда возвращается XHR-объект полностью, а не только «разобранные данные», что обеспечивает лучший доступ к данным, хранящимся в запросе, и позволяет более гибко манипулировать ими. Также это значит, что программист должен знать особенности внутренней реализации XHR-объекта. В виде отступления от основной темы в примерах показывается, как использовать загрузочный модуль YUI.use() , который хотя и не относится непосредственно к AJAX (за исключением загрузки модуля io ), но заслуживает отдельного упоминания. В листинге 10 этот модуль в качестве аргументов принимает список из других YUI-модулей и callback-функцию. После запуска он создает пакет, в котором все необходимые модули содержатся в одном CDN-артефакте, загружаемом с Web-портала Yahoo! Content Delivery Network.

Листинг 10. Реализация GET-запроса в YUI

В листинге 11 приведен пример реализации POST -запроса, в котором используется интересный приём: выделение функций для обработки запроса в отдельный объект on .

Листинг 11. Реализация POST-запроса в YUI


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

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

Заключение

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

Ресурсы для скачивания

  • этот контент в PDF
  • примеры кода для этой статьи (sample-ajax-code.zip | 18KB)

Похожие темы

  • An introduction to Ajax: оригинал статьи (EN).
  • The Story of XMLHttp (Alex Hopmann) (EN): статья об истории XMLHttp.
  • Ajax: A New Approach to Web Applications (Jesse James Garret) (EN): статья-манифест, в которой впервые был подробно описан AJAX-подход.
  • JSON.org: Web-сайт, посвященный JSON.
  • ECMA-262 ECMAScript Language Specification 5th edition (декабрь 2009) (EN): информация о стандартизированной версии JSON.
  • Спецификация XMLHttpRequest 2 (EN).
  • Cross-origin Resource Sharing: публикация W3C, посвященная обмену информацией между различными доменами.
  • Исследование Николаса Закаса (Nicholas Zakas), посвященное организации AJAX-взаимодействия между различными доменами..
  • Ajax with Dojo: дополнительная информация о Dojo.
  • YUI3: IO: дополнительная информация о YUI3.
  • Присоединяйтесь к автору статьи в Твиттере.
  • Следите за публикациями developerWorks в Твиттере или подпишитесь на канал твитов по Linux на developerWorks.
  • Загрузить JSONP.
  • Дополнительная информация о методе jQuery.ajax() , входящем в jQuery API.
  • Дополнительная информация о JavaScript-библиотеке jQuery.
  • Загрузить Dojo Toolkit.
  • Загрузить библиотеку YUI.

Комментарии

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

JSON: основы использования

Наверняка вы когда-нибудь слышали о JSON. Что же это такое? Что он может и как его использовать?

В данном уроке мы расскажем об основах JSON и раскроем следующие пункты:

  • Что такое JSON?
  • Для чего используется JSON?
  • Как создать строку JSON?
  • Простой пример строки JSON.
  • Сравним JSON и XML.
  • Как работать с JSON в JavaScript и PHP?

Что такое JSON?

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

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

JSON имеет следующие преимущества:

  • Он компактен.
  • Его предложения легко читаются и составляются как человеком, так и компьютером.
  • Его легко преобразовать в структуру данных для большинства языков программирования (числа, строки, логические переменные, массивы и так далее)
  • Многие языки программирования имеют функции и библиотеки для чтения и создания структур JSON.

Название JSON означает JavaScript Object Notation (представление объектов JavaScript). Как и представляет имя, он основан на способе определения объектов (очень похоже на создание ассоциативных массивов в других языках) и массивов.

Для чего используется JSON?

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

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

Также можно использовать JSON для отправки данных от браузера на сервер, передавая строку JSON в качестве параметра запросов GET или POST. Но данный метод имеет меньшее распространение, так как передача данных через запросы AJAX может быть упрощена. Например, ID продукта может быть включен в адрес URL как часть запроса GET.

Библиотека jQuery имеет несколько методов, например, getJSON() и parseJSON() , которые упрощают получение данных с помощью JSON через запросы AJAX.

Как создать строку JSON?

Есть несколько основных правил для создания строки JSON:

  • Строка JSON содержит либо массив значений, либо объект (ассоциативный массив пар имя/значение).
  • Массив заключается в квадратные скобки ( [ и ] ) и содержит разделенный запятой список значений.
  • Объект заключается в фигурные скобки ( < и >) и содержит разделенный запятой список пар имя/значение.
  • Пара имя/значение состоит из имени поля, заключенного в двойные кавычки, за которым следует двоеточие ( : ) и значение поля.
  • Значение в массиве или объекте может быть:
    • Числом (целым или с плавающей точкой)
    • Строкой (в двойных кавычках)
    • Логическим значением ( true или false )
    • Другим массивом (заключенным в квадратные скобки)
    • Другой объект (заключенный в фигурные скобки)
    • Значение null

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

Простой пример строки JSON

Ниже приводится пример оформления заказа в формате JSON:

Рассмотрим строку подробно:

  • Мы создаем объект с помощью фигурных скобок ( < и >).
  • В объекте есть несколько пар имя/значение: «orderID»: 12345 Свойство с именем «orderId» и целочисленным значением 12345 «shopperName»: «Ваня Иванов» свойство с именем «shopperName» и строковым значением «Ваня Иванов» «shopperEmail»: «johnsmith@example.com» Свойство с именем «shopperEmail» и строковым значением «ivanov@example.com» «contents»: [ . ] Свойство с именем «contents» , значение которого является массивом «orderCompleted»: true Свойство с именем «orderCompleted» и логическим значением true
  • В массиве «contents» есть 2 объекта, представляющие отдельные позиции в заказе. Каждый объект содержит 3 свойства: productID , productName , и quantity .

Кстати, так как JSON основан на объявлении объектов JavaScript, то вы можете быстро и просто сделать выше приведенную строку JSON объектом JavaScript:

Сравнение JSON и XML

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

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

Вот как будет выглядеть выше приведенный пример объекта на XML:

Версия XML имеет существенно больший размер. В действительности она имеет длину 1128 символов, а вариант JSON — только 323 символа. Версию XML также достаточно трудно воспринимать.

Конечно, это радикальный пример. И возможно создать более компактную запись XML. Но даже она будет существенно длиннее эквивалента на JSON.

Работаем со строкой JSON в JavaScript

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

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

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

JavaScript имеет встроенный метод JSON.stringify() , который берет переменную и возвращает строку JSON, представляющую ее содержание. Например, создадим объект JavaScript, который содержит сведения о заказе из нашего примера, а затем создадим из него строку JSON:

Данный код выдаст:

Обратите внимание, что метод JSON.stringify() возвращает строку JSON без пробелов. Ее сложнее читать, но зато она более компактна для передачи через сеть.

Создаем переменную из строки JSON

Существует несколько способов разобрать строку JSON в JavaScript, но самый безопасный и надежный — использовать встроенный метод JSON.parse() . Он получает строку JSON и возвращает объект или массив JavaScript, который содержит данные. Например:

Мы создали переменную jsonString , которая содержит строку JSON нашего примера с заказом. Затем мы передаем данную строку методу JSON.parse() , который создает объект, содержащий данные JSON и сохраняет его в переменной cart . Остается только осуществить проверку, выведя свойства объекта shopperEmail и productName массива contents .

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

В реальном приложении ваш JavaScript код будет получать заказ в виде строки JSON в AJAX ответе от скрипта сервера, передавать строку методу JSON.parse() , а затем использовать данные для отображения на странице пользователя.

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

Работаем со строкой JSON в PHP

PHP, как и JavaScript, имеет встроенные функции для работы с JSON строками.

Создаем строку JSON из переменной PHP

Функция json_encode() принимает переменную PHP и возвращает строку JSON, представляющую содержание переменной. Вот наш пример с заказом, написанный на PHP:

Данный код возвращает абсолютно такую же строку JSON, как и в примере с JavaScript:

В реальном приложении ваш скрипт PHP пришлет данную строку JSON как часть AJAX ответа браузеру, где JavaScript код с помощью метода JSON.parse() преобразует ее обратно в переменную для вывода на странице пользователя.

Вы может передавать различные флаги в качестве второго аргумента функции json_encode() . С их помощью можно изменять принципы кодирования содержания переменных в строку JSON.

Создаем переменную из строки JSON

Для преобразования строки JSON в переменную PHP используется метод json_decode() . Заменим наш пример для JavaScript с методом JSON.parse() на код PHP:

Как и для JavaScript данный код выдаст:

По умолчанию функция json_decode() возвращает объекты JSON как объекты PHP. Существуют обобщенные объекты PHP класса stdClass . Поэтому мы используем -> для доступа к свойствам объекта в примере выше.

Если вам нужен объект JSON в виде ассоциированного массива PHP, нужно передать true в качестве второго аргумента функции json_decode() . Например:

Данный код выдаст такой же вывод:

Также функции json_decode() можно передавать другие аргументы для указания глубины рекурсии и способов обработки больших целых чисел.

Заключение

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/json-basics/
Перевел: Сергей Фастунов
Урок создан: 12 Августа 2011
Просмотров: 443305
Правила перепечатки

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

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Илон Маск рекомендует:  Что такое код asp disablesocketpooling

Разработка веб-сайтов с помощью онлайн платформы Wrike

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

20 ресурсов для прототипирования

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

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Быстрая заметка: массовый UPDATE в MySQL

Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.


Пример живого поиска на ajax

Как работает живой поиск

Файл search.js

Обработчик запросов search.php

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

В чем может быть ошибка?

Привет!
У меня вопрос к тебе есть! Если ты конечно еще отвечаешь)))
Живой поиск настроил отлично и огромное тебе спасибо за него, но есть один нюанс.
Поиск должен работать с гугловской апишкой карт и при нажатии на элемент выдачи должно центрировать карту этой записи
Из базы данных тянем соответственно запись по запросу , например:
| seattle |
В выдаче получаем например несколько строк.
В каждой строчке в выдаче есть информация о адресе,названии и т.п.
Но в базе есть еще поля lattitude и longitude
Как мне прикрутить в экшене
$(«.search_result»).on(«click», «li», function() <
s_user = $(this).text();>

данные из бд и прилинковать в такую конструкцию?

var pos = <
lat: [some data],
lng: [some data]
>;
map.setCenter(pos);
>);

Если можешь, ответь мне на емейл?
twitter_work_one@mail.ru

не подскажете почему не могу подключиться к бд ?

пароли/имена все правильно

Вы же нигде не определяете эту переменную, сами сказали.
Вот так нужно:

ну или определить переменную выше:

А если проверить настройки css?
Вставить например для проверки

Код вставить на проверяемую страницу html.
Тогда будет видно ищет или нет.

Второй вариант — проверить в какой кодировке сохранен файл

Привет, а ты заменила строку:

в файле search.php ?
Нужно заменить поле name, что бы была выбрана информация из поля name из таблицы бд.
Если не работает, напиши в личку свой скайп и я помогу.

Спасибо, Владимир, за оперативную профессиональную помощь!

Владимир сделал 3 исправления и все заработало :)

1) — имя поля таблицы
я вместо имени поля указала имя таблицы.

2) в файле search.php — установили кодировку UTF-8 вместо UTF-8 (без BOM)

3) в корень тестового сайта добавили файл .htaccess, в котором указали кодировку по умолчанию

Все работает! Завтра повторю все эти манипуляции на работе, не сомневаюсь что и там теперь тоже все заработает.

Еще раз спасибо :)

Я понял, сейчас займусь

Зарегистрировался. Вроде ник — rikoff2009@yandex.ru
Скайпом раннее не пользовался, поэтому если не получится соединиться, пожалуйста, отправьте свой ник по почте, а я отвечу

В файле search.js стоит

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

Ваш вариант работает корректнее чем

Невозможно что то выбрать из списка, сразу все поле исчезает

Добавьте в конец страницы .
Создайте стиль для этого класса, например:

Что-бы показать чёрный прозрачный фон, добавьте в нужное место скрипта jquery код:

есть код покороче.

к нему я еще добавил

код взят с Пишем свой простой вариант «живого поиска» . — только запустить у меня его не получилось. :-(

Вариант что вы посоветовали, не совсем то что мне нужно.
этот вариант у меня сначала закрывает «затемнение» а при 2-м клике уже убирает подсказку. я хотел что бы было как в модульных окнах, при 1м нажатии на затемнение все исчезает. Немного погодя додумаю что то попроще, когда с мыслями соберусь :-)

затемнение при поиске:

Пользуюсь этим скриптом уже довольно долго. Перед тем как выбрать самое лучшее решение «живого поиска» перелапатил много разных скриптов и с уверенностью могу сказать только одно — данный скрипт мал в объеме, прост и понятен (исходя из того что он делает). Как на мой взгляд необходимо было бы добавить парочку мелких доработок для улучшения восприятия людьми, такие как:

1. вывод не только наименования, но и цены, артикулы, картинки (смотря для каких сайтов).

2. добавить в код ограничение по выводу и сортировка по. (ORDER BY name LIMIT 15) кол-ва результатов, с дополнительным выводом фразы «просмотреть все» (то что не вошло в лимит поисковых результатов).

3. при отсутствии найденных результатов выводить информацию («поиск ничего не дал», «повторите ввод символов», . и т.п.)

4. добавить возможность исчезновения результатов поиска когда мышь не в фокусе или хотя бы по средствам кнопки «esc» (а то бывает что пользователь передумал что то искать, а результат висит как банный лист).

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

6. самое главное что бы можно было бы добавить, так это возможность при поиске выбирать части вводимых слов, а именно по разным (не по порядку) выбором слов в наименовании, например — («Электрочайник Delonghi KBZ 2001.GY Scultura Collection») можно было бы его найти по написании фразы в поиске «Delonghi Scultura» — что то вроде автодополнения, т.е. после нажатия на пробел появляется возможность поиска уточнений в уже найденных товарах.

Телефонный справочник

14.12.2011, 11:17

Телефонный справочник
Нужно создать телефонный справочник в виде Hashmapa с добавлением/удалением элементов и т.д.

Телефонный справочник
Пишу телефонный справочник. После того как написал метод print, java кидает «Exception in thread.

Программа Телефонный справочник
Стр. 185. Г. Шилдт: Как пользоваться аргументами командной строки. Для лучшего понимания.

Телефонный справочник в виде БД (текстовый файл) и поиск по нему
поставил задачу создать подобие электронного справочника, база фамилий и телефонов в текстовом.

Справочник по Java SE
Подскажите пожалуйста хороший справочник по Java например такой как этот.

15.12.2011, 13:45 2

Создаешь immutable класс записи, который хранит одну запись ТС с полями «Индетификационный номер, номер телефона, ФИО владельца, адрес».
Создаешь класс ТС, который включает в себя коллекцию Map объектов класса записи. Ключом является идентификатор, значением — сам класс.
Добавляешь в последний класс методы для получения, добавления, изменения и удаления записей в коллекции.

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

shamarinov.com

Корпоративная адресная книга [2007-2012]

Возможности

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

Установка

Информацию по установке и настройке адресной книги можно прочесть в прикрепленном файле cab_manual.pdf

Среда разработки: PHP+MySQL+JavaScript+Html

Фишки: использование технологиии AJAX, jQuery

Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery
(изменения от 26.11.2013)

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

Внимание! В этой статье используется устаревшее расширение PHP для связи с MySQL!
Приемы работы с СУБД MySQL через современное расширение PHP mysqli приведены в новой статье!

В качестве материала для разбора возьмем исходный код работающей гостевой книги из нашей предыдущей статьи «Гостевая книга своими руками на PHP и MySQL»: исходный код примеров (2 Кб)

Для начала поймем, что же такое AJAX и jQuery и зачем они нужны?

jQuery – это JavaScript-библиотека, расширяющая и упрощающая разработку веб-сайтов. Помимо технологии AJAX в ней реализовано множество функций для работы с объектами (контейнерами) на веб-страницах.

Подробнее о динамическом обновлении контента средствами AJAX и jQuery читайте статью
«AJAX и jQuery. Динамическое обновление контента. Основы».

Важно!
Для того, чтобы пример работал корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.

Приступим к разбору кода. Добавим в начало файла index.php строки с подключением библиотеки jQuery:

Далее, вынесем из файла index.php фрагмент кода, который отвечает за вывод содержимого гостевой книги, в отдельный файл show.php:

Как видим, в коде все осталось без изменений, просто теперь он находится в отдельном файле (поэтому добавилось подключение модуля dbconnect.php для соединения с БД).

В файле index.php, в месте, где раньше располагался вывод, размещаем контейнер:

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

Далее в файле index.php следует форма ввода сообщения, её код остался практически без изменений, но:

1. Мы убрали атрибуты name, action и method, и функцию splash(), вызываемую по событию onClick (контроль заполнения формы остался, просто теперь эта проверка выполняется в другой части кода) из строки и добавили параметр id:

2. Убрали строку со скрытым полем action

3. Подписали id для всех полей ввода.

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

Отправка данных и получение содержимого гостевой книги описано в следующем скрипте:

Для того, чтобы событие submit не приводило к обновлению страницы в браузере, функция $(«#myForm»).submit() всегда должа возвращать значение false;

Использование библиотеки jQuery в данном примере заключается в вызове функции $.ajax(), а также для простой адресации к объектам и их параметрам, например $(“#username”).val() – получает значение из поля ввода имени пользователя ( >

Функция $.ajax() отрабатывает по разному в зависимости от параметров.

Например, в функции show_messages() с помощью функции $.ajax() происходит загрузка данных из файла show.php в фоновом режиме:

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

А при обработке события нажатия на кнопку «Отправить сообщение» функция $.ajax() отправляет данные на сервер, опять же в фоновом режиме, не перегружая всю страницу:

Как мы видим, здесь используется метод POST (type: «POST») для отправки данных, как и в исходном примере. Данные из параметра data передаются файлу action.php (url: «action.php»). При успешной передаче данных, выполняется функция, описанная в параметре success, т.е. мы отображаем уже новые записи гостевой книги:

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

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

ForCoder

Книги по AJAX, скачать бесплатные книги, самоучители и учебники по AJAX в хорошем качестве

AJAX is a web development technique that allows a web page to be updated with new information without having to reload the page. jQuery is a javascript library that harnesses AJAX interactions to allow rapid web development. Together, they are a powerful combination, and are generally considered by frontend web developers as technologies that complement each other perfectly.
Developing Responsive Web Applications with AJAX and jQuery will empower you with the skills required to create responsive web applications in a quick and efficient manner. The book begins by identifying the key benefits of a responsive application for a commercial site, and then covers how to develop a layout using Bootstrap 3 and adding dynamic visuals to your web application using AJAX calls.
By the end of this book, you will be able to develop responsive web applications by combining AJAX development techniques with the jQuery javascript library.

3,751 просмотров всего, сегодня нет просмотров

Сайт на AJAX под ключ. Готовое решение для интернет-магазина

Описана разработка высокоинтерактивных Web-сайтов, основанных на передовой технологии AJAX, работающих без перезагрузки страниц и обладающих функциональностью настольных приложений. Обучение построено на сквозном примере создания с нуля готового решения: интернет — магазина цифровых товаров, а также системы его администрирования. При этом использован язык РНР, фреймворки xajax и jQuery, шаблонизатор Smarty и другие популярные технологии динамического формирования контента. Разработанный сайт создан полностью по технологии AJAX и готов к размещению в сети.
Прилагаемый компакт-диск содержит исходные коды описанного в книге интернет-магазина, а также бесплатные программы для создания и отладки сайтов на локальной машине.

5,809 просмотров всего, 1 просмотров сегодня

Ajax: A Beginner’s Guide

Learn how to use Ajax (Asynchronous javascript and XML) to create Web applications that mirror the richness of desktop applications. Using easy-to-follow examples, Ajax: A Beginner\’s Guide gets you started working with this cutting-edge collection of technologies in no time. Create XMLHttpRequest objects and use javascript, XML, DHTML, CSS, PHP, and more to build next-generation Web applications. You\’ll also find out about a variety of free, pre-written Ajax frameworks you can use right away.

Designed for Easy Learning:

— Key Skills & Concepts—Lists of specific skills covered in the chapter
— Ask the Expert—Q&A sections filled with bonus information and helpful tips
— Try This—Hands-on exercises that show how to apply your skills
— Annotated Syntax—Example code with commentary that describes the programming techniques being illustrated

2,631 просмотров всего, сегодня нет просмотров

Веб-мастеринг на 100%

Данная книга предназначена для тех, кто хочет научиться веб-мастерингу и стать специалистом по созданию веб-сайтов на профессиональном уровне. В издании описываются самые популярные и востребованные веб-технологии — HTML5, CSS3, javascript, jQuery, Ajax, PHP, а также приемы работы с системой управления содержимым сайта CMS Drupal и секреты раскрутки сайта (SEO). С помощью этих средств вы сможете создавать сайты любого назначения от «визиток» и блогов до интерактивных интернет-магазинов и порталов с непрерывно обновляемыми новостями. Прочитав эту книгу, вы станете настоящим веб-мастером, готовым к работе над любыми проектами на 100%.

19,552 просмотров всего, сегодня нет просмотров

Eclipse: разработка RCP-, Web-, Ajax- и Android — приложений на Java

Книга посвящена разработке в среде Eclipse широкого круга Java-приложений.
Рассмотрены основы работы в среде Eclipse, использование инструментов отладки, тестирования и рефакторинга кода. Описана командная разработка приложений, их интернационализация и локализация, создание GUI-интерфейса на основе библиотеки SWT и набора Java-классов JFace. Показаны особенности разработки приложений RCP и Android, а также Web- и Ajax-приложений на основе Eclipse-проектов RAP, GWT, Riena, SCA, Scout, WTP, DTP, BIRT. Материал книги сопровождается большим количеством примеров с подробным анализом исходных кодов.

10,791 просмотров всего, 1 просмотров сегодня

PHP Ajax Cookbook

Описание книги PHP Ajax Cookbook:
Ajax is the necessary paradigm in Web 2.0 sites. Most of the Web 2.0 sites are built with PHP and Ajax. Extending AJAX is about delivering front-end service for accessing back-end services in PHP in a quick and easy manner. With this book in hand, you will learn how to use the necessary tools for Ajaxification of websites and iPhones.

This book will teach you popular selector-based JavaScript followed by important concepts on debugging, optimization and best practices. There is a collection of recipes focused on creating basic utilities such as validating form using Ajax and creating a five star rating system. As jQuery is quite popular, useful tools and jQuery plugins like Ajax tooltips, tab navigation, autocomplete, shopping cart, and Ajax chat are covered subsequently. By the end of chapter 7 you will learn to visually speed up website responsiveness to building SEO-friendly Ajax websites. Also get to know about all popular Ajax webservices and APIs like Twitter, Facebook and Google Maps which are covered in Ajax Mashups. Finally, step-by-step recipes are presented to build iPhone apps using basic libraries and everyday useful Ajax tools.

Build rich interactive web 2.0 sites with rich standards and Mashups around PHP Ajax.

7,187 просмотров всего, сегодня нет просмотров

Ajax For Dummies

Описание книги Ajax For Dummies:
Even if you weren’t intimidated before, that tidbit is probably enough to make you reach for the Excedrin. Just reach for Ajax For Dummies instead. With screen shots, actual code and explanations, and live Web sites where you can see Ajax applications doing their thing, it will have you using Ajax to create Web applications that look an act like desktop applications in no time. With Ajax, you can speed up and clean up your Web applications. Shoppers at your online store can fill their carts without waiting for multiple page refreshes. Searchers on your sites can get instant results on the same page.

This guide takes you on a tour of how Ajax is used today, complete with examples of Ajax applications in action, such as an Ajax-enabled Yahoo! search or an Ajax-based chat application. Then it gives you basics on using JavaScript.

4,323 просмотров всего, сегодня нет просмотров

Foundations of ASP.NET AJAX

Описание книги Foundations of ASP.NET AJAX: Since the emergence of Google Maps, Ajax programming techniques have become one of the hottest topics in the programming arena. To date, the frameworks available for creating these applications have been complex and have separated the development of the client–side Ajax (on the user’s machine) from the server–side supporting technology (on the company’s machines). This separation has made development slow and difficult.

ASP.NET AJAX is Microsoft’s solution to this problem. ASP.NET AJAX (formerly code–named Atlas) is a set of extensions to the existing ASP.NET 2.0 technology that provides you with a fast-and-simple environment to create Ajax applications. Microsoft has combined Ajax with ASP.NET technology and provided a unified set of development tools within Visual Studio 2005. For the first time, Ajax applications can be developed seamlessly in conjunction with a supporting technology.Foundations of ASP.NET AJAX (written by Laurence Moroney the author of Apress successful Foundations of Atlas) gives you a detailed grounding in how ASP.NET AJAX works. It takes you swiftly through the basic principles of Ajax, then deep into the heart of the technology, where every namespace is discussed and every function considered. By the end of the book, you’ll know all the essentials to confidently produce cutting-edge ASP.NET AJAX applications swiftly and professionally. You will not need any reference beyond this book.

4,503 просмотров всего, сегодня нет просмотров

Pro ASP.NET 3.5 Server Controls and AJAX Components

Описание книги Pro ASP.NET 3.5 Server Controls and AJAX Components: Pro ASP.NET 3.5 Server Controls and AJAX Components is a reference for the serious ASP.NET developer who understands the benefits of object–oriented development and wants to apply those principles to ASP.NET 3.5, ASP.NET AJAX, and server control development. This book also covers SharePoint and targets the latest version of Visual Studio (2008) and the .NET Framework (3.5).

Highlights include the following:— Covers the new features in ASP.NET 3.5 and ASP.NET AJAX technology- Describes the ASP.NET server control architecture in Visual Studio 2008/ASP.NET 3.5 covering state management, events, rendering, cross-platform support, control life cycle, localization, and deployment.- Demonstrates how to integrate client–side development technologies such as DHTML and JavaScript with server control technology to create powerful interactive controls What you’ll learn— Create a powerful suite of interactive controls using ASP.NET 3.5 and ASP.NET AJAX.- Enrich the design–time experience when building custom server controls.- Integrate client–side development technologies such as DHTML and JavaScript with server control technology.- Develop SharePoint server controls.- Learn the background on user controls as compared to server controls.- Work with the new mobile controls in ASP.NET 3.5. Who is this book for?The serious ASP.NET developer who understands the benefits of object7ndash;oriented development and wants to apply those principles to ASP.NET 3.5 and server control development.

5,367 просмотров всего, сегодня нет просмотров

Ajax в действии

Описание книги Ajax в действии:
В этой книге описан новый подход к созданию Web-приложений, известный как Ajax. Авторы рассматривают составные части Ajax: JavaScript, CSS, DOM и объект XMLHttpRequest. Кроме того, в книге нашли отражение вопросы управления кодом, взаимодействия клиента и сервера и применения архитектуры «модель-представление-контроллер» на разных уровнях приложения. Читатель также найдет сведения о защите и производительности — важных характеристиках, существенно влияющих на популярность любого продукта. Рассматриваемые вопросы иллюстрируются примерами практического использования Ajax.

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

11,341 просмотров всего, сегодня нет просмотров

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