. Обзор инструментальных средств и технических приемов Ajax. (CSS),
HTML, объект XMLHttpRequest и Document Object Model (DOM) . Скачать. data-ajax - указывает путь к обработчику ajax запроса. data-html - селектор указывающий в какой тег поместить возвращённый запросом контент. AJAX использует XML и запросы HTTP. Традиционное Web-приложение посылает введенные данные на Web-сервер (используя форму HTML). Как это делается, будет показано далее в этом кратком руководстве. Пример использования AJAX. . В статье я расскажу о jQuery ajax - jquer.post(),jquery.load(), jquery.ajax.
взятые с официального jQuery руководства, с некачественным переводом,
. $(document).ready(function(){//Постраничный вывод на jquery .
Часть 1. Введение в Ajax. Пять лет назад вы были гадким утенком (с которым никто не разговаривал), если не знали XML. Восемнадцать месяцев назад в центре внимания оказался Ruby, а программисты, не знающие что с ним происходит, не были приглашены к бачку с охлажденной водой. Сегодня, если вы хотите попасть на технологическую вечеринку, нужен Ajax. Однако, Ajax – это далеко не чья- то прихоть, а мощный подход к созданию Web- сайтов, который не так трудно изучить, как полностью новый язык.
ActionScript и Flash Ajax ASP.NET HTML и CSS JavaScript PHP SEO Прочее (Веб-разработка). Описание книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов: Практическое руководство по созданию современных Web-сайтов, соответствующих концепции Web 2.0.. Статьи по верстке. Курс по HTML&CSS. Как создать сайт » Javascript & Ajax » Ajax » Руководство для начинающих по AJAX на JQuery..
Перед тем, как я погружусь в детали Ajax, давайте потратим пару минут на осмысление того, что же делает Ajax. Когда в наше время вы пишете приложение, у вас есть два основных варианта: Настольные приложения. Web- приложения. Оба варианта знакомы; настольные приложения обычно поставляются на CD (или иногда загружаются с Web- сайта) и устанавливаются целиком на вашем компьютере. Они могут использовать Интернет для загрузки обновлений, но код, выполняющий эти приложения, размещен на вашем рабочем столе.
Web- приложения (и это не удивительно) работают где- то на Web- сервере, а вы обращаетесь к этим приложениям через ваш Web- браузер. Более важным является то, что от того, где выполняется код этих приложений, зависит их поведение и способ вашего взаимодействия с ними.
Настольные приложения обычно достаточно быстрые (они работают на вашем компьютере; вы не ждете интернет- подключения), имеют отличные пользовательские интерфейсы (обычно взаимодействующие с вашей операционной системой) и невероятно динамичны. Вы можете щелкать мышкой, вводить текст, пользоваться ниспадающими и всплывающими меню, перемещаться по окнам практически без каких- либо задержек. С другой стороны, Web- приложения обычно самые свежие по времени и предоставляют возможности, которые вы никогда бы не смогли иметь на вашем компьютере (вспомните Amazon. Bay). Однако с могуществом Web приходит ожидание – ожидание ответа от сервера, ожидание обновления экрана, ожидание ответа на запрос и генерирования новой страницы. Ясно, что все это упрощение, но вы получили общее представление. Как вы, возможно, уже подозреваете, Ajax пытается преодолеть разрыв между функциональностью и интерактивностью настольного приложения и всегда обновленным Web- приложением.
Вы можете использовать динамические пользовательские интерфейсы, аналогичные имеющимся в настольном приложении, но доступные в Web- приложении. Так чего же мы ждем? Начнем рассмотрение Ajax и способов превращения ваших неуклюжих Web- интерфейсов в чувствительные Ajax- приложения. Старая технология, новые хитрости.
Что касается Ajax, то реальность такова, что он охватывает много технологий – для его освоения необходимо углубиться в несколько различных технологий (вот почему я разобью на независимые части первые несколько статей из этой серии). Хорошей новостью является то, что вы, возможно, уже знаете достаточно о многих из этих технологий – большинство из этих индивидуальных технологий изучаются легко (определенно не так трудно, как язык программирования полностью, например Java или Ruby). Вот основные технологии, вовлеченные в Ajax- приложения: HTML используется для создания Web- форм и указания полей для использования в вашем приложении. Java. Script- код – это основной код, выполняющий Ajax- приложения и обеспечивающий взаимодействие с серверными приложениями.
DHTML, или Dynamic HTML, помогает динамически обновлять формы. Вы будете использовать div, span и другие динамические HTML- элементы для разметки вашего HTML. DOM, Document Object Model (объектная модель документов), будет использоваться (через код Java.
Script) для работы и со структурой вашего HTML, и (в некоторых случаях) с XML, полученным от сервера. Рассмотрим все это по отдельности и разберемся в том, что делает каждая из этих технологий. Я исследую каждую из них в следующих статьях; сейчас просто познакомимся поближе с этими компонентами и технологиями. Чем больше вы знаете о них, тем легче перейти от бессистемных знаний к освоению каждой из них (и действительно улучшить процесс разработки Web- приложений). Объект XMLHttp. Request. Первый объект, о котором вы хотите узнать, возможно, самый новый для вас; он называется XMLHttp. Request. Это объект Java.
Script, и он создается так же просто, как показано в листинге 1. Листинг 1. Создание нового объекта XMLHttp. Request< script language="javascript" type="text/javascript">. Http = new XMLHttp. Request(). < /script> Я детально расскажу об этом объекте в следующей статье, а сейчас осознайте, что это объект, который управляет всем вашим взаимодействием с сервером. Прежде чем идти дальше, остановитесь и подумайте об этом – это технология Java.
Script в объекте XMLHttp. Request, который общается с сервером. Это не обычный ход работы приложения, и именно здесь заключается почти вся магия Ajax. В нормальных Web- приложениях пользователи заполняют поля форм и нажимают кнопку Submit (подтвердить). Затем форма передается на сервер полностью, сервер обрабатывает сценарий (обычно PHP или Java, возможно, CGI- процесс или что- то в этом роде), а потом передает назад всю новую страницу. Эта страница может быть HTML- страницей с новой формой с некоторыми заполненными данными, либо страницей подтверждения, либо, возможно, страницей с какими- то выбранными вариантами, зависящими от введенных в оригинальную форму данных.
Естественно, пока сценарий или программа на сервере не обработается и не возвратится новая форма, пользователи должны ждать. Их экраны очистятся и будут перерисовываться по мере поступления новых данных от сервера. Вот где проявляется низкая интерактивность – пользователи не получают немедленной обратной реакции и определенно чувствуют себя не так, как при работе с настольными приложениями.
Ajax по существу помещает технологию Java. Script и объект XMLHttp. Request между вашей Web- формой и сервером. Когда пользователи заполняют формы, данные передаются в какой- то Java. Script- код, а не прямо на сервер. Вместо этого Java. Script- код собирает данные формы и передает запрос на сервер.
Пока это происходит, форма на экране пользователя не мелькает, не мигает, не исчезает и не блокируется. Другими словами, код Java. Script передает запрос в фоновом режиме; пользователь даже не замечает, что происходит запрос на сервер. Более того, запрос передается асинхронно, а это означает, что ваш Java. Script- код (и пользователь) не ожидают ответа сервера. То есть, пользователи могут продолжать вводить данные, прокручивать страницу и работать с приложением.
Затем сервер передает данные обратно в ваш Java. Script- код (все еще находящийся в вашей Web- форме), который решает, что делать с данными. Он может обновить поля формы "на лету", придавая свойство немедленности вашему приложению – пользователи получают новые данные без подтверждения или обновления их форм.
Java. Script- код может даже получить данные, выполнить какие- либо вычисления и передать еще один запрос, и все это без вмешательства пользователя! В этом заключается мощь XMLHttp. Request. Он может общаться с сервером по своему желанию, а пользователь даже не догадывается о том, что происходит на самом деле.
В результате мы получаем динамичность, чувствительность, высокую интерактивность настольного приложения вместе со всеми возможностями интернет. Добавление Java. Script- кода.
После того, как вы разберетесь с XMLHttp. Request, оставшийся Java. Script- код превращается в рутинную работу. Фактически, вы будете использовать Java.
Script- код для небольшого числа основных задач: Получить данные формы: Java. Script- код упрощает извлечение данных из вашей HTML- формы и передает их на сервер. Изменить значения в форме: Форма обновляется тоже легко, от установки значений полей до замены изображений "на лету". Выполнить анализ HTML и XML: Вы будете использовать Java.
Script- код для управления DOM (см. HTML- формы и всеми XML- данными, возвращаемыми сервером. Для выполнения первых двух задач вы должны очень хорошо знать метод get. Element. By. Id(), приведенный в листинге 2. Листинг 2. Сбор и установка значений полей при помощи Java. Script- кода// Получить значение поля "phone" и записать его в переменную phone. Element. By. Id("phone").
Установить значения в форме, используя массив response. Element. By. Id("order"). Element. By. Id("address"). Здесь нет ничего такого уж выдающегося, и это здорово! Вы должны начать понимать, что нет ничего чрезмерно сложного во всем этом.
Как только вы освоите XMLHttp. Request, оставшаяся часть вашего Ajax- приложения будет простым Java. Script- кодом, похожим на приведенный в листинге 2, смешанным с немного более умным HTML. К тому же, время от времени есть немного работы с DOM..
Итак, давайте рассмотрим это. Завершение с DOMИ последнее, хотя и не менее важное, - это DOM, Document Object Model (объектная модель документа). Для некоторых из вас слухи о DOM могут быть немного пугающими – она не часто используется HTML- дизайнерами и даже немного не свойственна кодировщикам на Java. Script (пока вы действительно не решаете каких- либо программных задач высокого уровня). Вы можете найти широкое применение DOM в тяжеловесных программах, написанных на языках Java и C/C++; фактически, это и принесло DOM репутацию сложной и трудной для изучения. К счастью, использование DOM в технологии Java. Script является делом легким и в основном интуитивным.
Сейчас мне, наверное, надо было бы рассказать вам, как использовать DOM или хотя бы привести пару примеров кода, но даже это сбило бы вас с верного пути. Дело в том, что вы можете продвинуться довольно далеко в изучении Ajax без необходимости примешивать сюда DOM, и это именно тот путь, который я хочу вам показать. Я вернусь к DOM в следующей статье, но сейчас просто знайте, что она где- то здесь. Когда вы начнете передавать XML- данные вперед и назад между вашим Java.
Script- кодом и реальными изменениями HTML- формы, вы углубитесь в DOM. А пока можно эффективно работать с Ajax без DOM, так что пока отложим ее до поры до времени. В начало. Получение объекта Request. Вооруженные этим общим обзором, вы готовы к более пристальному изучению. Поскольку XMLHttp.