Ajax — Консультация по ajax запросу


Содержание

запрос jQuery Ajax внутри запроса Ajax

можно ли сделать запрос ajax внутри другого запроса ajax? потому что мне нужны некоторые данные из первого запроса AJAX, чтобы сделать следующий запрос AJAX.

сначала я использую Google Maps API для получения LAT & LNG, после этого я использую этот LAT & LNG для запроса Instagram API (местоположение на основе поиска).

еще раз, возможно ли это, и если да, то как?

4 ответов

вызов второго ajax из «complete»

Это просто пример. Вы можете настроить его согласно вашему требованию.

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.

Существует множество устаревших библиотек и совершенно новых библиотек для 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 для обработки событий, манипуляций со страницей, управления внешним видом страницы и визуализации модели данных у клиента. Серверная же сторона отвечает за управление бизнес-логикой и передачей измененных данных модели клиенту. В этом случае сервер ничего не знает о внешнем представлении за исключением начальной страницы, данные для которой отсылаются им в ответ на клиентский запрос.

Цукерберг рекомендует:  jQuery плагин для отображения превью загружаемого файла

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

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

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

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

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

Технология 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 позволит повысить скорость работы сайта и его удобство для пользователей, не жертвуя дружественным отношением со стороны поисковых систем.

JavaScript — Асинхронные AJAX запросы на примерах

Урок, в котором на примерах рассмотрим создание простых асинхронных AJAX запросов к серверу. В качестве метода передачи запросов будем использовать как метод GET, так и метод POST. На сервере обработку запросов выполним с помощью скриптов PHP.

Что такое асинхронный запрос AJAX?

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

При отправке асинхронного запроса, браузер (страница) не «замораживается», т.е. с ней, как и прежде, можно работать. Но тогда как узнать, когда придёт ответ с сервера. Чтобы это определить, необходимо отслеживать свойство браузера readyState (состояние готовности). Данное свойство содержит число, по значению которого можно судить о том, в какой стадии находится запрос. В следующей таблице приведены основные значения свойства readyState и соответствующие им состояния.

Значение свойства readyState Описание
запрос не инициализирован
1 выполнена настройка запроса
2 запрос отправлен
3 запрос находится в процессе обработки на сервере
4 запрос завершён

Т.е. получается, что нам необходимо отследить, когда значение у свойства readyState будет равно 4. Это будет означать то, что на отправленный запрос, пришёл ответ с сервера. Остальные значения на практике используются довольно редко, и некоторые браузеры могут их не поддерживать.

Для того чтобы определить на какой стадии находится запрос, необходимо использовать событие объекта XMLHttpRequest onreadystatechange . Данное событие происходит каждый раз, когда изменяется значение свойства readyState . Следовательно, в обработчике этого события (неименованной или именованной функции) можно прописать действия, которые будут проверять равно ли данное свойство 4 и если равно, то например, вывести ответ сервера на страницу.

Схема работы AJAX (асинхронный запрос)

Создание асинхронного AJAX запроса (метод GET)

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

Для этого необходимо создать на сервере 2 файла в одном каталоге:

  1. welcome.html – HTML-страница, которая будет отображаться пользователю. В этой же страницы поместим скрипт, который будет осуществлять все необходимые действия для работы AJAX на стороне клиента.
  2. processing.php – PHP-файл, который будет обрабатывать запрос на стороне сервера, и формировать ответ. Начнём разработку с создания основной структуры файла welcome.html

Рассмотрим последовательность действий, которые необходимо выполнить на стороне клиента (в коде JavaScript):

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

Создадим переменную, которая будет содержать экземпляр объекта XHR (XMLHttpRequest).

Настроим запрос с помощью метода open() .

Указываются следующие параметры:

  • Метод, с помощью которого будет посылаться запрос на сервер (GET, POST).
  • URL-адрес, который будет обрабатывать запрос на сервере.
  • Тип запроса: синхронный (false) или асинхронный (true).
  • Имя и пароль при необходимости.

Подпишемся на событие onreadystatechange объекта XHR и укажем обработчик в виде анонимной или именованной функции. После этого создадим код внутри этой функции, который будет проверять состояние ответа, и выполнять определённые действия на странице. Ответ, который приходит с сервера, всегда находится в свойстве responseText .

Дополнительно с проверкой значения свойства readyState числу 4, можно проверять и значение свойства status . Данное свойство определяет статус запроса. Если оно равно 200, то всё OK . А иначе произошла ошибка (например, 404 – URL не найден).

Отправим запрос на сервер с помощью метода send() .

Если используем для отправки запроса метод GET, то передавать данные в параметр данного метода не надо. Они передаются в составе URL.

Если используем для отправки запроса метод POST, то данные необходимо передать в качестве параметра методу send() . Кроме этого, перед вызовом данного метода необходимо установить заголовок Content-Type, чтобы сервер знал в какой кодировке пришёл к нему запрос и смог его расшифровать.

Содержимое элемента script :

В итоге файл welcome.html будет иметь следующий код:

На сервере (с помощью php):

  1. Получим данные. Если данные посланы через метод GET , то из глобального массива $_GET[‘имя’] . А если данные переданы с помощью метода POST , то из глобального массива $_POST[‘имя’] .
  2. Используя эти данные, выполним некоторые действия на сервере. В результате которых получим некоторый ответ. Выведем его с помощью echo .

HTML-страница, на которую пришёл AJAX ответ с сервера (метод GET)

Создание асинхронного AJAX запроса (метод POST)

Изменим вышеприведённый пример. Теперь AJAX запрос к серверу будет выполняться после нажатию на кнопку. Он будет получать имя, которое ввёл пользователь в элемент input и отправлять его посредством метода POST на сервер. После получения ответа с сервера, заменим им содержимое элемента div на странице.

Одна функция для Ajax-запросов.

Как вернуть данные.

Долго сидел и думал, какое же дать название этой статье, т.к. тема гораздо обширнее, чем просто «вернуть ответ из функции Ajax-запросов«. Сюда можно было бы приклеить и «Работа с полученным ответом на Ajax-запрос«, и «Универсальная функция Ajax-запросов«, и «Работа с объектами Promise и Deferred» , и еще массу вариантов. Но всё это сводится к одной проблеме, которая изо дня в день поднимается новичками на форумах и которую можно определить одной фразой — асинхронность выполнения Ajax-запросов.

Что же вообще это значит: «синхронное или асинхронное выполнение»? Если не особо углубляясь и, как говорится, на пальцах, то:

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

Надеюсь, что суть уловили. :) Давайте разберем типичный ошибочный пример:

И вопрос обычно звучит в таком стиле: «Почему функция не возвращает данные? Почему всегда false?» Теперь уже, когда вы знаете разницу между синхронным и асинхронным выполнением, вы можете без труда понять, что происходит внутри функци «ajaxRequest»: инициализировали переменную «response», начался процесс ajax-запроса, но еще до его завершения, функция уже возвращает значение переменной, которое так и не успело изменится.

Как с этим бороться? Первое, что может прийти на ум и будет решение не таким уж правильным — это сделать запрос синхронным. В методе $.ajax(), за это отвечает параметр async со значение false (по умолчанию — значение true). Главный минус такого подхода в том, что на время выполнения запроса, сайт у пользователя попросту «подвиснет», а это не есть хорошо. Кроме того, это может отрицательно сказаться на выполнении каких-либо фоновых операциях. Например, если у вас есть функция, которая каждую секунду должна что-то выполнять, то на время Ajax-запроса, она так же зависнет. Поэтому синхронное выполнение, мы отложим для особых случаев, где без синхронности обойтись нельзя.

Универсальная функция для Ajax — это хорошо, но не всегда такую функцию можно сделать под конкретный проект, а понятие «универсальность» в широком смысле, тут вообще не подходит. Как минимум, ответ обрабатывается по разному, запросы могут передавать как обычные данные, так и файлы, где настройки запроса отличаются, могут отличаться функции beforeSend, complete и т.д. В этом случае, можно упростить код за счет метода $.ajaxSetup(). Основные настройки или настройки, которые будут действовать в большинстве случаев, мы можем указать в коде один раз и больше не прописывать их в методе $.ajax().

Теперь в любом месте, где нужно сделать ajax-запрос, мы прописываем только то, что отправляем и обработчик ответа:

Если же в каком-то исключительном случае, нам нужно изменить определенную настройку, то её так же дописываем. Например, в каком-то случае, нам не нужно показывать «loader» ( ) перед отправкой запроса или вместо loader-а, вывести что-то в консоль:

Это был один из вариантов, с помощью которого можно сделать код более универсальным. Теперь же перейдём непосредственно к функциям.
Вариант первый — передача в функцию обработчика ответа на Ajax-запрос:

Итак, предположим, что у нас на странице есть два элемента, объект «actions», содержащий функции для обработки данных ответа и одна функция ajax-запросов, которая принимает два аргумента: «data» — какие-то данные, передаваемые на сервер и «responseHandler» — имя функции, которая должна обработать ответ сервера (аргументов, понятное дело, что может быть и больше). После успешного завершения запроса, вызывается соответствующая функция из объекта «actions», которая принимает полученные от сервера данные (переменная «response») и заменяет ими контент соответствующего элемента. Если нам понадобится еще какой-то обработчик, то мы просто допишем в объект «actions» новую функцию, при этом что-либо изменять дополнительно уже не понадобится.
В примере, мы вручную записывали имя функции-обработчика, но это можно так же автоматизировать. Например, используя атрибут тегов «data-*»:

В итоге, у нас одна функция для Ajax-запросов, один расширяемый объект с обработчиками, один обработчик кликов для всех кнопок, а вот результат разный и тот, который нужен нам ;)
Вариант второй — используем JavaScript-объект Promise («обещание«), которой служит для отложенных и асинхронных вычислений. Проще говоря, с помощью этого объекта мы можем установить обработчик события на выполнение какой-либо задачи. В jQuery существует свой объект для работы с «обещаниями» — это объект $.Deferred(). Разбирать его по косточкам не будем, т.к. все можно найти в документации, а просто рассмотрим пару вариантов использования и один из основных методов объекта Deffered — $.when(). Изменим наш код выше таким образом:

Объект с обработчиками нам уже не нужен, т.к. мы обрабатываем ответ сервера на месте. Опции success, error и т.д. — нам так же не нужны, так как метод $.when(), создавая новый deferred-объект, следит за состоянием процесса. А в методе .then(), мы устанавливаем обработчики событий:

  1. doneCallbacks — функция, которая будет вызвана в случае успешно выполнения
  2. failCallbacks — функция вызываемая при возникновении ошибки
  3. И, при желании, progressCallbacks — обработчик события «progress»

Кому-то может показаться такой подход малополезным, но представим ситуацию, когда вам нужно сделать два, три или более ajax-запросов, дождаться завершения каждого, обработать ответы и только потом вывести на экран. Любители «индусского кода» не растеряются :) Они напишут тонну лишнего кода, в то время, как это можно сделать достаточно легко с помощью того же метода $.when():

Функция Ajax осталась одна, ничего лишнего писать не пришлось и результат тот, которого мы ожидали.
И напоследок, покажу, как можно использовать Promise на чистом JavaScript. Сам код Ajax-запроса я описывать тут не буду, т.к. я его уже разбирал в статье Запрос на чистом JavaScript, а схематически это будет выглядеть так:

Надеюсь, что этот краткий обзор, поможет новичкам сориентироваться в правильном направлении. Более подробно про функции объекта Deferred — читайте в официальной документации ;)

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.

Введение в Ajax

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

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

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

AJAX, или, более длинно, Asynchronous Javascript And Xml — технология для взаимодействия с сервером без перезагрузки страниц.

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

Например, при нажатии кнопки голосовать — из браузера на сервер будет отправлено сообщение, а сервер ответит браузеру, что голос принят.

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

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

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

Далее мы разберем, как она работает, более подробно.

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

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

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

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

  1. Функция создает объект XmlHttpRequest
  2. назначает обработчик ответа сервера onreadystatechange
  3. открывает соединение open
  4. отправляет запрос вызовом send (ответ сервера принимается срабатывающей в асинхронном режиме функцией onreadystatechange )
  5. показывает посетителю индикатор состояния процесса

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Незаметные для пользователя действия.

Например, при редактировании статьи — каждые 10 минут результаты автосохраняются на сервере.

Непрерывная подзагрузка информации с сервера.

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

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

Пример. Google suggest.


Google — одна из первых систем, которая предложила «живой поиск», live search. Пользователь печатает поисковую фразу, а система автодополняет ее, получая
список самых вероятных дополнений с сервера.

Код, который это обеспечивает, работает следующим образом.

  • Активируется примерно при каждом нажатии клавиши
    • Время посылки последнего запроса отслеживается
    • Для «обычной» скорости печати — запрос отсылается при каждом нажатии
    • Для «программистской» скорости — каждые несколько нажатий
  • Создается скрытый DIV, который показывается при начале печати
  • DIV заполняется ответом сервера
    • Текущий результат подсвечен, можно перемещаться и выбирать
    • При нажатии правой стрелки, поиск в подрезультатах
  • Результаты кэшируются
    • при нажатии на «удалить», обращения к серверу не происходит
  • Время на осуществление запроса отслеживается для управления частотой запросов к серверу
    • Обычный модем будет обращаться к серверу меньше,
    • Подключение по выделенной линии — запросы идут чаще.

Пример. Gmail.

Раз уж взялись за Google — рассмотрим почтовый сервис той же компании, http://gmail.com.

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

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

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

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

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

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

  1. закидываем удочку
  2. ждем, когда клюнет
  3. клюнуло — включаем подтяжку спиннинга

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Всё это уже знал, но статья так легко и интересно написана что прочел еще раз =) 5+

Все это конечно интересно, но где взять конкретные примеры допустим ajax авторизации?

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

Я знаю для чего нужен Ajax! Вот только не знаю с чего начать его изучение!

А что Вы хотите научиться делать? Поконкретнее, если можно.

Интересует очевидное — считывание блока контента без перезагрузки всей страницы. Начать можно с того, что юзверь клюкнул кнопку меню. На сервант через Post/Get передана сцылка на запрашиваемую страницу. Движок нашел в базе нужный контент. Что далее, если Ajax ?
Можно даже на примере работы этого сайта. Вот например сделать хреф рядом с Антиспам-вопросом с title=’не знаю ответа’ . Чтобы при нажатии его, с серванта подгружался калькулятор. А на стороне браузера — выводить его в , а то ведь не все помнят математику (ещё бы интегралов понаписали).
ЗЫ Ещё можно отправлять текст модеру сайта, по мере заполнения текстареа свыше 80%, чтобы неуспев дописать вопрос, юзверь получал ответ :-D

в примере, который указан выше есть все ответы.
запрос отсылается на «/ajax_intro/vote.html»
результат req.responseText можно вставлять куда угодно, хоть в statusElem.innerHTML

или Вы не об этом?

1. Содержимое файла «/ajax_intro/vote.html» ?
2. Можно догадаться, что на событии onClick кнопки Submit подвешена функция Vote() . Вот с этого места поподробнее, если можно.
3. Где вообще форма? Или её отменили в Ajax?
Если был источник, пож укажите.

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

2. Да, на клик подвешена функция vote. При клике она вызывается, передает голос на сервер и возвращает ответ.

3. Формы никакой нет, и самбита нет. Есть вызов сервера через XmlHttpRequest.

По поводу источника — вы читаете оригинал статьи.

Функция результата голосования возвращает по return значение, которое ПЕРЕДАЁТСЯ в браузер, где присваивается переменной responceText. Потом innеrHТМL передаст его в div, так?
А где задается значение «Ожидается ответ сервера»?

PS. Не спорю, что в Вашем варианте оно работает «без гвоздей». А у меня движок, в котором кое-как сваяли модуль поддержки Ajax.

Не заметил сразу прямую выдачу в div через innerHТМL — прошу прощения

Спасибо, все фукционирует

А например кнопку подгружаемую по условию можно сделать ?

// создать объект для запроса к серверу, функция getXmlHttp будет дана ниже
напишите пожалуйста getXmlHttp. а может я просто неувидел?
заранее спасибо

«Вешаем на удило специальный детектор клева»
Я плачу Браво )))

все прекрасно понятно =)
только вот чего начать изучение?
допустим php . поставь apache+mysql+php = изучай а тут не пойму с чего начинать =( что ставить?

Я так подозреваю, что для самого конкретно AJAX`a вообще ничего ставить не нужно. Просто нужен какой-нить блокнот с подсветкой синтаксиса. Ну а для серверной части подойдёт Denwer, но это как вы уже сказали (apache+mysql+php).

оч клево написано

Класс, изучаю вот. Только если нажать на голосовать второй раз (подождав от первого прилично), то ответ придет от сервера настолько быстро, что в итоге у вас залипает фраза «Ожидаю ответа сервера. «. Это можно решить как-то?

Единственный вариант, который приходит в голову — send(null) вернуло закешированный ответ, который тут же обработался — и все это до 2й строки.. Но это очень странно, получается что запрос обработался фактически синхронно.

Классно всё расписано . а где взять пример аякса для генерации дерева ?

Примеры дерева — в программе Visual DataFlex 16.1 — после установки и загрузки библиотеки AJAX Library 2.3 — есть примеры в директории Examples

Спасибо за статью. Но вот на мне тоже хотелось бы посмотреть на пример дерева. Ну или отпишите плиз коды функций по обавлению и удалению веток дерева.
Заранее спасибо

Классно написано, автору респект!

Хорошая статья мне понравилось и про ajax теперь все ясно стало

Зе бест!
Суть аякса я понял.
теперь думается — нужно разобраться с синтаксисом языка и попробовать сделать замену фрэймов.

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

Спасибо за статью!
Отлично разжеванный материал, наконец-то мне стало все ясно с этим аяксом

Очень хорошая статья, но у меня возник вопрос, если надо передать не null запрос а например ассоциотивный массив
ну как blablabla.ru/test.php?key1=var1&key2=var2

как тогда строить req.send
?

В данном случае просто делаешь URL: /test.php?key1=var1&key2=var2

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

А не могли бы написать для примера с голосованием скрипт PHP? Я поняла, что отправка идет методом GET, а вот как это «ловить» на сервере…
Спасибо

Направлять запрос соответствующему скрипту и в нем все делать. Скажем, /ajax/vote.php

То есть используем метод POST или Get указывая скрипт обработки на сервере там он как то преобразовует данные с ajax в php и тут php связываеться с бд. Так получаеться?

Убейся, что ты здесь вообще делаешь??

Чудесная статья . Все понял, кроме одного момента: что на ходится в файле vote.php? Там функция вызывается или что? И как аякс понимает что сервер что то вернул? return или что то другое? Хотелось бы поподробнее.

Присоединяюсь к предыдущему вопросу

Добавил в статью информацию, содержащую ответ на ваш вопрос.

У автора статьи есть чувство юмора)

Спасибо за статью. Все бы так писали. Надо ещё разок почитать. хочется влезть в детали.

А как решать проблему с кодировками? Мне требуется посылать ответ написанный кирилицей. В этом случае браузеры отображают билеберду.

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

XmlHttpRequest всегда приходит в UTF. Тут уж ничего не поделаешь — либо переходить на UTF-8, либо перегонять iconv .

В php.ini
default_character_set=cp1251
подобная строчка должна быть где-то в файле.

Все преимущества использования AJAX на лицо. Очень хорошо статья написана.

день добрый, а как можно реализовать прогрузку контента с помощью ajax, если:
Станичка использует фрэймвок mootools.
На ней разные эффекты, соответственно.
Есть, допустим, место —

А туда нужно ajax’oм подгрузить не просто текст, а несколько «виджетов» mootools, которые после подгрузки связались бы с фрэймвоком и стали бы работать.

Передай вместо тек4ста ссылки на виджеты с параметрами

Давно искал пример проверки логина при регистрации без перезагрузки страницы. Нигде не мог найти внятного обьяснения или рабочего примера. Сделал по типу описаного тут голосования, всё заработало. Короч, наманая статья

В чем суть Ajax? Вижу только конструкции явыскрипт и пиашпи!

Отличная статья! Спасибо автору

ajax все больше укрепляет свои позиции в реализации интерактивности сайта
Статья 5+

Скопировал ваш код с кнопкой «Голосовать», на страничку, которая у меня на винчестере. Запустил — надпись «ОК» в теге появилась, но никакой alert не появляется. Стал изучать, оказывается req.status равно нулю. Почему? Что не так?

Я изменил строчку адреса на такую:

Или что я не правильно делаю?

$en ? echo ‘privet’ : echo ‘paka’;

У меня вопрос. как изменить кодировку сообщения, приходящего с сервера.
Все вроде бы нормально, но ответ, который потом выдается Alert-ом содержит в себе «Сервер ответил: (тут куча непонятных иероглифов)»

p.s. все файлы сохранены в кодировке Windows-1251

Извиняюсь, так не получится.

Хотя, если посылать заголовок скриптом, то прекрасно работает

всё крута) пасиба) счаЗ буду делать вход на сайт через
Ajax
)
можно сделать кнопку Просмотр в диве через Ajax)

Sniper
внимательно вчитываемся ‘частые проблемы > кеширование’ на xmlhttprequest.ru
там описан еще один вариант обхода кеша, немного больше кода зато больше эффективности

там же, чуть ниже, можно посмотреть разбор кода

а почему если нажать на кнопку Голосовать в начале статьи ВТОРОЙ раз то логика нарушается: сначала возникает алерт что типа все ок а потом Ожидаю ответа сервера. и тишина.

отвте как увидел позже есть))

Используйте запросы POST, потому что браузер их не кеширует и они более защищены!

Статья самодостаточна! Кратко и в то же время объемно. Теперь ясно, что Ajax — это ни удочка, ни сети, ни гарпун, а только способ пользоваться всем этим барахлом. И очевидно, что этот способ — для профессионалов рыбной ловли :-)

почему не вылетает alert .

Млин, все же все-равно не понятно как через POST отправить пусть скрипту vote.php данные из формы. Ну например, пусть тоже голосование, только есть еще варианты ответов (то есть есть форма с radio), так вот как скрипту vote.php передать значение одного из radio??

Вы пишете «Браузер держит постоянное соединение с сервером (или делает время от времени корректирующие запросы) — и нужные изменения отсылаются по этому каналу»

Можно поподробнее, что значит «держит постоянное соединение»? Ведь наскольо мне известно браузер сокетное соединение не устанавливает, и все реал-тайм обновление через ajax — это просто запросы, отсылаемые серверу автоматически с некой периодичностью. Или я не прав?

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

Здравствуйте! Прежде всего, спасибо за крайне полезный цикл статей.

Есть, однако вопрос.
А можно ли через XMLHttpRequest получить с сервера простой текстовый файл (не HTML, XML и пр.) в кодировке cp1251?

До сих пор пробовал — он его читает, но упорно пытается вернуть в utf8. Соотв., вместо русских букв получается абракадабра.

Как решить проблему с использованием серверных компонент (на сервере крутится ASP) — примерно представляю. Интересно, решаема ли она без (т.е. исключительно на стороне клиента).

Буду ОЧЕНЬ признателен, если кто подскажет!

Спасибо большое. Перелистав почти десяток «учебников» только на этой статье наконец «въехал» в технологию.

Ам.. не понятно откуда берутся вот эти цифры?

if (req.readyState == 4)
.
if(req.status == 200)

пардон, вопрос снят )) У кого будут такие же глупые вопросы, смотреть http://xmlhttprequest.ru/

Я тоже не понял как отправлять данные методом POST. Точнее понятно, но какой индекс тогда будет у массива $_POST с тем что я отправил? если бы я отправлял кнопкой submit через форму, в которой поле ввода, например с аттрибутом name=»test», то в скрипте бы я обратился $_POST[«test»]. А с XMLHttpRequest так не работает. ЗЫ только что со страницы http://xmlhttprequest.ru/, там тоже ничего не сказано

Я тоже был на http://xmlhttprequest.ru/
читаем внимательнее:

send()
Отсылает запрос. Аргумент — тело запроса. Например, GET-запроса тела нет, поэтому используется send(null), а для POST-запросов тело содержит параметры запроса.

// Пример с POST
.
var params = ‘name=’ + encodeURIComponent(name) + ‘&surname=’ + encodeURIComponent(surname)
xmlhttp.open(«POST», ‘script.php’, true)
.
xmlhttp.send(params)

Вопрос только в том остался, что когда я в script.php
выполняю
echo $_POST[«name»]
выводится пустая строка .

установи http-заголовок вот так вот: req.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);

Есть вопрос, ajax-технология базируется на языке Java Script, что будет если пользователь отключит у себя в браузере Java Script? Я так понимаю ajax-отвалится и весь труд накроется медным тазом( а чтобы такого не случилось надо писать запасной код который сработает в любом случае ). Я правильно понимаю?

С одной стороны Да, все отвалится, но сдругой стороны как ты напишиь запасной код. Проще тебе вывести сообщение пользователю о том, что у него не контачит javascript.

у меня вот тоже такая же проблема:
вместо vote.php я отправляю запрос some.jsp
В some.jsp у меня запускается exe и ловится все, что он выдает в строку, потом выводится на страничку
( out.print(stroka) )
Первый раз все запускается, а потоооом.
Почемуто ответ приходит моментально и содержит результат предыдущего вызова some.jsp .

Не подскажите,как мне при помощи ajax сделать, чтобы при нажатии ссылки в меню слева(меню новостей например), новость отображалась в главной таблице

Отличная статья! Спасибо!

Автор, большое спасибо за чудесную статью! Всё очень толково разьяснено. Респект

> Пример. Google suggest.
DIV заполняется ответом сервера

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

Как перехватывать нажатия клавиш? В строке поиска Яндекса так же можно перемещаться по выданным возможным вариантам с помощью клавиш курсора. Но я никак не могу разобраться как это реализовано? Подскажите в каком направлении копать.

Вот у меня такой вопос.

Я все сделал, работает супер! но есть одна фигня. Текст с сервера не выводиться. в вместо него одно слово: undefined.

В сервере содержиться:

Не подскажет, где я ошибся?

Ошибся почти в каждом предложении:

«не выводиться»;
«содержиться».

Может сначала в школу, а потом текст с сервера выводить?

помоему респонс текст должен идти со стартом, а не с инком

Отличная статья!
«Смысл AJAX — в интерактивности и быстром времени отклика.»
Подскажите пожалуйста, насколько быстро работает AJAX? Можно ли с помощью данной технологии создать динамичную онлайн-игру?

Думаю скомпилированные приложения все равно будут работать быстрее (Flash)

Не работает(((
Скопировал даже код предпредыдущего сообщения, на что IE выдал:
Сведения об ошибке на веб-странице
Сообщение: ‘null’ — есть null или не является объектом
Строка: 35
Символ: 5
Код: 0

Вот тебе по легче,тоже создаём XMLHttpRequest

А вообще статья чёткая,понравилась 5+

Ramzil_Nixon, я статью еще не доконца прочел, пока разбираюсь. Мне показалось что правильней назначать обработчик перед отправкой запроса:

у Вас:

start.send(null); // Отправляем запрос в сервер
inc.innerHTML = ‘Ждем ответа сервера’;
start.onreadystatechange = function() .

Мне кажется, лучше так:
start.onreadystatechange = function() .
start.send(null); // Отправляем запрос в сервер
inc.innerHTML = ‘Ждем ответа сервера’;

Подскажите пожалуйста, не работает в ИЕ8 (у меня такая стоит в других не проверял). В остальных браузерах все нормально.

срабатывает изменение в БД но нет анимации. В шаблоне прописал стили которые проверяют значение в БД и соответственно при нажатии F5 если элемент заблокирован то он остается в полупрозрачном виде. Так вот в ИЕ при нажатии кнопки + потом F5 элемент полувиден, а вот обратно не работает и анимации нет. Спасибо

Илья, сделайте, пожалуйста, учебник по AJAX более подробным, так сказать «для начинающих». После прочтения учебника по JS этот материал кажется слишком сжатым и «не измельченным», непонятным. Стоит добавить больше примеров, расписать более подробно. Например, в каких случаях нужно использовать GET, а в каких POST? Какой вариант транспорта выбрать, если у меня на странице есть форма для выставления рейтинга, а на другой — большая HTML-форма из 50 разных элементов (поля, списки, флажки. ) для загрузки на сервер? Как взаимодействовать с БД, например, с mySQL + php ? На этой странице хотелось бы увидеть пример не с примитивным

а с ветвлением на стороне сервера, например, та же голосовалка: выбираешь «5», сервер возвращает «Вы выбрали 5» и т.д.

Здравствуйте, а как ajax применять в ASP.NET, не MVC? Что служит обработчиком, вместо страница.php?

Доброго времени суток, Илья. Хочу обратиться к Вам за разъяснениями по поводу XMLHttpRequest, т.к. в интернете не нашел ответ на свой опрос (может и не правильно искал).
Суть вопроса такова, примерно:
есть функция, которая возвращает объект xhr (кроссбраузерно). При этом я написал ее таким образом, что если уже есть готовый объект она возвращает его. Но тут возникли проблемы — если первый запрос еще не отработал и создавать второй, то первый абортится (Aborted), печально ((
Решил переделать ф-кцию, чтоб возвращала всегда новый объект XMLHttpRequest, но тут возник вопрос, а не будет ли утекать память. Что происходит с объектом XMLHttpRequest после того как он отработал.
Может, после обработки результата от запроса объект XMLHttpRequest нужно явно удалять при помощи delete?
Буду очень признателен вам за помощь в данном вопросе.

Добро пожаловать на сайт поддержки Ajax

Устройства

Централи

Интеллектуальная централь системы безопасности c GSM и Ethernet

Hub 2

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

Hub Plus

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

Интеллектуальный ретранслятор сигнала системы безопасности

Охрана помещений

MotionProtect

Беспроводной датчик движения с иммунитетом к животным

MotionProtect Plus

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

CombiProtect

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

DoorProtect

Беспроводной датчик открытия дверей и окон


DoorProtect Plus

Беспроводной датчик открытия, удара и наклона

GlassProtect

Беспроводной датчик разбития стекла

MotionProtect Curtain

Беспроводной датчик движения штора с узким углом обзора

Защита от потопа

LeaksProtect

Беспроводной датчик раннего обнаружения затопления

Защита от пожара

FireProtect

Беспроводной дымо-тепловой датчик с сиреной

FireProtect Plus

Беспроводной дымо-тепловой датчик с сенсором угарного газа и сиреной

Уличная защита

MotionProtect Outdoor

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

Пульты управления

Button

Беспроводная тревожная кнопка с защитой от ложных нажатий

SpaceControl

Брелок управления системой безопасности с тревожной кнопкой

KeyPad

Беспроводная сенсорная клавиатура управления системой безопасности

Автоматизация

Socket

Радиоуправляемая умная розетка со счетчиком энергопотребления

Relay

Слаботочное реле дистанционного управления c сухим контактом

WallSwitch

Силовое реле дистанционного управления питанием со счетчиком энергопотребления

Интеграции

ocBridge Plus

Модуль интеграции датчиков Ajax в проводные и гибридные системы безопасности

uartBridge

Модуль интеграции датчиков Ajax в беспроводные охранные и smart home системы

Transmitter

Модуль интеграции сторонних датчиков в систему безопасности Ajax

Сирены

HomeSiren

Беспроводная комнатная сирена

StreetSiren

Беспроводная уличная сирена

Для пользователей

Приложение для iOS

Позвляет управлять системой безопасности Ajax с iPhone

Приложение для Andro >

Позволяет управлять системой безопасности Ajax с Android смартфона

Учетная запись

Виды и права учетных записей в системе безопасности Ajax

Сценарии

Автоматизируют рутинные действия и позволяют удаленно управлять техникой

Видеонаблюдение

Интеграция видеонаблюдения в систему безопасности Ajax

Для PRO

PRO приложение на iOS

Позволяет инсталяторам и охранным компаниям управлять тысячами систем безопасности Ajax c iPhone

PRO приложение для Andro >

Позволяет инсталяторам и охранным компаниям управлять тысячами систем безопасности Ajax c Android смартфона

PRO Desktop для macOS

Позволяет инсталяторам и охранным компаниям управлять тысячами систем безопасности Ajax c компьютера Mac

PRO Desktop для Windows

Позволяет инсталяторам и охранным компаниям управлять тысячами систем безопасности Ajax c компьютера на Windows

Подключение к ПЦН

Работа систем безопасности Ajax с пультами охранных компаний

PRO интеграции

Работа Ajax со сторонними системами, сервисами и устройствами

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кнопка «Назад» к результатам ajax, запрос консультации

Я пытаюсь решить проблему с кнопкой «Назад» в своем приложении. Сценарий:

У меня есть домашняя страница с формой поиска, которая отправляет и получает данные с помощью $.ajax(), а затем результаты, загруженные через ajax, их ссылки указывают на контроллер, который не будет выполнен GET в ajax, что страница будет обновлена ​​(поэтому домашняя страница с результатами выглядит следующим образом: http://url/en/home, и ссылка на результат может выглядеть так: http://url/fetch/data/x123av).

Проблема в том, что лучше всего исправить это, когда кнопка «Назад» вернет результаты из окна поиска?

Я нашел несколько ответов в stackoverflow, связанных с моим вопросом: http://code.google.com/p/reallysimplehistory http://tkyk.github.com/jquery-history-plugin

Но из документации этих плагинов все они работают, проверяя изменение хеша, которого у меня нет.

Надеюсь, что я достаточно хорошо объяснил, и я искал stackoverflow и google для решения, но я не нашел тот, который близок к этому, или я перепрыгнул через него.

Пожалуйста, просто укажите мне правильный путь: D

Но из документации этих плагинов все они работают, проверяя изменение хеша, которого у меня нет.

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

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

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

В предыдущей статье мы познакомились с прямыми методами jQuery для работы с Ajax (такими как get(), post() и load()). В этой статье описан низкоуровневый программный интерфейс .

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

Простые Ajax-запросы

Создавать запросы с помощью низкоуровневого API не намного сложнее, чем с помощью прямых или вспомогательных методов. Разница состоит в том, что такой подход позволяет контролировать многие другие аспекты запроса и получать о выполняющемся запросе гораздо больше информации. Центральное место в низкоуровневом API занимает метод ajax(), простой пример использования которого приведен ниже (здесь используется исходный файл и файл mydata.json, описанные в предыдущей статье):

Аргументами метода ajax() являются запрашиваемый URL и объект отображения данных, свойства которого определяют набор пар «ключ-значение», каждая из которых определяет некий параметр запроса. Здесь передаваемый методу ajax() объект содержит только один параметр, success, задающий функцию, которая будет вызываться в случае успешного выполнения запроса.

В данном примере мы запрашиваем у сервера файл mydata.json и используем его вместе с шаблоном данных для создания элементов и вставки их в документ, как это делалось в предыдущей статье с помощью прямых методов. По умолчанию метод ajax() создает HTTP-запрос GET, т.е. данный пример эквивалентен использованию методов get() и getJSON().

Объект jqXHR

Метод ajax() возвращает объект jqXHR, который можно использовать для получения подробной информации о запросе и с которым можно взаимодействовать. Объект jqXHR представляет собой оболочку объекта XMLHttpRequest, составляющую фундамент браузерной поддержки Ajax.

При выполнении большинства операций Ajax объект jqXHR можно просто игнорировать, что я и рекомендую делать. Этот объект используется в тех случаях, когда необходимо получить более полную информацию об ответе сервера, чем та, которую удается получить иными способами. Кроме того, его можно использовать для настройки параметров Ajax-запроса, но это проще сделать, используя настройки, доступные для метода ajax(). Свойства и методы объекта jqXHR описаны в таблице ниже:

Свойства и методы объекта jqXHR

Свойство/метод Описание
readyState Возвращает индикатор хода выполнения запроса на протяжении всего его жизненного цикла, принимающий значения от 0 (запрос не отправлен) до 4 (запрос завершен)
status Возвращает код состояния HTTP, отправленный сервером
statusText Возвращает текстовое описание кода состояния
responseXML Возвращает ответ в виде XML (если он является XML-документом)
responseText Возвращает ответ в виде строки
setRequest(имя, значение) Возвращает заголовок запроса (это можно сделать проще с помощью параметра headers)
getAllResponseHeaders() Возвращает в виде строки все заголовки, содержащиеся в ответе
getResponseHeaders(имя) Возвращает значение указанного заголовка ответа
abort() Прерывает запрос

Объект jqXHR встречается в нескольких местах кода. Сначала он используется для сохранения результата, возвращаемого методом ajax(), как показано в примере ниже:

В этом примере мы сохраняем результат, возвращаемый методом ajax(), а затем используем метод setInterval() для вывода информации о запросе каждые 100 мс. Использование результата, возвращаемого методом ajax(), не изменяет того факта, что запрос выполняется асинхронно, поэтому при работе с объектом jqXHR необходимо соблюдать меры предосторожности. Для проверки состояния запроса мы используем свойство readyState (завершению запроса соответствует значение 4) и выводим ответ сервера на консоль.

Для данного сценария консольный вывод выглядит так (в вашем браузере он может выглядеть несколько иначе):

Я использую объект jqXHR лишь в редких случаях и не делаю этого вообще, если он представляет собой результат, возвращаемый методом ajax(). Библиотека jQuery автоматически запускает Ajax-запрос при вызове метода ajax(), и поэтому я не считаю возможность настройки параметров запроса сколько-нибудь полезной. Если я хочу работать с объектом jqXHR (как правило, для получения дополнительной информации об ответе сервера), то обычно делаю это через параметры обработчика событий, о которых мы поговорим далее. Они предоставляют мне информацию о состоянии запроса, что избавляет от необходимости выяснять его.

Задание URL-адреса запроса

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

Создание POST-запроса

Для задания требуемого типа запроса, который необходимо выполнить, используется параметр type. По умолчанию выполняются GET-запросы, как в предыдущем примере. Пример использования метода ajax() для создания POST-запроса и отправки данных формы на сервер приведен ниже:

Здесь я не буду подробно описывать этот пример, т.к. мы его рассмотрели подробно в предыдущей статье (только с использованием метода post()). Отмечу только, что здесь дополнительно к type мы использовали еще несколько параметров. Для указания цели POST-запроса используется описанный ранее параметр url. Пересылаемые данные указываются с помощью параметра data, значение которого устанавливается с помощью метода serialize(), описанного в предыдущей статье. Тип данных, получаемых от сервера указывается в параметре dataType.

Работа с событиями Ajax

Несколько параметров позволяют указывать функции для обработки событий, которые могут запускаться на протяжении жизненного цикла Ajax-запроса. Именно таким способом вы будете указывать функции обратного вызова, играющие столь важную роль в Ajax-запросах. С одной из них вы уже познакомились при рассмотрении параметра success в предыдущем примере. Список параметров, связанных с событиями, вместе с их краткими описаниями приведен в таблице ниже:

Параметры событий Ajax

Параметр Описание
beforeSend Задает функцию, которая будет вызываться перед запуском Ajax-запроса
complete Задает функцию, которая будет вызываться при успешном или неудачном завершении Ajax-запроса
error Задает функцию, которая будет вызываться при неудачном завершении запроса
success Задает функцию, которая будет вызываться при успешном выполнении запроса

Обработка успешных запросов

В примерах выше, при использовании параметра success, в вызове функции были опущены два аргумента — сообщение, описывающее результат запроса, и объект jqXHR. Пример использования функции, которая принимает эти аргументы, приведен ниже:

Аргумент status — это строка, описывающая исход запроса. Функция обратного вызова, которую мы задаем, используя параметр success, выполняется лишь для успешных запросов, и поэтому значением данного аргумента обычно является success. Исключением является случай, когда вы используете параметр ifModified, описанный далее.

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

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

В данном случае результат имеет следующий вид (в зависимости от того, какой сервер вы используете, у вас может быть другой набор заголовков):

Обработка ошибок

Параметр error используется для указания функции, которая должна вызываться при неудачном завершении запроса. Соответствующий пример приведен ниже:

Здесь запрашивается отсутствующий на сервере файл NoSuchFile.json, и поэтому запрос заведомо не сможет быть выполнен, в результате чего будет вызвана функция, заданная с помощью параметра error. Аргументами этой функции являются объект jqXHR, а также сообщение о состоянии ошибки и сообщение об ошибке, полученное в ответе сервера. Внутри этой функции в документ добавляется элемент div, отображающий значения аргументов status и errorMsg, как показано на рисунке:

Настройка параметров запросов перед их отправкой

Параметр beforeSend позволяет задать функцию, которая будет вызываться перед отправкой запросов. Это позволяет сконфигурировать запрос в последнюю минуту, добавляя или заменяя параметры, переданные методу ajax() (что может быть особенно полезным, если для множества запросов используется один и тот же объект, содержащий необходимые значения параметров). Пример использования такого подхода представлен ниже:

Аргументами указанной функции являются объект jqXHR (который может пригодиться для настройки заголовков запроса или отмены запроса, прежде чем он будет отправлен) и объект, содержащий параметры, переданные методу ajax(). В данном примере URL-адрес для Ajax-запроса задается с помощью параметра beforeSend.

Задание нескольких обработчиков событий

В предыдущих примерах мы реагировали на наступление событий, связанных с Ajax-запросами, вызовом одной функции, но в параметрах success, error, complete и beforeSend можно задавать массив функций, каждая из которых будет выполняться при запуске соответствующего события. Простой пример этого приведен ниже:

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

Настройка контекста для событий

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

Здесь параметр context устанавливается на объект jQuery, содержащий элементы h1 документа. В функции, определяемой параметром complete, мы выделяем рамкой выбранные элементы (в данном случае — элемент, поскольку в документе есть только один элемент h1) путем вызова метода css() для объекта jQuery (на который ссылаемся через this). Цвет рамки определяется на основании состояния запроса.

С помощью параметра context можно установить в качестве контекста любой объект, и ответственность за выполнение только допустимых для этого объекта операций лежит на вас. Например, если вы задаете в качестве контекста элемент HTMLElement, то до того, как вызывать для него какие-либо методы jQuery, вы должны передать этот объект функции $().

Настройка базовых параметров Ajax-запросов

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

Базовые конфигурационные параметры Ajax-запроса

Параметр Описание
accepts Устанавливает для запроса значение заголовка Accept, который указывает MIME-типы, поддерживаемые браузером. По умолчанию это значение определяется параметром dataType
cache Значение false указывает на то, что содержимое запроса не должно кэшироваться сервером. По умолчанию кешируются все типы данных, кроме script и jsonp
contentType Устанавливает для запроса значение заголовка content-туре
dataType Указывает, какие типы данных ожидаются от сервера. Если используется этот параметр, то jQuery будет игнорировать информацию, предоставляемую сервером о типе запроса
headers Задает дополнительные заголовки и значения, которые должны включаться в запрос
jsonp Задает строку, которую следует использовать вместо функции обратного вызова при выполнении запросов JSONP (кроссдоменные запросы). Этот параметр требует согласования с сервером
jsonpCallback Задает имя функции обратного вызова, которое должно использоваться вместо автоматически сгенерированного случайного имени, используемого jQuery по умолчанию
password Задает пароль, который должен использоваться в запросе при прохождении процедуры аутентификации
scriptCharset Указывает jQuery, какой набор символов используется при кодировании запрашиваемого JavaScript-содержимого
timeout Задает длительность тайм-аута (в миллисекундах) для запроса
userName Задает имя пользователя, которое должно использоваться в запросе при прохождении процедуры аутентификации

Задание тайм-аутов и заголовков

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

В этом примере параметр timeout устанавливает максимальную длительность тайм-аута, равную 5 сек. Если запрос за это время не будет выполнен, то вызовется функция, заданная с помощью параметра error, и будет выведен код ошибки, определяемый параметром status.

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

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

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

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

Создание синхронных запросов

Управление режимом выполнения запросов осуществляется с помощью параметра async. Значение true, используемое для этого параметра по умолчанию, означает, что запрос будет выполняться в асинхронном режиме, тогда как значению false соответствует синхронный режим.

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

Игнорирование данных, оставшихся неизменными

С помощью параметра ifModified можно обеспечить получение данных лишь в том случае, если с момента последнего запроса они были изменены. Такое поведение определяется заголовком Last-Modified. Благодаря этому удается избежать бесполезной пересылки данных, которая не даст пользователю никакой новой информации по сравнению с той, которой он уже располагает. По умолчанию параметр ifModified имеет значение false, указывающее jQuery на необходимость игнорирования заголовка Last-Modified и предоставления данных в любом случае.

Пример использования этого параметра приведен ниже:

В этом примере значение параметра ifModified устанавливается равным true. Функция success вызывается всегда, но если с того момента, когда содержимое запрашивалось в последний раз, оно не изменилось, то аргумент data будет иметь значение undefined, а аргумент status — значение notmodified.

В данном случае выполняемые действия определяются значением аргумента status. Если значением этого аргумента является success, то аргумент data используется для добавления элементов в документ. Если же аргумент status имеет значение notmodified, то мы используем метод css() для выделения рамкой элементов, которые уже имеются в документе.

В ответ на событие click, связанное с кнопкой, вызывается метод ajax(). Это дает возможность многократно повторять один и тот же запрос, чтобы продемонстрировать влияние параметра ifModified, как показано на рисунке:

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

Представьте, что вы запрашиваете данные, но в методе, указанном в параметре success, содержится ошибка, которая препятствует правильному обновлению содержимого документа. Тогда вашим следующим действием будет попытка щелкнуть на кнопке еще раз, чтобы добиться ожидаемого результата. Непродуманно используя параметр ifModified, можно проигнорировать действия пользователя, вынуждая его предпринимать более серьезные действия для устранения проблемы.

Обработка кода ответа

Параметр statusCode позволяет выбирать варианты дальнейших действий в зависимости от кода ответов на HTTP-запросы. Его можно использовать либо вместо параметров success и error, либо в дополнение к ним. Пример самостоятельного использования параметра statusCode приведен ниже:

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

Если код (например, 200) соответствует успешному запросу, то аргументы совпадают с теми, которые передавались бы функции, определяемой параметром success. В противном случае (например, при коде ответа 404, означающем, что запрашиваемый файл не найден) аргументы совпадают с теми, которые передавались бы функции, определяемой параметром error.

Как видите, это средство не дает непосредственной информации о кодах ответа. Я часто пользуюсь им в процессе отладки взаимодействия браузера с сервером, обычно для того, чтобы выяснить, почему jQuery ведет себя не так, как мне хотелось бы. При этом я использую параметр statusCode в дополнение к параметрам success и error и вывожу информацию на консоль. Если эти параметры используются совместно, то сначала будут выполнены функции success и error, а затем уже — функции, определяемые параметром statusCode.

Предварительная очистка ответных данных

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

Это средство мне очень помогает при работе с серверами Microsoft ASP.NET, присоединяющими лишние данные к данным JSON. Удаление таких данных с помощью параметра dataFilter требует лишь минимальных усилий. Пример использования параметра dataFilter приведен ниже:

Функции передаются данные, полученные с сервера, и значение параметра dataType. Если параметр dataType не используется, то второму аргументу присваивается значение undefined. Ваша задача заключается в том, чтобы вернуть отфильтрованные данные. В этом примере предмет нашего внимания — данные в формате JSON:

Для повышения иллюстративности примера в нем выполняются некоторые дополнительные операции. Во-первых, данные JSON преобразуются в массив JavaScript с помощью метода jQuery parseJSON. Затем из массива удаляется первый элемент с помощью метода shift(), а порядок следования остальных его элементов обращается с помощью метода reverse().

Все, что требуется от функции, — вернуть строку, и поэтому мы вызываем метод JSON.stringify(), зная, что jQuery преобразует данные в объект JavaScript, прежде чем вызвать функцию success. В данном примере была продемонстрирована возможность удаления элемента из массива, однако, в зависимости от ситуации, мы могли бы выполнить любой другой вид обработки.

Конечный результат представлен на рисунке:

Управление преобразованием данных

Рассмотрение одной из самых любимых своих настроек я приберег напоследок. Должно быть, вы обратили внимание, что при получении определенных типов данных jQuery автоматически выполняет некоторые удобные преобразования. Например, получая данные JSON, jQuery предоставляет функцию success, использующую объект JavaScript, а не исходную необработанную строку JSON.

Для управления подобными преобразованиями используется параметр converters. Значением этого параметра является объект, устанавливающий соответствие между типами данных и функциями, используемыми для их обработки. В примере ниже показано, как использовать этот параметр для автоматического преобразования HTML-данных в объект jQuery:

В этом примере регистрируется функция для типа данных text html. Обратите внимание на пробел между компонентами указываемого MIME-типа (в отличие от формы записи text/html). Функция принимает данные, полученные от сервера, и возвращает преобразованные данные. В этом случае преобразование данных заключается в передаче HTML-фрагмента, содержащегося в файле flowers.html, функции $() и возврате результата. Отсюда следует, что к объекту, передаваемому в качестве аргумента data функции success, применимы обычные методы jQuery.

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

Настройка и фильтрация Ajax-запросов

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

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

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

Метод ajaxSetup() вызывается с помощью функции jQuery $ аналогично тому, как это делалось в случае вызова метода ajax(). Аргументом метода ajaxSetup() является объект, содержащий значения параметров, которые вы хотите использовать по умолчанию для всех Ajax-запросов. В этом примере мы устанавливаем значения по умолчанию для параметров timeout, global, error и converters.

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

Фильтрация запросов

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

Указанная вами функция будет выполняться для каждого нового Ajax-запроса. Аргументами, передаваемыми функции, являются параметры запроса (включая любые значения по умолчанию, установленные вами с помощью метода ajaxSetup()), а также исходные параметры, переданные методу ajax() (исключая любые значения по умолчанию) и объекту jqXHR запроса.

Мы вносим изменения в объект, передаваемый в качестве первого аргумента, как показано в примере. В данном сценарии, если среди параметров, передаваемых методу ajax(), присутствует параметр dataType, то длительность тайм-аута устанавливается равной двум секундам. Чтобы предотвратить отправку всех остальных запросов, для объекта jqXHR вызывается метод abort().

Цукерберг рекомендует:  Интернет-магазин - Ищу дизайнера
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих