Ajax — Подскажите js AJAX библиотеку для браузера

Содержание

Ребята подскажите какую Ajax библиотеку лучше выбрать?

Ребята подскажите какую Ajax библиотеку лучше выбрать?
Пытался сам разобраться в этом вопросе, но что-то не получается.

Ссылаются на Объем загружаемого кода, но я так понимаю он влияет на первую загрузку, а потом берется из кэша, если так то 1мб это не так много?

Так же говорят что некоторые библиотеки конфликтуют с самим языком java (заменяют некоторые функции), из-за этого может получится конфликт между библиотеками или при использовании своего кода на java.

Наличие русской документации на библиотеку.

17.11.2010, 20:35

Подскажите какую лучше выбрать CMS?
Нужно такую ​​CMS, чтобы можно было вручную редактировать HTML и CSS шаблонов страниц (как на ucoz).

Ребята нужно выбрать что лучше!
В общем захотелось мне апгрейдить свой Пк,купил уже для него и поставил gigabyte gtx 780 не.

Какую с++ библиотеку VK-API использовать лучше?
понадобилось написать клиент для вк с использованием апи. подскажите билиотеку, пожалуйста, и.

Какую графическую библиотеку выбрать?
Господа ветераны, поделитесь опытом какую графическую библиотеку лучше выбрать для программирования.

Какую GUI библиотеку выбрать?
Библиотеки визуальных компонентов очень громоздки, особенно Qt — 10 мб Hello World смех, да и.

22.11.2010, 01:35 2

alpha348, советую JQuery:
1. Простой, понятный синтаксис
2. Кроссбраузерность
3. Отсутствие конфликтов
4. Постоянное развитие

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).
В некоторых случаях печать динамически формируемых страниц может представлять сложность.

Цукерберг рекомендует:  Сетевые технологии и ос - Знатоки протокола TCPIP подскажите

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

AJAX, DHTML и JavaScript-Библиотеки

Компоненты AJAX, DHTML и javascript практически незаменимы в эру технологии Web 2.0. В наше время, разработчики, всё чаще и чаще предпочитают использовать данные компоненты при создании веб-сайтов, потому что с их помощью можно снабдить сайт большими возможностями и гарантировать лучшую функциональность. Вопрос в том, какими библиотеками javascript можно воспользоваться при создании нового проекта в сети? Какие главные функции, эффекты и прочие полезные технологии сможет предоставить javascript? Мы попробуем ответить на эти вопросы.

Как результат – мы предоставим огромный список из более чем 50 Ajax, javascript и DHTML библиотек с подробными их описаниями.

AjaxAC
AjaxAC – это платформа, написанная на языке PHP и предоставляемая открытым кодом. Её используют для разработки, создания и произведения AJAX-приложений. Основная идея AJAX (Асинхронный javascript и XML) заключается в использовании XMLHttpRequest для того, чтобы изменять статус веб-страницы, используя фоновые дополнительные запросы HTTP, не перезагружая при этом всю страницу полностью.

Ajax.NET Professional
Ajax.NET Professional или в сокращении AjaxPro — это одна из первых платформ обработки AJAX, доступных для Microsoft ASP.NET и работающих с приложениями .NET 1.1 и 2.0.

Библиотека AjaxRequest
AjaxRequest верхний уровень над XMLHttpRequest. Задачей этого приложения является – облегчить разработчикам создание связи между javascript и сервером.

AHAH: Asychronous HTML and HTTP
AHAH представляет собой очень простой метод для создания динамически обновляемых веб-страниц, с использованием javascript. Он использует XMLHTTPRequest для поиска фрагментов (X)HTML, которые впоследствии будут добавлены прямо на страницу и обработаны, оформлены с помощью CSS.

dojo, the javascript Toolkit
Dojo – это инструмент javascript, предоставляемый открытым кодом. С его помощью профессиональная веб-разработка становится лучше, быстрее и проще.

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

Cross-Browser.com
Основная особенность данного сайта заключается в предоставлении кросс-браузерной DHTML javascript-библиотеки, и множества образцов, приложений, статей и документаций.

DHTML API, Drag & Drop for Images and Layers
Коллекция javascript-приложений от разработчика Уолтера Зорна (Walter Zorn)

DHTML Kitchen
Это полезный ресурс для готовых и разработанных по заказу DHTML-скриптов. Мы также специализируемся на JSP и JAVA-решениях клиентской части систем.

Dynamic Drive
Коллекция DHTML и javascript кода.

DynAPI
DynAPI 3 – проект, предоставляемый открытым кодом, основанный Дэном Стайнманом (Dan Steinman). Этот проект создан для того, чтобы воплотить в реальность динамический HTML. Библиотека DynAPI использует объектно-ориентированный подход к решению вопросов, связанных с написанием скриптов для браузеров Netscape и Internet Explorer.

Engine for Web Applications
Engine for Web Applications — это платформа для утилит по разработке Web-приложений клиентской стороны.

FACE
Легкий путь привнесения живости и энергичности на веб-сайт, без использования Flash. Полностью доступное приложение, с превосходной реализацией принципа «включи и работай».

javascript Libraries
Коллекции от Марка Уилтона-Джонса (Mark Wilton-Jones).

MochiKit
Облегченная библиотека javascript.

JSL : Стандартная библиотека javascript
JSL представляет собой всего один файл небольшого размера (упакованная версия, совместимая с IE4 весит 7.74кб) с некоторыми стандартными методами или функциями javascript 1.6, которые отсутствуют в некоторых браузерах. Главной целью его является – добиться того, чтобы можно было не беспокоиться об обработке каждой библиотеки или скрипта, который используется на вашей странице. Вы можете просто добавить JSL перед скриптами для того, чтобы внести гибкости или больше совместимости, и после этого вам не придется ничего переписывать в каждом скрипте.

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

jQuery — New Wave javascript
jQuery – это библиотека javascript с мощным девизом: «Программирование на javascript должно быть развлечением!». И это приложение успешно выполняет данный позыв, убирая всю лишнюю и ненужную разметку из кода общепринятых повторяющихся задач, оставляя чистый и понятный код.

JSAN — javascript Archive Network
javascript Archive Network – это всесторонний ресурс для библиотек и приложений javascript, бесплатно распространяющихся открытым кодом.

Kabuki AJAX Toolkit
Kabuki AjaxTK – это комплект для разработки приложений, по стилю схожих с традиционными объектно-ориентированными библиотеками, по типу Eclipse’s SWT, только для javascript.

LINB (Lazy INternet and Browser)
LINB расшифровывается и переводится как – «Ленивый Интернет и Браузер». Разработана таким методом, чтобы разработчики смогли кодить максимально продуктивным, отчетливым и разумным методом.

moo.ajax
moo.ajax представляет собой очень простой тип объекта для использования вместе с prototype.lite из moo.fx .

ASP.NET AJAX
Бесплатная платформа для создания более насыщенных, интерактивных и адаптированных под кросс-браузерность, веб-приложений.

Цукерберг рекомендует:  Вакансии Имейджин Веб

moo.fx
Супер-облегченная коллекция эффектов javascript.

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

overlibmws DHTML Popup Library
Папки для скачивания и тестирования библиотеки всплывающих окон overlibmws на DHTML.

PlotKit — javascript Chart Plotting
PlotKit – это javascript-библиотека для создания графиков и графических чертежей.

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

qForms javascript API
Самый полноценный javascript-интерфейс для создания взаимодействия между формами. Интерфейс qForms был создан для облегчения работы с формами. Он упрощает задачу HTML-разработчиков, давая возможность находить различные хитрые пути их выполнения.

qooxdoo
qooxdoo – это расширенный графический интерфейс, основывающийся на javascript и предоставляемый открытым кодом. С его помощью можно реализовывать AJAX-усовершенствованные приложения Web 2.0.

Rico
javascript-библиотека для разработки насыщенных Интернет приложений. Предоставляется открытым кодом. Rico предоставляет полную поддержку Ajax, управление посредством «drag&drop» и библиотеку кинематографических эффектов.

Ruby on Rails
Rails – это полноценная платформа для разработки веб-приложений, работающих с базами данных, следуя образцу «Model-View-Control». С точки зрения AJAX, Rails даёт превосходную среду разработки для «запроса и ответа» в контроллере и оболочки для работы с базами данных. Для придания жизни своему проекту, вам всего лишь требуется добавить базу данных на веб-сервер.

Sajax
Sajax – это инструмент, предоставляемый открытым кодом, рассчитаный на программирование веб-сайтов с использованием структуры Ajax – также известной как XMLHTTPRequest, или — удаленный скриптинг. Одинаково просто и возможно…

script.aculo.us
script.aculo.us предоставит вам различные javascript-библиотеки, крайне простые в использовании. С их помощью вы сможете заставить ваш веб-сайт летать.

JonDesign’s Smooth SlideShow Library
Эта система, с помощью компонентов moo.fx и prototype.lite.js, поможет вам создавать и использовать на сайте простенькие слайдшоу (с эффектом затухания).

Spry Framework for Ajax
Платформа Spry от корпорации Adobe представляет собой библиотеку javascript для веб-дизайнеров, с помощью которой можно создавать страницы, которые предоставляют больше возможностей своим посетителям.

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

Taconite
Taconite – это платформа, которая упрощает создание веб-приложений с помощью AJAX. Это очень облегченная среда обработки, которая автоматизирует скучные задачи относительно разработки Ajax. Например: создание и управление объектом XMLHttpRequest или создание динамического содержимого.

Tacos
Проект Tacos предоставляет работу и компоненты ajax для Java-приложения Tapestry. Большая часть функций заключается в использовании специальной javascript-библиотеки dojo.

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

ThyApi
ThyAPI – утилита, позволяющая разрабатывать более лучший пользовательский интерфейс для веб-приложений, с использованием javascript и Ajax. С её помощью можно выполнять задачи по разработке визуального интерфейса с использованием CSS, и совмещать все объекты по управлению данными.

TwinHelix
Сборник оригинальных и продуктивных примеров DHTML и javascript. Все они ужаты до максимально маленьких объемов. Как рассказывает автор: «Маленькие объемы кода – это мой основной приоритет в процессе разработки скрипта, потому что пользователи не хотят выжидать загрузки сайта по полчаса.»

TurboWidgets
TurboWidgets — это панель управления на javascript, со стороны клиента, которая обеспечивает насыщенный пользовательский интерфейс веб-приложения, стилизованного с помощью AJAX. TurboWidgets был создан с помощью самой популярной утилиты — Dojo Toolkit. Приложение было спроектировано для максимально простого использования и удобства.

High Performance javascript Vector Graphics Library
javascript-библиотека VectorGraphics обеспечивает возможности создания графики с помощью javascript: функции для рисования окружностей, овалов, косых и ломаных линий, а также многоугольников.

WMS javascript Library
WMS (Сервер веб-карты) отобразит вам статическое изображение карты при указании нужных параметров в адресе URL. Назначение WMS wmsmap.js – это облегчить создание динамических карт, используя свободно доступные серверы WMS.

Yahoo! User Interface Library
Библиотека пользовательского интерфейса Yahoo! собрана из утилит и средств управления, написанных на javascript. С ее помощью можно создавать насыщенные пользовательские интерфейсы, используя такие методы, как DOM, DHTML или AJAX…

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

Zebda
Zebda – это наглядный пример использования библиотеки javascript, созданной с помощью Prototype 1.4.0

Zephyr
Zephyr это платформа для разработчиков PHP5, основывающаяся на Ajax. Вы сможете с легкостью разрабатывать бизнес-приложения, используя эту мощную платформу. Она максимально проста в изучении и легка в применении.

ZK
ZK – это веб-приложение Ajax, которое даcт возможность создавать насыщенные пользовательские интерфейсы без использования javascript, но применяя немного программирования.

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

BX.ajax

Низкоуровневая функция для отправки аяксовых запросов. Формат объекта params:

Функция возвращает ссылку на объект XMLHttpRequest, при помощи которого осуществляется запрос. В случае успеха запроса будет вызван обработчик onsuccess. В качестве параметра будет результат запроса. Если параметр processData установлен в true, то обработка будет в зависимости от типа данных:

  • html: результат будет очищен от js-кода. Код будет выполнен после передачи данных обработчику. Перед передачей будут выполнены все скрипты с атрибутом bxrunfirst, или все скрипты, если параметр scriptsRunFirst установлен в true;
  • script: полученный результат будет передан обработчику и выполнен. Что раньше – определяется параметром scriptsRunFirst
  • json: результат будет интерпретирован как описание объекта в формате json. Обработчик получит объект.

Если подключена библиотека для работы с localStorage (core_ls), то помимо перечисленных параметров можно использовать указать параметры:

  • lsId – строковой идентификатор для передачи данных запроса между различными вкладками;
  • lsTimeout – время жизни данных запроса
  • lsForcefalse|true

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

Пользовательские комментарии

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

Для этого нужно всего лишь авторизоваться на сайте

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

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

Пример скрипт обработки php-массива
Имеем php-массив с какими-то данными ($PRICE_LIST_DATA). каждую строку массива нужно отправлять ajax-ом в файл на обработку и при это публиковать пользователю результат работы каждого шага. В файле с php после получения массива выводим скрипт:
(простите за смесь BX и jquery).

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

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

Получаем данные в формате JSON с помощью метода $.getJSON()

Метод $.getJSON() открывает простой путь к получению данных в формате JSON с сервера. Он эквивалентен вызову метода $.get() с параметром формата данных «json» . Синтаксис его вызова идентичен синтаксису метода $.get() за исключением того, что вам не нужно указывать формат данных.

Например, наш пример с прогнозом погоды из предыдущих уроков серии можно изменить следующим образом:

Получаем и запускаем код JavaScript с помощью метода $.getScript()

Также как и метод $.getJSON() , который является короткой записью вызова метода $.get() для получения данных в формате JSON, метод $.getScript() является короткой записью вызова метода $.get() для получения и выполнения кода JavaScript, то есть аналогично использованию параметра формата данных «script» . Метод $.getScript() получает два аргумента:

  • URL файла JavaScript для загрузки.
  • Опциональную возвратную функцию, которая выполняется по завершению выполнения загруженного JavaScript кода.

Метод $.getScript() используется для загрузки библиотек и плагинов JavaScript «на лету», то есть тогда, когда они нужны. Так можно уменьшить время начальной загрузки страницы, потому что не нужно включать в заголовок страницы каждую библиотеку JavaScript, которая может быть понадобится, а может быть и нет.

Для демонстрации работы метода $.getScript() переместим код, который выводит прогноз в отдельный файл JavaScript showForecast.js . Весь код будет размещен в функции showForecast() :

Также изменим страницу showForecast.html для получения нашего кода JavaScript с помощью метода $.getScript() :

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

Код JavaScript в файле showForecast.html начинается с вызова $.getScript() для загрузки библиотеки showForecast.js . Также создается анонимная возвратная функция, которая выполняется сразу после загрузки showForecast.js . Данная функция добавляет обработчик события click для кнопки #getForecast , который вызывает метод $.get() для получения файла getForecast.txt и выполнения загруженной функции showForecast() для вывода сообщения.

Метод $.getScript() добавляет случайный параметр к строке запроса (например, ?_=1330395371668 ) для предотвращения кэширования браузером файла JavaScript.

Создаем обобщенный запрос AJAX с помощью $.ajax()

Высокоуровневые методы AJAX, которые мы рассмотрели ранее ( $.get() , $.post() , load() , $.getJSON() и $.getScript()) открывают простой и легкий путь к использованию общих типов запросов AJAX в своих приложениях. Но иногда требуется более сильный контроль над запросом, или нужно решить задачу, которая недоступна высокоуровневым методам.

В такой ситуации нужно использовать низкоуровневый метод jQuery $.ajax() . Вызов метода $.ajax() делает AJAX запрос к указанному URL. Обобщенный синтаксис вызова следующий:

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

Параметры, которые можно использовать с методом $.ajax() :

Параметр Описание Значение по умолчанию
cache Устанавливаем значение true , чтобы разрешить кеширование ответа от сервера, или значение false, чтобы всегда производить запрос. Значение false также принуждает jQuery добавлять случайное число к запросу для предотвращения кеширования.. true ( false , когда используется со значениями ‘script’ и ‘jsonp’ параметра dataType )
complete Задает возвратную функцию, которая выполняется по завершению запроса (независимо от успешности операции). Нет
data Данные, которые пересылаются на сервер в запросе. Нет
dataType Ожидаемый тип данных ответа. Дополнительно можно использовать значение «jsonp» для выполнения запроса JSONP. Автоматическое определение данных
error Задает возвратную функцию, которая выполняется. если запрос завершился ошибкой. Нет
headers Дополнительный заголовок HTTP , который отправляется вместе с запросом в виде пар ключ/значение. <>
password Пароль, который используется, если сервер HTTP требует аутентификации. Нет
success Задает возвратную функцию, которая выполняется, если запрос завершается успешно. Нет
timeout Время ожидания (в миллисекундах) завершения запроса AJAX. Значение 0 означает, что jQuery будет ждать без ограничения во времени.
type Тип запроса: «GET» или «POST» . «GET»
username Имя пользователя, если сервер HTTP требует аутентификации. Нет

Полный список параметров приводится в документации jQuery.

Изменим наш пример для использования метода $.ajax() . Мы можем для нашего прогноза отказаться от кеширования и будем обрабатывать ошибки. Вот модифицированный код страницы showForecast.html :

В данном примере мы используем метод $.ajax() для генерации запроса AJAX. Мы передаем URL в запрос ( getForecast.txt ) вместе со списком опций. Три из данных опций ( data , dataType и success ) соответствуют аргументам, которые мы передаем в метод $.get() . Остальные два ( cache: false и error: errorHandler ) отключают кеширование и устанавливают функцию обработки ошибок errorHandler().

Функция errorHandler() просто выдает сообщение об ошибке пользователю.

Устанавливаем значения по умолчанию с помощью метода $.ajaxSetup()

Вместо того, чтобы каждый раз при формировании запроса AJAX задавать большое количество различных повторяющихся параметров, таких как success , cache и type можно использовать метод $.ajaxSetup() для установки значений по умолчанию. Все запросы AJAX jQuery будут использовать заданные установки, пока их не изменят.

Например, можно по умолчанию отключить кеширование для всех запросов AJAX:

Заключение

Наше введение в технологию AJAX завершилось. Мы представили основные средства для формирования и обработки запросов AJAX с помощью методов jQuery. Остается только наработать практический опыт их применения.

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

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

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

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

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

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

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

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

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

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

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

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

Знакомство с AJAX для Front-End дизайнеров. Основы AJAX

Дата публикации: 2020-02-15

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

Приступим! Обратите внимание: предполагается, что вы уже знаете базовые front-end технологии, такие как HTML и CSS.

Что такое AJAX?

AJAX расшифровывается как «Асинхронный JavaScript и XML». Под AJAX понимается не одна технология, и она не является новой. На самом деле это группа технологий (HTML, CSS, Javascript, XML, и т.д.), которые связываются вместе для создания современных веб-приложений.

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

«JavaScript» это язык программирования, который используется для создания объекта запроса AJAX, парсинга этого ответа и обновления DOM страницы.

Для отправки запроса на сервер клиент использует XMLHttpRequest или XHR API. API (программный интерфейс) это набор методов, которые задают правила общения между двумя заинтересованными сторонами. Тем не менее, приходящие из AJAX запроса данные могут быть в любом формате, а не только в XML.

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

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

На картинке описан стандартный AJAX сценарий:

Пользователь хочет увидеть больше статей, и он или она кликает на нужную кнопку. Данное событие запускает вызов AJAX.

Запрос посылается на сервер. С запросом можно передать различные данные. Запрос может посылаться в статический файл (к примеру, example.php), хранящийся на сервере. Также можно выполнять динамические скрипты (functions.php), на каждом этапе которых будет происходить общение с базой данных (или другой системой) для извлечения необходимой информации.

База данных отсылает обратно запрошенные статьи на сервер. А сервер посылает их в браузер.

JavaScript парсит ответ и обновляет часть DOM (структура страницы). В нашем примере обновится только сайдбар. Остальные части страницы не меняются.

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

Живой пример на AJAX

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

Сперва рассмотрим принципы работы Facebook и Twitter. При прокрутке страницы вниз AJAX подгружает новый контент. Также если вы ставите лайк или дизлайк вопросам и ответам на Stack Overflow, опять же срабатывает AJAX. Как только вы вбиваете в строку поиска что-то в Google или Youtube, срабатывают множественные запросы AJAX.

Цукерберг рекомендует:  Graphics - VESA(VBE in PM) + shaders

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

Как создать запрос

Выше мы уже говорили, что для создания запроса используется XMLHttpRequest API. Кроме того в jQuery, самой популярной JS библиотеке есть различные Ajax функции и методы. В серии статей мы рассмотрим различные примеры на чистом JS и JQuery для отправки запросов на сервер.

Управление запросами

Вытаскиваемые данные с сервера могут храниться в различных форматах. XML, JSON, JSONP, обычный текст и HTML.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

XML (Расширяемый язык разметки) – один из самых популярных форматов для обмена данными между приложениями. Формат похож на HTML, и в качестве структуры используются теги. Однако в XML нет готовых тегов, мы сами задаем их. Пример структуры ниже:

AJAX на практике.

Запрос на чистом JavaScript.

Серия статей «Ajax на практике«

  • Основы передачи данных
  • Получение данных из формы
  • Загрузка файлов
  • Progress Bar — индикатор процесса загрузки
  • Запрос на чистом JavaScript.

Во всех четырёх статьях серии «Ajax на практике», мы разбирались, как использовать эту технологию с помощью библиотеки jQuery и, в частности, её метод $.ajax(), но всегда ли нужно прибегать к помощи фреймворков? К примеру, если в своём проекте, вы больше нигде не используете библиотеку, то абсолютно не резонно нагружать страницы лишними килобайтами и особенно, если этих килобайт около девяноста. Вывод — пишем ajax-запрос на чистом JavaScript, тем более, что та же библиотека jQuery, ни что иное, как подготовленный набор методов (функций), написанный на нативном JS. Если взять для сравнения JS-код из статьи «Получение данных из формы», то переписывая код, нам нужно будет сделать следующее:

  1. Дождаться загрузки всего документа
  2. Получить в распоряжение элемент
  3. Повесить на него обработчик события submit
  4. Подготовить данные формы на отправку
  5. Создать объект XMLHttpRequest
  6. С помощью XHR отправить данные
  7. Получить, обработать и вывести на экран ответ сервера

Поехали пошагово.
1) Вместо привычных $(function()<>) или $(document).ready(function()<>), устанавливаем свой обработчик события onload. Но прежде, хочу пояснить, почему мы не будем использовать конструкцию element.onevent = func;. Это способ хоть и кроссбраузерный, но главным его недостатком является то, что установив на один элемент два и более обработчика, последний «затрёт» предыдущие и они «не откатают свою обязательную программу». Поэтому, хоть кода на пару строк получится больше, но запишем так:

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

Top JavaScript Libraries for Making AJAX Calls

In this post, we look at some of the best JS libraries for making AJAX calls, including jQuery, Axios, and Fetch. Read on for the whole list and code examples!

Join the DZone community and get the full member experience.

AJAX is a set of web development techniques used by client-side frameworks and libraries to make asynchronous HTTP calls to the server. AJAX stands for Asynchronous JavaScript and XML. AJAX used to be a common name in the web development circles and many of the popular JavaScript widgets were built using AJAX. For instance, a particular user interaction such as a button press would invoke an asynchronous call to the server and the server would retrieve data and return it back to the client—all this without reloading the webpage.

A Modern Reintroduction to AJAX

JavaScript has evolved and, today, we have dynamic websites built using front-end libraries and/or frameworks like React, Angular, Vue, etc. The concept of AJAX has also undergone major changes because modern asynchronous JavaScript calls involve retrieving JSON instead of XML. There are many libraries out there that let you make asynchronous calls to the server from your client-side application. Some of them have made their way into the browser standards, whereas others have a large user-base because they are flexible and easy to use. Some of them support promises whereas others use callbacks. In this article, I’ve covered the top 5 AJAX libraries for fetching data from the server.

Fetch API

Fetch API is the modern alternative to XMLHttpRequest for retrieving resources from the server. Unlike XMLHttpRequest, it has a more powerful feature set and a more meaningful name. Fetch is also flexible and easy to use because of its syntax and structure. However, the thing that sets it apart from other AJAX HTTP libraries is that it is supported by all modern web browsers. Fetch follows a request-response approach where Fetch makes a request and returns a promise that resolves to the Response object.

You can pass a Request object to fetch or, alternatively, just the URL of the resource to be fetched. The example below demonstrates a simple GET request made with Fetch.

As you can see, Fetch’s then method returns a response object that you can further manipulate using a chain of then s. I’ve used the .json() method to transform the response to JSON and print it to the console.

What if you need to POST the form data or create an AJAX file upload using Fetch? Apart from Fetch, you will need an input form, and the FormData library to store the form object.

You can read more about Fetch API in the official Mozilla web docs.

Axios

Axios is a modern JavaScript library built on top of XMLHttpRequest for making AJAX calls. It lets you make HTTP requests from both the browser and the server. Additionally, it supports the Promise API that is native to ES6. Other prominent features of Axios include:

Intercept requests and responses.

Transform request and response data using promises.

Automatically transforms JSON data.

Cancel live requests.

To use Axios, you will need to install it first.

Here is a basic example that demonstrates Axios in action.

Axios has an easier syntax compared to that of Fetch. Let’s do something more complex like the AJAX file uploader that we built earlier using Fetch.

Axios is definitely more readable. Axios is also popular with modern libraries such as React and Vue.

jQuery

jQuery used to be a front-line library in JavaScript for everything from making AJAX calls to manipulating the contents of the DOM. Although its relevance has partially diminished after the onset of other front-end libraries, you can still use jQuery for making asynchronous calls.

If you’ve used jQuery before, this would probably be the easiest solution of the lot. However, you would have to import the whole jQuery library for using the $.ajax methods. Although the library has domain-specific methods such as $.getJSON , $.get , and $.post , the syntax isn’t as easy as other AJAX libraries out there. Here is the code for making a basic GET request.

The good thing about jQuery is that you will find tons of support and documentation if you’re in doubt. I found many examples for AJAX file upload using FormData() and jQuery. Here is the easiest approach:

SuperAgent

SuperAgent is a lightweight and progressive AJAX library that’s focused more on readability and flexibility. SuperAgent also boasts of a gentle learning curve unlike other libraries out there. It has a module for Node.js with the same API. SuperAgent has a request object that accepts methods such as GET, POST, PUT, DELETE, and HEAD. You can then call .then() , .end() or the new .await() method to process the response. For example, here is a simple GET request with SuperAgent.

What if you wanted to do something more such as uploading a file using this AJAX library? That’s super easy too.

If you’re interested in knowing more about SuperAgent, they have a good set of documentation to get you started.

Request — A Simplified HTTP Client

The Request library is one of the simplest ways to make HTTP calls. The structure and syntax are very similar to that of how requests are handled in Node.js. Currently, the project has 18K stars on GitHub and deserves a mention for being one of the popular HTTP libraries available. Here is an example:

Conclusion

Making HTTP calls from the client-side wasn’t this easy a decade ago. A front-end developer would have to rely on XMLHttpRequest which was hard to use and implement. The modern libraries and HTTP clients make the front-end features like user interactions, animations, asynchronous file uploads, etc., easier.

My personal favorite is Axios because I personally feel it’s more readable and easy on the eyes. You can also stick to Fetch because it’s well documented and a standardized solution.

What is your personal favorite AJAX library? Share your thoughts below.

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 запросов с помощью jQuery

jQuery — это библиотека JavaScript позволяющая ускорить написание кода.

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

Для того, чтобы использовать возможности jQuery ее необходимо вначале подключить. Чтобы сделать это, добавьте код расположенный ниже в head секцию Вашей страницы:

Создание AJAX запросов на «чистом» JavaScript имеет несколько недостатков:

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

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

селектор выбирает элемент, в котором будет отображен результат AJAX запроса.

url адрес, на который будет отправлен AJAX запрос.

данные является необязательным параметром. Данные, которые будут переданы вместе с запросом.

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

В примере ниже мы пересылаем скрипту add.php переменную x со значением 4 и переменную y со значением 5 он в свою очередь принимает эти переменные, производит их сложение и отправляет результат обратно.

Сопровождающие функции

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

Функция ajaxSend() выполнит переданный в нее код во время отправления AJAX запроса.

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

Функция ajaxSuccess выполнит переданный в него код, если выполнение AJAX запроса будет завершено успешно.

Функция ajaxError выполнит переданный в него код, если выполнение AJAX запроса будет завершено с ошибкой.

Низкоуровневые AJAX запросы

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

Низкоуровневые AJAX запросы предоставляют более широкую функциональность, но более сложны в использовании.

Синтаксис высокоуровневого AJAX запроса:

Синтаксис аналогичного низкоуровневого AJAX запроса:

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

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