HTML_AJAX в действии


Оглавление (нажмите, чтобы открыть):

Работа с Ajax в ASP.NET MVC

(или, если хотите, AJAX) — это сокращение для Asynchronous JavaScript and XML (Асинхронный JavaScript and XML). Часть, касающаяся XML, не настолько важна, как это было раньше, но вот асинхронность является именно той частью, которая делает технологию Ajax полезной. Это модель для запрашивания данных из сервера в фоновом режиме, не требующая перезагрузки веб-страницы. Инфраструктура ASP.NET MVC Framework содержит встроенную поддержку для ненавязчивого Ajax, которая означает что для определения средств Ajax необходимо использовать вспомогательные методы, а не добавлять блоки кода повсеместно в представлениях.

При создании и обработке запросов Ajax инфраструктура ASP.NET MVC Framework полагается на пакет . Мы продолжим пользоваться проектом HelperMethods, который создали ранее, и добавим в него этот пакет. Для установки выберите пункт меню Tools Library Package Managers Package Manager Console (Сервис Диспетчер библиотечных пакетов Консоль диспетчера пакетов), чтобы открыть окно командной строки NuGet. Введите следующие команды:

Средство NuGet установит указанный пакет в проект вместе с библиотекой jQuery, от которой он зависит, и создаст папку Scripts, содержащую несколько файлов JavaScript. Средство ненавязчивого Ajax в ASP.NET MVC Framework основано на библиотеке jQuery. Если вы знакомы с тем, каким образом jQuery обрабатывает Ajax, то очень быстро поймете возможности Ajax в ASP.NET MVC Framework. Подробности использования jQuery и Ajax описаны в статьях jQuery и Ajax и Использование Ajax.

Создание представления с синхронной формой

Мы начнем этот раздел с создания представления для действия GetPeople из контроллера People в виде файла /Views/People/GetPeople.cshtml. Содержимое этого файла приведено в примере ниже:

Это строго типизированное представление с типом модели IEnumerable . Мы выполняем перечисление объектов User в модели для создания строк HTML-таблицы и применяем вспомогательный метод Html.BeginForm() для создания простой формы, которая осуществляет обратную отправку сгенерировавшим ее действию и контроллеру.

Форма содержит вызов вспомогательного метода Html.DropDownList(), используемого для создания элемента , в котором присутствуют элементы для каждого значения, определенного в перечислении Role, а также для значения All. (Чтобы создать список значений для элементов , с помощью LINQ выполняется конкатенация значений перечисления с массивом, содержащим единственную строку All.)

Форма содержит кнопку, которая отправляет форму. В результате эту форму можно применять для фильтрации объектов User, определенных в контроллере People, который мы создали в предыдущей статье. Для проверки запустите приложение и перейдите на URL вида /People/GetPeople:

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

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

Подготовка проекта к использованию ненавязчивого Ajax

Средство ненавязчивого Ajax настраивается в двух местах приложения. В файле Web.config (расположенном в корневой папке проекта) элемент configuration/appSettings содержит запись для свойства UnobtrusiveJavaScriptEnabled, которое должно быть установлено в true, как показано в примере ниже. (Это свойство устанавливается в true по умолчанию, когда Visual Studio создает проект.)

В дополнение к проверке настроек в Web.config, понадобится добавить ссылки на JavaScript-библиотеки jQuery, которые реализуют функциональность ненавязчивого Ajax из пакета NuGet, установленного в начале этой статьи. Ссылаться на эти библиотеки можно из индивидуальных представлений, но более распространенный подход предусматривает добавление ссылок в файл компоновки, так что они будут влиять на все представления, использующие данную компоновку.

В примере ниже показано, как можно добавить ссылки на две JavaScript-библиотеки в файл /Views/Shared/_Layout.cshtml:

Файлы, на которые производится ссылка посредством элементов

Создание Ajax-приложения

Первым шагом надо создать XML-файл с данными. Назовем этот файл data.xml.

Теперь создадим простенькую Web-страничку, содержащую данные для примера. Это страница с JavaScript-ом, и пользователи будут запрашивать ее для того, чтобы увидеть технологию Ajax в действии. Назовем этот файл ajax.html.

Обратите внимание: для пользователей с отключенным JavaScript вставлена ссылка к файлу data.xml. Для пользователей с включенным JavaScript-ом будет вызвана функция ajaxRead.

Теперь напишем скрипт, который и будет получать данные из файла XML. Его надо будет вставить в нашу Web-страницу в области head.

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

У объекта XMLHTTPRequest есть состояние readyState=3, при котором ответ находится в процессе загрузки, и уже полученная часть может быть прочитана в responseText. У большинства браузеров(кроме IE, который изобрел свой объект XDomainRequest) состояние interactive можно использовать для передачи сообщений с сервера не закрывая соединение.

Для IE от версии 8 испольуйте XDomainRequest вместо new ActiveXObject(‘MSXML2.XMLHTTP’), но этот класс работает несколько иначе, чем XmlHTTPRequest.

Как выводить html с помощью AJAX

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

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

Инструкция по выводу контента через AJAX

1. Добавить в заголовочную директорию следующий скрипт:

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

2. Создайте html или php документ с кодом, который нужно выводить через AJAX . Например, создадим файл text-dlya-ajax.html и пропишем в нем:

3. Создайте отдельный файл JavaScript (.js). Обычно я его называю ajax.js , чтобы сразу понять его содержимое. Добавьте в него следующий код:

Теперь blockajax будет характеризоваться файлом text-dlya-ajax.html .

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

4. Подключите файл ajax.js к документу через заголовочный тег :

Важно, чтобы сначала подключалась библиотека jquery.min.js, а уже потом файл ajax.js. Иначе работать не будет. Должно быть так:

5. В месте где нужно вывести html-текст файла text-dlya-ajax.html напишите:

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

Вы можете скачать выше описанный пример по следующей ссылке: ajax.rar

Кстати, через AJAX также можно выводить и интерпретировать PHP-код. А это открывает огромные возможности перед Вами.

Зачем нужно выводить html с помощью AJAX (3 причины)
1. Если быть очень кратким, то это нужно для продвижения сайта в поисковых системах. Дело в том, что ссылки внутри сайта как бы передают вес между собой. Те страницы на кого ссылаются чаще, имеют больший вес. Поэтому чтобы более равномерно распределить вес сайта между страницами (а не сливать его весь по сквозным ссылкам) нужно как-то сделать так, чтобы эти сквозные ссылки не учитывались поисковыми машинами.

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

Конечно, можно закрыть все ссылки в метках в rel=»nofollow», однако исследования показали, что таким способом теряется вес на сайте, т.е. этот вес никому не передается, он как бы просто испаряется (звучит странно, но это так).

2. Второй причиной использования выводить html через AJAX является уменьшение кода на странице сайта. Опять таки это нужно для поисковых систем. Например, футер сайта постоянно дублирует один и тот же код, который только отнимает лишний вес со страницы, поэтому было бы хорошо этот код убрать, но футер оставить. Аякс идеально подходит для решения этой проблемы.

3. Страница с использованием AJAX грузится поблочно, то есть каждый элемент как бы грузиться синхронно и не зависит от других. Таким образом «тяжелые» элементы на сайте не будут тормозить загрузку других частей сайта. Это более удобно для пользователя, поскольку он видит, что сайт грузится и чувствует себя более спокойно, нежели когда загрузка сайта на чем-то застопорилась.

Освоение Ajax: Часть 1. Введение в Ajax

Освоение Ajax: эффективный подход к созданию Web-сайтов и знакомство с тем, как работает эта технология

Ajax, состоящий из HTML, технологии JavaScript™, DHTML и DOM, это замечательный подход, который помогает вам преобразовать тяжеловесные Web-интерфейсы в интерактивные Ajax-приложения. Автор, эксперт по Ajax, демонстрирует совместную работу этих технологий (от общего обзора до детального изучения), цель которой – сделать чрезвычайно эффективную Web-разработку повседневной реальностью. Он также раскрывает основные концепции Ajax, включая объект XMLHttpRequest.

Брэт Маклафлин, автор и редактор, O’Reilly Media Inc.

Брэт Маклафлин (Brett McLaughlin) работает с компьютерами со времен Logo (помните маленький треугольник?). За последние несколько лет он стал одним из наиболее известных авторов и программистов сообщества по технологиям Java и XML. Он работал в Nextel Communications над реализацией сложных корпоративных систем, в Lutris Technologies, фактически, над созданием сервера приложений, а с недавних пор работает в O’Reilly Media, Inc., где продолжает писать и редактировать книги по данной тематике. В готовящейся Брэтом вместе с популярными авторами Эриком и Бет Фриманами книге Быстрый штурм Ajax использован общепризнанный и передовой подход к Ajax по методу Head First. Его недавняя книга «Java 1.5 Tiger: Заметки разработчика», является первой доступной книгой по новейшей технологии Java, а его классическая «Java и XML» остается одной из наиболее авторитетных работ по использованию технологий XML в языке программирования Java.

  • Содержание

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

Однако, Ajax – это далеко не чья-то прихоть, а мощный подход к созданию Web-сайтов, который не так трудно изучить, как полностью новый язык.

Перед тем, как я погружусь в детали Ajax, давайте потратим пару минут на осмысление того, что же делает Ajax. Когда в наше время вы пишете приложение, у вас есть два основных варианта:

  • Настольные приложения
  • Web-приложения

Оба варианта знакомы; настольные приложения обычно поставляются на CD (или иногда загружаются с Web-сайта) и устанавливаются целиком на вашем компьютере. Они могут использовать Интернет для загрузки обновлений, но код, выполняющий эти приложения, размещен на вашем рабочем столе. Web-приложения (и это не удивительно) работают где-то на Web-сервере, а вы обращаетесь к этим приложениям через ваш Web-браузер.

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

С другой стороны, Web-приложения обычно самые свежие по времени и предоставляют возможности, которые вы никогда бы не смогли иметь на вашем компьютере (вспомните Amazon.com и eBay). Однако с могуществом Web приходит ожидание – ожидание ответа от сервера, ожидание обновления экрана, ожидание ответа на запрос и генерирования новой страницы.

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

Так чего же мы ждем? Начнем рассмотрение Ajax и способов превращения ваших неуклюжих Web-интерфейсов в чувствительные Ajax-приложения.

Старая технология, новые хитрости

Что касается Ajax, то реальность такова, что он охватывает много технологий – для его освоения необходимо углубиться в несколько различных технологий (вот почему я разобью на независимые части первые несколько статей из этой серии). Хорошей новостью является то, что вы, возможно, уже знаете достаточно о многих из этих технологий – большинство из этих индивидуальных технологий изучаются легко (определенно не так трудно, как язык программирования полностью, например Java или Ruby).

Определение Ajax

Между прочим, Ajax – это аббревиатура от Asynchronous JavaScript and XML (и DHTML, и т.д.). Фраза была придумана Джессе Джеймсом Гарретом из Adaptive Path (см. раздел Ресурсы) и, по словам Джессе, не предназначалась быть аббревиатурой.

Вот основные технологии, вовлеченные в Ajax-приложения:

  • HTML используется для создания Web-форм и указания полей для использования в вашем приложении.
  • JavaScript-код – это основной код, выполняющий Ajax-приложения и обеспечивающий взаимодействие с серверными приложениями.
  • DHTML, или Dynamic HTML, помогает динамически обновлять формы. Вы будете использовать div , span и другие динамические HTML-элементы для разметки вашего HTML.
  • DOM, Document Object Model (объектная модель документов), будет использоваться (через код JavaScript) для работы и со структурой вашего HTML, и (в некоторых случаях) с XML, полученным от сервера.

Рассмотрим все это по отдельности и разберемся в том, что делает каждая из этих технологий. Я исследую каждую из них в следующих статьях; сейчас просто познакомимся поближе с этими компонентами и технологиями. Чем больше вы знаете о них, тем легче перейти от бессистемных знаний к освоению каждой из них (и действительно улучшить процесс разработки Web-приложений).

Объект XMLHttpRequest

Первый объект, о котором вы хотите узнать, возможно, самый новый для вас; он называется XMLHttpRequest . Это объект JavaScript, и он создается так же просто, как показано в листинге 1.

Листинг 1. Создание нового объекта XMLHttpRequest

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

В нормальных Web-приложениях пользователи заполняют поля форм и нажимают кнопку Submit (подтвердить). Затем форма передается на сервер полностью, сервер обрабатывает сценарий (обычно PHP или Java, возможно, CGI-процесс или что-то в этом роде), а потом передает назад всю новую страницу. Эта страница может быть HTML-страницей с новой формой с некоторыми заполненными данными, либо страницей подтверждения, либо, возможно, страницей с какими-то выбранными вариантами, зависящими от введенных в оригинальную форму данных. Естественно, пока сценарий или программа на сервере не обработается и не возвратится новая форма, пользователи должны ждать. Их экраны очистятся и будут перерисовываться по мере поступления новых данных от сервера. Вот где проявляется низкая интерактивность – пользователи не получают немедленной обратной реакции и определенно чувствуют себя не так, как при работе с настольными приложениями.

Ajax по существу помещает технологию JavaScript и объект XMLHttpRequest между вашей Web-формой и сервером. Когда пользователи заполняют формы, данные передаются в какой-то JavaScript-код, а не прямо на сервер. Вместо этого JavaScript-код собирает данные формы и передает запрос на сервер. Пока это происходит, форма на экране пользователя не мелькает, не мигает, не исчезает и не блокируется. Другими словами, код JavaScript передает запрос в фоновом режиме; пользователь даже не замечает, что происходит запрос на сервер. Более того, запрос передается асинхронно, а это означает, что ваш JavaScript-код (и пользователь) не ожидают ответа сервера. То есть, пользователи могут продолжать вводить данные, прокручивать страницу и работать с приложением.

Затем сервер передает данные обратно в ваш JavaScript-код (все еще находящийся в вашей Web-форме), который решает, что делать с данными. Он может обновить поля формы «на лету», придавая свойство немедленности вашему приложению – пользователи получают новые данные без подтверждения или обновления их форм. JavaScript-код может даже получить данные, выполнить какие-либо вычисления и передать еще один запрос, и все это без вмешательства пользователя! В этом заключается мощь XMLHttpRequest . Он может общаться с сервером по своему желанию, а пользователь даже не догадывается о том, что происходит на самом деле. В результате мы получаем динамичность, чувствительность, высокую интерактивность настольного приложения вместе со всеми возможностями интернет.

Добавление JavaScript-кода

После того, как вы разберетесь с XMLHttpRequest , оставшийся JavaScript-код превращается в рутинную работу. Фактически, вы будете использовать JavaScript-код для небольшого числа основных задач:

  • Получить данные формы: JavaScript-код упрощает извлечение данных из вашей HTML-формы и передает их на сервер.
  • Изменить значения в форме: Форма обновляется тоже легко, от установки значений полей до замены изображений «на лету».
  • Выполнить анализ HTML и XML: Вы будете использовать JavaScript-код для управления DOM (см. следующий раздел) и для работы со структурой вашей HTML-формы и всеми XML-данными, возвращаемыми сервером.

Для выполнения первых двух задач вы должны очень хорошо знать метод getElementById() , приведенный в листинге 2.

Листинг 2. Сбор и установка значений полей при помощи JavaScript-кода

Здесь нет ничего такого уж выдающегося, и это здорово! Вы должны начать понимать, что нет ничего чрезмерно сложного во всем этом. Как только вы освоите XMLHttpRequest , оставшаяся часть вашего Ajax-приложения будет простым JavaScript-кодом, похожим на приведенный в листинге 2, смешанным с немного более умным HTML. К тому же, время от времени есть немного работы с DOM. Итак, давайте рассмотрим это.

Мастер Йода рекомендует:  Выборка по дате в WordPress обзор

Завершение с DOM

И последнее, хотя и не менее важное, — это DOM, Document Object Model (объектная модель документа). Для некоторых из вас слухи о DOM могут быть немного пугающими – она не часто используется HTML-дизайнерами и даже немного не свойственна кодировщикам на JavaScript (пока вы действительно не решаете каких-либо программных задач высокого уровня). Вы можете найти широкое применение DOM в тяжеловесных программах, написанных на языках Java и C/C++; фактически, это и принесло DOM репутацию сложной и трудной для изучения.

К счастью, использование DOM в технологии JavaScript является делом легким и в основном интуитивным. Сейчас мне, наверное, надо было бы рассказать вам, как использовать DOM или хотя бы привести пару примеров кода, но даже это сбило бы вас с верного пути. Дело в том, что вы можете продвинуться довольно далеко в изучении Ajax без необходимости примешивать сюда DOM, и это именно тот путь, который я хочу вам показать. Я вернусь к DOM в следующей статье, но сейчас просто знайте, что она где-то здесь. Когда вы начнете передавать XML-данные вперед и назад между вашим JavaScript-кодом и реальными изменениями HTML-формы, вы углубитесь в DOM. А пока можно эффективно работать с Ajax без DOM, так что пока отложим ее до поры до времени.

Получение объекта Request

Вооруженные этим общим обзором, вы готовы к более пристальному изучению. Поскольку XMLHttpRequest является центральным для Ajax-приложений (и, возможно, нов для многих из вас) я начну с него. Как вы видели в листинге 1, создать этот объект и использовать его должно быть просто, не правда ли? Подождите минуточку.

Помните те ужасные войны браузеров, происходившие несколько лет назад, и как ничто не работало одинаково в разных браузерах? Поверите вы или нет, но те войны продолжаются до сих пор, хотя и с намного меньшим масштабом. И, сюрприз: XMLHttpRequest – это одна из жертв этих войн. Поэтому вы должны выполнить несколько различных действий для обеспечения возможности работы XMLHttpRequest . Я покажу вам как это сделать шаг за шагом.

Работа с браузерами Microsoft

Браузер Microsoft Internet Explorer для обработки XML использует анализатор MSXML (ссылки на дополнительную информацию по MSXML вы можете найти в разделе Ресурсы). Поэтому, когда вы пишете Ajax-приложения, которые должны работать в Internet Explorer, необходимо создать объект особым способом.


Однако, это не так то и легко. На самом деле в ходу две различных версии MSXML. Версия MSXML зависит от версии технологии JavaScript, установленной в Internet Explorer, поэтому вам нужно написать код, подходящий для обеих версий. Взгляните на листинг 3, в котором приведен код для создания XMLHttpRequest в браузерах Microsoft.

Листинг 3. Создание объекта XMLHttpRequest в браузерах Microsoft

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

xmlHttp = new ActiveXObject(«Msxml2.XMLHTTP»);

xmlHttp = new ActiveXObject(«Microsoft.XMLHTTP»); .

В двух словах, этот код пытается создать объект, используя одну версию MSXML; если это не получится, создается объект для второй версии. Изящно, да? Если ничего не сработало, переменная xmlHttp устанавливается в false, для того чтобы указать вашему коду, что что-то не так. В этом случае вы, возможно, работаете с браузером не от Microsoft и должны использовать другой код для выполнения работы.

Работа с Mozilla и браузерами не от Microsoft

Если Internet Explorer не ваш браузер, либо вы пишете код для браузеров не от Microsoft, вам нужен другой код. Фактически, это простая строка, которую вы видели в листинге 1:

var xmlHttp = new XMLHttpRequest object; .

Эта намного более простая строка создает объект XMLHttpRequest в Mozilla, Firefox, Safari, Opera и в большой степени в каждом браузере не от Microsoft, поддерживающем Ajax в любой форме или разновидности.

Объединение

Мы хотим поддерживать все браузеры. Кто хочет писать приложение, работающее только в Internet Explorer, или приложение, работающее только во всех остальных браузерах? Еще хуже, хотите ли вы написать ваше приложение дважды? Конечно, нет! Итак, объединим поддержку для Internet Explorer и для остальных браузеров. В листинге 4 приведен код, делающий это.

Листинг 4. Создание объекта XMLHttpRequest для всех браузеров

Пока проигнорируйте комментарии и непонятные теги, типа @cc_on ; это специальные команды JavaScript-компилятора, которые мы рассмотрим детально в моей следующей статье, которая будет полностью посвящена XMLHttpRequest . Основу этого кода можно разделить на три шага:

  1. Создайте переменную xmlHttp для ссылки на объект XMLHttpRequest , который вы создадите.
  2. В блоке try создайте объект в браузерах Microsoft:
    • В блоке try создайте объект с использованием объекта Msxml2.XMLHTTP .
    • Если это не получится, В блоке try создайте объект с использованием объекта Microsoft.XMLHTTP .
  3. Если xmlHttp все еще не установлен, создайте объект для остальных браузеров.

В конце этого процесса xmlHttp должен ссылаться на корректный объект XMLHttpRequest , независимо от используемого пользователем браузера.

Пара слов о защите

Как насчет защиты? Современные браузеры предлагают пользователям возможность повысить уровень безопасности, отключить технологию JavaScript и запретить множество настроек в своих браузерах. В этих ситуациях ваш код, вероятно, не будет работать ни при каких обстоятельствах. Для таких ситуаций вы должны элегантно решить проблемы – есть, по крайней мере, одна статья об этом, а одну я напишу позднее (это, наверное, будет длинная серия, но не беспокойтесь – вы все освоите до окончания этой серии статей). Пока же вы пишете устойчивый, но не совершенный код, который отлично подходит для изучения Ajax. Вы вернетесь к более качественному коду позже.

Запрос/ответ в мире Ajax

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

Что мы пропустили? Как на самом деле использовать XMLHttpRequest . Поскольку это критический код, который вы будете использовать в некоторых формах в каждом вашем Ajax-приложении, рассмотрим коротко, как выглядит базовая модель запрос/ответ в Ajax.

Выполнение запроса

У вас есть ваш превосходный новый объект XMLHttpRequest ; приведем его в движение. Во-первых, нам понадобится JavaScript-метод, который ваша Web-страница может вызвать (например, когда пользователь вводит текст или выбирает вариант из меню). Затем, нужно следовать одной и той же основной схеме практически во всех ваших Ajax-приложениях:

  1. Получить какие-либо данные из Web-формы.
  2. Создать URL для подключения.
  3. Открыть соединение с сервером.
  4. Установить функцию для сервера, которая выполнится после его ответа.
  5. Передать запрос.

В листинге 5 приведен пример Ajax-метода, который выполняет именно эти операции и именно в этом порядке:

Листинг 5. Выполнить запрос с Ajax

Многое из этого не требует пояснений. Первая часть кода использует базовый JavaScript-код для сбора значений из нескольких полей формы. Затем код устанавливает PHP-сценарий в качестве URL для подключения. Обратите внимание, как указывать URL и как добавлять к нему city и state (из формы), используя простые GET-параметры.

Затем открывается соединение; это первое место, где вы опять увидели в действии XMLHttpRequest . Указывается метод соединения (GET) и URL. Последний параметр, когда установлен в true , запрашивает асинхронное соединение (то есть, делает это способом, сооветствующим названию Ajax). При использовании false код ждал бы выполнения запроса и не продолжал бы работу до получения ответа. При использовании true ваши пользователи могут работать с формой (и даже вызывать другие JavaScript-методы) пока сервер обрабатывает этот запрос в фоновом режиме.

Свойство onreadystatechange xmlHttp (вспоминайте, это ваш экземпляр объекта XMLHttpRequest ) позволяет вам информировать сервер о том, что следует делать после завершения работы (что может быть через пять минут или через пять часов). Поскольку код не собирается ждать сервер, вы должны дать серверу знать, что делать, так чтобы вы смогли среагировать. В данном случае будет инициирован конкретный метод (называемый updatePage() ) после завершения сервером обработки вашего запроса.

Наконец, вызывается send() со значением null . Поскольку вы добавили данные для передачи на сервер (city и state) в URL запроса, вам не надо передавать что-либо в запросе. Таким образом, передается ваш запрос, и сервер может делать то, что вы указали ему делать.

Если вы кроме этого ничего больше не делаете, обратите внимание на то, насколько все просто и понятно! В отличие от осознания вами асинхронной природы Ajax, все это действительно простые вещи. Вы оцените то, как это освобождает вас для концентрации внимания на крутых приложениях и интерфейсах, а не на сложном HTTP-коде запроса/ответа.

Код в листинге 5 очень прост. Данные являются простым текстом и могут быть включены как часть URL-запроса. GET посылает запрос вместо более сложного POST. Не добавляется XML, заголовки контента, не передаются данные в теле запроса – можно сказать, Ajax-утопия.

Не переживайте — ситуация станет более сложной по мере выпуска статей этой серии. Вы научитесь передавать POST-запросы, устанавливать заголовки запроса и типы содержимого, кодировать XML в вашем сообщении, добавлять защиту в ваш запрос – список довольно большой! Не беспокойтесь пока о сложных вещах; узнайте основы и вскоре вы освоите полный арсенал Ajax-средств.

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

Теперь вы должны разобраться с ответом сервера. Пока вы должны знать только два момента:

  • Не делать ничего, пока свойство xmlHttp.readyState не будет равно 4.
  • Сервер будет записывать свой ответ в свойстве xmlHttp.responseText .

Первый момент (состояния готовности) готовится стать основным объемом следующей статьи; вы узнаете о стадиях HTTP-запроса столько, сколько никогда даже и не хотели знать. Пока вы просто проверяйте на равенство определенному значению (4), и все будет работать (и вы будете знать, что искать в следующей статье). Второй момент (использование свойства xmlHttp.responseText для получения ответа от сервера) является простым. В листинге 6 приведен пример метода (который сервер может вызвать), основанного на значениях, переданных в листинге 5.

Листинг 6. Обработка ответа от сервера

Опять же, код не является трудным или сложным. Он ожидает, пока сервер не вызовет его с нужным состоянием готовности, и затем использует значение, которое сервер возвращает (в данном случае ZIP-код для введенного пользователем города и штата), для установки другого поля формы. В результате поле zipCode неожиданно появляется с ZIP-кодом, но пользователь ни разу не щелкнул по кнопке! Это поведение настольного приложения, о чем я говорил ранее. Оперативность, ощущение динамичности и т.д., а все с маленьким Ajax-кодом.

Наблюдательные читатели, возможно, заметят, что поле zipCode является обычным текстовым полем. После возврата сервером ZIP-кода и установки этого поля методом updatePage() в значение ZIP-кода города/штата пользователи могут переопределить это значение. Так сделано умышленно по двум причинам: сохранить этот пример простым и показать вам, что иногда нужно, чтобы пользователи имели возможность переопределить значения, возвращенные сервером. Помните об обоих моментах; они важны при хорошем дизайне пользовательского интерфейса.

Перехват в Web-формах

Что нам осталось? В сущности, не много. Вы имеете JavaScript-метод, собирающий введенную пользователем в форму информацию, передаете ее серверу, предоставляете еще один JavaScript-метод для обработки ответа и даже устанавливаете значение поля, когда этот ответ приходит. Все что осталось на самом деле – вызвать этот первый метод и запустить полный процесс. Вы могли бы, очевидно, добавить кнопку в вашу HTML-форму, но это же старый, добрый 2001 год, не так ли? Воспользуемся возможностями технологии JavaScript, как показано в листинге 7.

Листинг 7. Запуск Ajax-процесса

Если это выглядит как еще один кусок в рутинном, в некоторой степени, коде – вы правы, так и есть! Когда пользователь вводит новое значение для любого из полей city или state, запускается метод callServer() , и Ajax-функция начинается. Вам кажется, что вы начинаете понимать суть вещей? Отлично!

В заключение

В настоящий момент вы, возможно, не готовы взять и написать ваше первое Ajax-приложение, по крайней мере, пока не исследовали раздел Ресурсы. Однако, вы уже можете начать понимать основную идею о том, как работают такие приложения и что такое объект XMLHttpRequest . В готовящихся статьях вы изучите этот объект, а также то, как контролировать взаимодействие JavaScript-to-server и работать с HTML-формами, и даже разберетесь с DOM.

Пока же потратьте некоторое время на размышления о том, насколько мощными могут быть Ajax-приложения. Представьте себе Web-форму, которая реагирует не только тогда, когда вы нажимаете кнопку, но и когда вы вводите данные в поле, когда выбираете вариант из списка вариантов и даже когда перемещаете курсор по экрану. Подумайте о том, что на самом деле означает слово асинхронный. Подумайте о JavaScript-коде, выполняющемся и не ожидающем, пока сервер возвратит ответы на его запросы. С какими проблемами вы можете столкнуться? С какими вещами следует проявлять осторожность? И как дизайн ваших форм изменится, принимая во внимание этот новый подход в программировании?

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

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

Использование JavaScript в веб-приложениях становится все более важным из-за необходимости обеспечить максимальное удобство работы с интерфейсом для пользователя. К сожалению, работа с сырым JavaScript-кодом весьма затруднительна. Различные браузеры имеют свои возможности и ограничения, которые значительно усложняют написание кросс-браузерного JavaScript-кода (например, Internet Explorer использует уникальный механизм добавления событий к элементам). Навигация и манипулирование HTML DOM («объектная модель документа», Document Object Model. Это иерархия объектов, которые представляют собой все элементы страницы) также очень трудозатратны и сложны. Избежать всего вышеперечисленного можно, используя библиотеки JavaScript.

В настоящий момент существует много популярных библиотек JavaScript (в том числе jQuery, Prototype, MooTools и Dojo). Все они делают работу с JavaScript проще и помогают нормализовать его кросс-браузерную функциональность. Здесь в примерах мы будем использовать открытую библиотеку jQuery (http://jQuery.com).

jQuery был выпущен Джоном Резигом в 2006 году и стал одной из самых популярных библиотек JavaScript благодаря простому, но мощному механизму взаимодействия с HTML DOM. Впрочем, на самом деле jQuery обязан своей популярностью Microsoft, который добавил несколько функций к его кодовой базе, обеспечил официальную поддержку и включил в ASP.NET MVC как часть шаблона проектов по умолчанию.

В этом разделе мы рассмотрим основы работы с jQuery и то, как он может использоваться для отправки на сервер асинхронных вызовов, обрабатываемых ASP.NET MVC. Затем мы узнаем, как обеспечить работу нашего сайта в браузерах с выключенным JavaScript. Наконец, мы научимся использовать jQuery для отправки данных формы на сервер в фоновом режиме.

Основы jQuery

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

Следующую за $ строку jQuery будет рассматривать как CSS-селектор и попытается найти все элементы на данной странице, которые ему соответствуют. В данном случае, он найдет все теги

на странице. Аналогично, функция $(‘#foo’) найдет все элементы с идентификатором foo , а функция $(‘table.grid td’) найдет все теги

в таблицах класса grid .

Результатом вызова этой функции будет объект jQuery, который содержит коллекцию DOM-элементов, соответствующих селектору. Благодаря этому в jQuery поддерживаются цепочки вызовов, с помощью которых можно выполнять сложные операции с DOM-элементами в очень сжатой форме. В предыдущем примере вызывается метод AddClass , который добавляет указанный CSS-класс к каждому элементу данного объекта (в данном примере все теги

Аналогичным образом вы можете добавить события к элементам. Например, чтобы вывести сообщение после нажатия на кнопку, можно разместить JavaScript в событии onclick :

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

В этом примере показана страница, которая содержит код JavaScript. Он передает в jQuery инструкцию найти любой элемент с id myButton и запустить функцию при нажатии кнопки. В этом случае браузер просто выведет сообщение о том, что кнопка была нажата.

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

Аналогично тому, как мы добавляем события к элементам, мы можем добавить событие ready к целой странице. Оно запустится только тогда, когда сформируется иерархия DOM страницы – это самый первый момент, подходящий для безопасного взаимодействия с HTML-элементами. Таким образом, лучше всего, если события и другой jQuery-код будут содержаться в обработчике ready :

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

Хотя jQuery — это тема для целой книги, изложенные здесь основные понятия облегчат вам понимание следующих далее примеров. Чтобы получить более глубокие знания о jQuery, можно прочитать «jQuery в действии. Второе издание» Бера Бибо и Иегуды Каца, а также книги издательства Manning.

Создание Ajax-запросов с помощью jQuery

Чтобы продемонстрировать, как создавать Ajax-запросы с помощью jQuery, мы создадим новый проект ASP.NET MVC на базовом шаблоне Internet Application . Добавим в него простой контроллер с двумя действиями, оба из которых будут демонстрировать представление — Index и PrivacyPolicy .

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

Рисунок 7-1: При нажатии на ссылку будет загружена информация о политике конфиденциальности

Код этого контроллера показан в следующем листинге.

Листинг 7-1: Простой контроллер

Строка 9: Возвращает частичное представление

Обратите внимание, что мы возвращаем частичное представление из действия PrivacyPolicy (строка 9), которое не включает в себя макет сайта. Это гарантирует, что дополнительные элементы (например, меню) макета страницы не включены в разметку, которую возвращает наше действие.

Частичное представление PrivacyPolicy содержит некоторые элементы базовой разметки:

Содержание представления Index показано в следующем листинге.

Листинг 7-2: Представление Index со ссылками на скрипты

Строка 1: Тег раздела head

Строки 2-4: Ссылка на код

Строка 7: Ссылка на действие

Строка 8: Контейнер для результатов

Начнем с определения секции head (строка 1). Во все новые проекты MVC автоматически включается последняя версия jQuery. Для этого используется NuGet, который также позволяет очень просто обновлять jQuery. На момент написания данной книги последней версией был jQuery 1.7.2, и соответствующие скрипты находятся в подкаталоге Scripts . Мы включаем в ссылку вызов Url.Content , а не создаем абсолютный маршрут. Это позволит избежать ошибок во время исполнения, независимо от того, запущена ли страница из коневого каталога сайта или из подкаталога.

Далее следует скриптовая ссылка, указывающая на JavaScript-файл под названием AjaxDemo.js , который мы еще не создали. Этот файл будет содержать пользовательский код jQuery.

Далее мы создаем стандартную в ASP.NET MVC ссылку на действие (строка 7). В ней указываем следующие параметры: текст гиперссылки, собственно действие, к которому мы ее привязываем (в данном случае действие PrivacyPolicy ), любые дополнительные параметры маршрута (в данном случае их нет, поэтому указываем null ), и анонимный тип, определяющий дополнительные HTML-атрибуты (в данном случае мы просто назначаем ссылке ID ).

В конце мы создаем div с id равным «privacy» , в который будет загружена информация о политике конфиденциальности после запроса Ajax.

Мастер Йода рекомендует:  Какие методологии разработки применяются в различных IT-компаниях — Tproger собирает рассказы

Теперь мы создадим файл AjaxDemo.js в каталоге Scripts . В этот файл добавим код jQuery для перехвата нажатия по ссылке privacyLink , что показано в следующем листинге.

Листинг 7-3: Код jQuery в файле AjaxDemo.js

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

Обработчик click принимает ссылку на событие как параметр. Здесь мы вызываем метод preventDefault , чтобы предотвратить выполнение сценария по умолчанию для этой ссылки (то есть, переход на страницу, указанную в атрибуте href ). Вместо этого мы извлекаем значение атрибута href и сохраняем его в переменной url .

Последняя строка обработчика содержит собственно запрос Ajax. Эта строка содержит инструкцию для jQuery найти на странице элемент с id privacy (т. е. тег


Теперь, когда вы запустите приложение и нажмите на ссылку, вы увидите, что содержимое Privacy policy загружается на страницу. Если вы используете браузер Firefox с установленным расширением Firebug (http://getfirebug.com), вы можете проследить отправку запроса Ajax, как показано на рисунке 7.1.

Это пример ненавязчивого JavaScript — весь код содержится не на странице, а в отдельном файле.

Прогрессивное улучшение

Предыдущий пример также иллюстрирует такой принцип, как прогрессивное улучшение (progressive enhancement). Прогрессивное улучшение предполагает, что мы начинаем с базовой функциональности (в данном случае простая гиперссылка), а затем добавляем дополнительные функции (с помощью Ajax). Таким образом, если пользователь выключит JavaScript в браузере, дополнительная функциональность будет урезана, и нажатие по ссылке отправит пользователя на страницу Privacy policy без использования Ajax, как показано на рисунке 7.2.

Рисунок 7-2: Браузер переходит на страницу Privacy Policy, если Javascript отключен.

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

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

Листинг 7-4: Использование метода IsAjaxRequest для изменения действия

Строка 3: Проверяет, был ли отправлен Ajax запрос

Теперь действие PrivacyPolicy проверяет, был ли отправлен запрос Ajax, вызывая метод расширения IsAjaxRequest в свойстве контроллера Request . Если метод возвращает результат true , то действие было вызвано запросом Ajax, в этом случае мы выводим частичное представление; если запроса Ajax к странице не было, он возвращает обычное представление.

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

Рисунок 7-3: Отображение страницы Privacy policy полностью в браузере с отключенным JavaScript

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

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

Рисунок 7-4: Форма отправлена посредством Ajax, и результат добавлен к списку.

Для начала добавим список комментариев в контроллер в статическом поле. Когда поступит запрос к действию Index , этот список будет передан в представление. Мы также добавим действие AddComment , которое позволит пользователю добавить комментарий. Расширенный контроллер показан в листинге 7.5.

Листинг 7-5: Действие AddComment

Строка 3: Содержит список комментариев

Строка 6: Отправляет комментарии в представление

Строка 9: Принимает комментарий как параметр

Строка 11: Сохраняет новый комментарий

Строка 14: Отправляет комментарий в представление

Строка 17: Переадресовывает к действию Index

Сначала добавим в наш контроллер список строковых данных, который будет содержать комментарии. Эти комментарии передаются в представление Index как модель. Мы также создаем новое действие AddComment , которое принимает комментарий в качестве параметра. Атрибут HttpPost здесь гарантирует, что это действие может быть вызвано только как результат отправки формы.

Действие AddComment добавляет комментарий к списку и затем, если оно было вызвано запросом Ajax, передает его в ViewBag и возвращает частичное представление. Если у пользователя отключен JavaScript, AddComment переадресовывает к действию Index , в результате чего страница полностью обновляется.

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

Частичное представление, возвращаемое действием AddComment , отображает комментарий в списке:

Далее мы изменим представление Index так, чтобы отображать текущий список комментариев. Также добавим форму добавления новых комментариев. Измененное представление приведено ниже.

Листинг 7-6: Представление Index с формой добавления комментариев

Строка 1: Определяет строгий тип представления

Строки 8-12: Создает список комментариев

Строки 13-17: Создает форму добавления комментария

Модифицированное представление Index начинается с указания, что оно строго типизировано IEnumerable , который соответствует списку комментариев, переданных от контроллера в представление. Далее следует ссылка на файл AjaxDemo c jQuery-кодом.

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

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

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

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

Листинг 7-7: Отправка формы с помощью Ajax

Строка 2: Добавляет обработчик событий

Строка 4: Сериализует данные в строку

Строка 6: Отправляет данные на сервер

Строка 7: Добавляет результат в список комментариев

Как и в примере со ссылкой, мы сначала добавляем функцию $(document).ready , которая будет вызвана после загрузки DOM. Внутри этой функции мы сообщаем jQuery найти форму с идентификатором commentForm и добавить к ней обработчик для события отправки формы. Далее мы снова вызываем event.preventDefault , чтобы не отправлять форму. Вместо этого мы сериализуем содержимое формы в строку, вызывая метод serialize к элементу формы. Эта строка содержит закодированные в URL пары ключ-значение, представляющие поля внутри формы. В этом случае, если мы ввели текст hello world в поле для комментариев, преобразованные данные будут представлены значением «Comment=hello+world» .

Когда содержимое формы представлено в виде строки, оно может быть отправлено с помощью Ajax. Чтобы увидеть, куда мы должны отправить данные, получим результат атрибут action формы и сохраним его в переменной url . Далее мы используем метод jQuery post для отправки этих данных к серверу. Метод post принимает несколько аргументов: URL, по которому должны быть размещены данные, сами данные и функция обратного вызова, которая будет запущена при получении ответа сервера.

В этом случае ответ сервера будет содержать частичное представление AddComment , содержащее комментарий в виде элемента списка. Мы добавляем его в конец списка комментариев с помощью метода JQuery append .

Теперь, когда вы откроете страницу и добавите комментарий, вы сможете проследить отправку запроса Ajax в Firebug и добавление результата к списку, как показано на рисунке 7.4.

JavaScript и ключевое слово this

Так как в JavaScript функции используются как объекты, не всегда очевидно, на что указывает ключевое слово this , то есть оно является контекстно-зависимым. В листинге 7.7 this является ссылкой внутри обработчика события, следовательно, оно указывает на элемент, где произошло событие (в данном случае, форма).

Технология AJAX, примеры скриптов

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

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

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

  1. Технология AJAX пример №1 — наипростейший пример, для ознакомления с азами AJAX.
  2. Технология AJAX пример №2 — отправка данных на сервер средствами AJAX.
  3. Технология AJAX пример №3 — отправка структуры данных с сервера в виде XML и работа с ними на стороне клиента.

Совместив все эти AJAX примеры воедино, мы получим реализацию обмена данными по AJAX технологии с форматом XML.

Давайте приступим к большой и трудоемкой работе. Но сначала ознакомьтесь с небольшим введением.

За интерактивностью будущее!

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

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

Концепция технологии AJAX

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

Под асинхронностью в программировании я понимаю процесс выполнения второстепенного действия, не прекращая основное.

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

Итак, концепция такова: между браузером и сервером не переставая происходит обмен данными, которые:

  1. Вводятся в браузер средствами пользовательского интерфейса;
  2. Отправляются на сервер;
  3. Обрабатываются на сервере, возможно, заносятся в БД;
  4. В это время браузер ожидает возвращение ответа;
  5. Пока браузер ждет, он не прекращает работу пользователя;
  6. Дождавшись данных от сервера в определенном формате, обрабатывает их и выводит в контент HTML страницы.

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

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

  1. XML(eXtensible Markup Language) — расширяемый язык разметки;
  2. JSON(JavaScript Object Notation) —текстовый формат основанный на JavaScript.

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

Технология AJAX расшифровывается как (Asynchronous JavaScript and XML), из этого можно сделать вывод, что разработчики в первую очередь предполагают использование формата XML. Но на деле, как показывает практика все чаще используется формат JSON, в силу своего минимализма. Другими словами – работать с обоими форматами можно одинаково хорошо, но один и тот же набор данных, представленный в JSON и XML, в первом будет иметь меньший размер. Следовательно, если JSON имеет меньший размер, то и передаваться он будет быстрее, чем XML.

XML для AJAX

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

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

Во-вторых, синтаксис XML очень похож на всем нам известный HTML.

Вот пример HTML разметки:

Мы видим, что любой открытый тег имеет свой закрывающий эквивалент. Также некоторые из тегов имеют атрибуты. Тут я никому Америку не открыл, и все понимают, что этот HTML документ будет интерпретирован браузером, который вместо тегов применит соответствующие им стили для текста.

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

Пример структуры в формате XML

Такими произвольными тегами и атрибутами как в этом примере можно запросто описать карточку пользователя, системы.

Запомните! Вся работа приложения на основе технологии AJAX сводится к обмену сложными структурами данных между клиентом (браузер), и сервером (web сервер).

Замечание 1: Можно, но совершенно не обязательно писать парсер самостоятельно ведь разработчики PHP создали все необходимые универсальные функции («XML Parser Functions») для работы с XML форматом. Чтобы разобраться с ними нужно начать копать в сторону xml_parser_create().

Замечание 2: Технологией AJAX, тоже предусмотрен механизм отправки пользовательских данных.

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

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

AJAX пример №1 (Начало работы)

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

Исходный код HTML документа:

script type = «text/javascript» >
function startAjax ( url ) <
var request ;
if ( window. XMLHttpRequest ) <
request = new XMLHttpRequest ( ) ;
> else if ( window. ActiveXObject ) <
request = new ActiveXObject ( «Microsoft.XMLHTTP» ) ;
> else <
return ;
>

request. onreadystatechange = function ( ) <
switch ( request. readyState ) <
case 1 : print_console ( «
1: Подготовка к отправке. » ) ; break
case 2 : print_console ( «
2: Отправлен. » ) ; break
case 3 : print_console ( «
3: Идет обмен..» ) ; break
case 4 : <
if ( request. status == 200 ) <
print_console ( «
4: Обмен завершен.» ) ;
document. getElementById ( «printResult» ) . innerHTML = «» + request. responseText + «» ;
> else if ( request. status == 404 ) <
alert ( «Ошибка: запрашиваемый скрипт не найден!» ) ;
>
else alert ( «Ошибка: сервер вернул статус: » + request. status ) ;

break
>
>
>
request. open ( ‘GET’ , url , true ) ;
request. send ( » ) ;
>
function print_console ( text ) <
document. getElementById ( «console» ) . innerHTML += text ;
>
script >


В коде HTML страницы мы создаем функцию startAjax() на языке JavaScript, позволяющую реализовать задуманные действия с AJAX’ом. Кстати, о действиях, во-первых мы хотим увидеть, как отрабатывает php скрипт, находящийся на сервере. Во-вторых, как возвращенная им информация появляется на страничке, без перезагрузки. Для этого в коде мы предусмотрели ссылку, по нажатию на которую запустится процесс всей демонстрации, консоль вывода действий JavaScript скрипта, а также блок для вывода результата.

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

  • Создаем объект XMLHttpRequest позволяющий получать данные с сервера в фоновом режиме.
  • Если используется IE (Браузер — Internet Explorer) тогда вместо вышеупомянутого объекта XMLHttpRequest, создаем объект ActiveXObject, смысл у них единый, отличие только в индивидуальности для IE.
  • Обрабатываем все 4-ре статуса состояния запроса. Созданный запрос он же объект request, в процессе отправки\получения данных может принимать четыре состояния (1подготовка к отправке, 2отправлен, 3идет обмен, 4получен ответ.)
  • В случае 4-го статуса, при получении ответа от сервера, происходит проверка на тип ответа 200«OK» или 404«Not Found».
  • Событие request.open() — открывает соединение с сервером с указанием метода передачи данных, адресом запроса, и флагом асинхронности. Указав флаг как false, мы получим в результате обычную перезагрузку страницы.

Кликнув на ссылку, мы пронаблюдаем успешное выполнение простого AJAX запроса.

Разумеется, такое сообщение мы получим только после того как разместим на сервере, в той же папке, что и саму html страничку, скрипт handler_script.php:

Скрипт не мудрый, тем не менее, его содержимого достаточно для демонстрации.

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

AJAX пример №2 — отправка POST запроса на сервер

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

  • GET — передаёт пользовательских данные заданному ресурсу по URI.
  • POST — передаёт пользовательских данные заданному ресурсу по протоколу.
  • HEAD — аналогичен методу GET, за исключением того, что сервер ничего не посылает в информационной части ответа.
  • TRACE — возвращает всё, что было введено при запросе, включая HTTP-заголовки.
  • DELETE — Удаляет указанный ресурс.
  • PUT — загружает содержимого запроса на указанный в запросе URI.

Причем это относится не только к технологии AJAX, а в принципе ко всему протоколу HTTP. Самыми распространенными являются два типа GET и POST, как правило, они широко используемы в отправке данных на сервер посредствам HTML элемента form. Именно с этими типами запроса я и приведу примеры работы веб приложения на АЯКСЕ.

Для того чтобы с помощью АЯКС технологии отправить POST запрос, нужно использовать три метода объекта request:

  • open – открывает соединение с сервером с указанием метода передачи данных.
  • setRequestHeader — устанавливает заголовок запроса.
  • send — отправляет запрос.

Откройте код примера №1 и замените в нем строки:

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 в ASP.NET MVC

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

Однако у Microsoft, как это часто бывает, свой собственный подход, отличающийся от общепринятого.

В случае Web Forms работа с AJAX построена на основе специальных элементов управления и не составляет сложности в освоении. Но, в ASP.NET MVC помимо написания кода вручную, необходимо владеть целым рядом нюансов, без которых использование AJAX становится крайне сложным.

Если ASP.NET MVC для вас не первая веб технология, забудьте всё, что изучали ранее!

Дело в том, что стандартные методы подходы к реализации AJAX, которые прекрасно работают с тем же PHP, в ASP.NET MVC практически полностью теряют работоспособность.

У Microsoft свой подход!

Подготовка проекта

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

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

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

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

Реализация серверной части

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

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

В этом действии мы получаем данные поступившие в запросе и, если это запрос AJAX возвращаем специальное частичное представление, которое в данном случае имеет имя _AjaxTestPartial.

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

В представлении, в качестве примера просто выводим некоторый текст и данные переданные из контроллера.

Реализация клиентской части в виде формы

Для создания форм AJAX служит метод BeginForm хелпера Ajax.

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

  1. Действие контроллера, которое обрабатывает AJAX запрос;
  2. Имя контроллера, к которому направлен AJAX запрос;
  3. Параметры AJAX запроса. В данном случае id HTML тега, который необходимо обновить при получении данных с сервера.

Важно отметить, что метод BeginForm сам по себе создаёт только «каркас» формы в виде тега form с соответствующими атрибутами. Поэтому наполнение формы элементами управления и обеспечение соответствия их атрибута name параметрам запроса задача разработчика. Обратите внимание, что в приведённом примере внутри фигурных скобок находятся два тега input. Именно так осуществляется наполнение формы функциональными элементами.

Вот как результат работы метода BeginForm выглядит в HTML коде в браузере.

В данном примере при нажатии кнопки (submit)на сервер через AJAX будет отправлено содержимое текстового поля, а в теге p с >

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

Важно

Если на странице имеется несколько тегов с id, который указан в параметре UpdateTargetId, то при выполнении запроса будет обновлено содержимое только самого первого из них (ближайшего к началу HTML разметки).

Реализация клиентской части в виде ссылки

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

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

  1. Текст ссылки;
  2. Действие контроллера, которое обрабатывает AJAX запрос;
  3. Имя контроллера, к которому направлен AJAX запрос;
  4. Передаваемые данные
  5. Параметры AJAX запроса. В данном случае id HTML тега, который необходимо обновить при получении данных с сервера.

Так приведённая выше AJAX ссылка будет отображаться в HTML коде.

Соответственно, результат работы ссылки:

Другие способы реализации AJAX в ASP.NET MVC

Помимо вышеприведённых хелпер Ajax содержит и другие методы. А, именно:

  • RouteLink — аналог ActionLink, но ссылка создаётся не на действие контроллера, а на определённый маршрут;
  • BeginRouteForm – аналог BeginForm, но создаёт форму, которая направляет запросы не к действию контроллера, а по определённому маршруту;
  • GlobalizationScript – создаёт ссылку на скрипт с информацией о культуре;
  • JavaScriptStringEncode – кодирует строковые данные для использования в JavaScript;

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

Параметры AJAX запроса (AjaxOptions)


В ASP.NET MVC можно настроить процесс выполнения AJAX запроса при помощи параметров AjaxOptions.

Один из них UpdateTargetId уже был использован в приведённых примерах. Помимо него также существуют и другие параметры. Вот их полный список:

  • Confirm – настройка диалога подтверждения отправки запроса.
    По сути, это обычный диалог подтверждения отображаемы JavaScript функцией Confirm. В качестве текста диалога используется значение параметра. Если параметр не задан (по умолчанию, запрос отправляется без подтверждения;
  • HttpMethod – задаёт метод отправки запроса (GET или POST). Для ссылки по умолчанию GET. Для формы – POST;
  • InsertionMode – задаёт режим отображения результатов запроса на странице. Может принимать одно из трёх значений перечисления InsertionMode:
    • Replace – замена уже имеющегося содержимого результатами запроса (по умолчанию);
    • InsertAfter – результаты запроса добавляются после уже имеющегося содержимого;
    • InsertBefore – результаты запроса добавляются перед уже имеющимся содержимым.
  • LoadingElementId – задаёт элемент страницы (по id), который будет отображаться во время выполнения запроса. Обычно, какая-либо анимация;
  • LoadingElementDuration – задаёт интервал времени (в миллисекундах) через который будет показан элемент, заданный в LoadingElementId.
  • OnBegin – задаёт имя функции (JavaScript) обратного вызова перед отправкой запроса. Соответствует beforeSend в jQuery;
  • OnComplete – задаёт имя функции (JavaScript) обратного вызова после выполнения запроса (успешного и неудачного). Соответствует complete в jQuery
  • OnFailure – задаёт имя функции (JavaScript) обратного вызова при неудачном выполнении запроса. Соответствует error в jQuery
  • OnSuccess – задаёт имя функции (JavaScript) обратного вызова при успешном выполнении запроса. Соответствует success в jQuery;
  • UpdateTargetId – задаёт id HTML тега, который необходимо обновить при получении данных с сервера;
  • Url – задаёт адрес Url сервера, на который отправляется запрос. Если это свойство задано, можно не указывать имя контроллера и название его действия.

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

Например, используя OnSuccess вместо UpdateTargetId можно добиться от метода BeginForm поведения аналогичного функции jQuery post. Что позволяет при необходимости выполнить дополнительную обработку данных перед их отображением на странице.

Заключение

На самом деле использование реализованного в ASP.NET MVC механизма работы с AJAX не представляет особой сложности.

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

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

Единственная сложность, с которой может столкнуться новичок, это особенности, обусловленные самой платформой (тот же хелпер Ajax, частичные представления и т.д.). Но, потратив немного времени на освоение, можно её преодолеть.

FPublisher

Web-технологии: База знаний

AJAX в действии. Пример использрвания AJAX

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

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

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

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

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

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

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

AJAX — это коллекция технологий, существующих с момента появления Web. А вот и возможности, предоставляемые AJAX (как это представил Джис Джеймс Гаррет (Jesse James Garrett), он первым ввел термин ‘AJAX’ для асинхронного JavaScript + XML):

  • Стандартно-базированная презентация с использованием XHTML и CSS;
  • Динамическое отображение и взаимодействие с использованием объектной модели документа;
  • Взаимообмен данными и манипуляция с задействованием XML и XSLT;
  • Асинхронное извлечение данных с использованием XMLHttpRequest;
  • JavaScript, связывающий все вместе.

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

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

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

    В основе технологии AJAX лежит объект XMLHttpRequest. Изначально он появился в Internet Explorer, а затем — в Mozilla/Safari. На момент написания этой статьи уже была поставлена 8-я совместимая версия Opera. Однако, Opera в свое время отличилась нестабильностью с точки зрения реализации XMLHttpRequest.

    Вызов AJAX

    Асинхронная загрузка данных

    Обработка данных

    Вышеупомянутый метод processResponse активизируется как callback. Он извлекает вывод объекта XMLHttpRequest, проводит синтаксический анализ и присваивает вывод объектам страницы.
    HttpRequester.readyState является индикатором завершенности кода URL. Он может принимать следующие значения:

  • 0 = неинициализированный
  • 1 = загрузка
  • 2 = загруженный
  • 3 = интерактивный
  • 4 = завершенный (в нашем примере внимание фокусируется на этом состоянии.)

    Обратите внимание на то, что здесь доступ к ответу рассматривается как доступ к текстовому содержимому. XMLHttpRequest может без затруднений извлекать содержимое как в XML-формате, так и в не XML-формате. Если необходимо извлечь содержимое XML, то строка прочтёт responseXML и вы сможете получить доступ к нему как к объекту XML DOM. Такое разнообразие текстовых форматов — приятная новость, поскольку XML может привести к чрезмерному уничтожению простых сценариев извлечения данных, подобно описанному выше.

    Повышаем устойчивость AJAX-приложения

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

  • Проверьте, чтобы ваше приложение работало в режиме без AJAX.
  • Проверьте код ответов из вызовов AJAX, перед обработкой результатов. API XMLHttpRequest поддерживает коды HTTP (200, 400, …) К ним можно получить доступ через свойство состояния (вместе со свойством statusText, которое удерживает сообщение, связанное с состоянием ответа:

    Ajax-запрос к серверу через jQuery

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

    Запрос html-данных с помощью функции Load

    Это самый простой ajax-запрос через jQuery с получением html-данных и их вставкой в dom-элемент с (содержимое элемента заменяется):

    Более продвинутый вариант использования load:

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

    Ajax-запросы функциями GET и POST

    Эти функции осуществляют отправку ajax запроса http-методами get и post. Приведу пару примеров их использования.

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

    Тип получаемых от сервера данных можно указать, добавив dataType (см.ниже) — по-умолчанию определяется автоматически.

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

    На самом деле, функции get и post являются сокращенными вариантами функции ajax, которую рассмотрю ниже.

    Получение json-данных с помощью getJSON

    getJSON — укороченный вариант ajax-запроса методом GET и получением данных в виде json. Способ удобен, например, для получения какого-то массива с данными и последующей работы с ним.

    На стороне сервера программа формирует массив и преобразовывает его в json-строку, например, так:

    Точно так же можно передать с сервера и объекты stdClass, преобразовав их в json-строку.

    Простой ajax-запрос через jQuery с помощью функции AJAX

    Теперь приведу пример простого get запроса функцией ajax и получением html-данных.

    Запрос к серверу происходит get-методом, т.к. параметр, отвечающий за тип запроса, type по-умолчанию равен GET.

    Более сложный пример ajax-запроса через jQuery

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

    Кнопка отправки данных:

    В приведенном примере при нажатии на кнопку button, сначала меняется состояние кнопки (текст на ней меняется на «Отправка. » и она становится не активной), что делается при помощи параметра beforeSend. Затем происходит отправка запроса с передачей нужных данных. После того, как получен ответ от сервера состояние кнопки возвращается в прежнее (текст меняется на «Отправить», становится активной). Ответ получается в виде json-данных.

    Коротко опишу параметры отправки ajax-запроса, которые чаще всего могут пригодиться:

    url Адрес отправки ajax-запроса
    type Способ отправки запроса GET или POST
    data Отправляемые серверу данные. Может быть строка с параметрами и их значениями в формате par1=val1&par2=val2&. объект jQuery, например, $(‘input[type=»text»]’) или другие данные.
    dataType Тип получаемых от сервера данных. Может быть html, json, text, script и xml.
    cache Кэширование браузером запроса (false — не кэшировать).
    async Асинхронное выполнение запроса, т.е. программа продолжает выполняться не дожидаясь ответа сервера. Если указать false, то запрос будет выполнен синхронно, при этом страница не будет ни на что реагировать, пока не будет получен ответ от сервера.
    processData Преобразование отправляемых данных в url-формат. Если нужно чтобы данные не преобразовывались, установить в false. Например, при отправке изображения на сервер или xml-данных.
    contentType Тип передаваемых данных, по умолчанию «application/x-www-form-urlencoded; charset=UTF-8». Если указать false, то в заголовке не будет передаваться тип, что может быть необходимо, например, при отправке изображения на сервер.
    beforeSend Функция, выполняемая перед отправкой ajax-запроса.
    complete Функция, выполняемая после получения ответа от сервера (любого, успешного или нет).
    success Функция, выполняемая при удачном выполнении запроса.
    error Функция, выполняемая в случае ошибки.

    Ниже приведу еще несколько примеров использования ajax-запросов.

    Отправка формы со всеми данными ajax-запросом через jQuery

    Примерный код html-формы:

    Для того чтобы страница не перезагружалась при нажатии на кнопку «submit», сначала отменяем стандартые действия браузера использовав e.preventDefaults() .

    В параметре data мы передаем все поля формы использовав $(this).serialize() — эта функция преобразует все input-ы и select-ы в строку, пригодную для отправки на сервер.

    Так же, здесь использован параметр async: false , чтобы пока форма не отправится на сервер больше ничего нельзя было нажать или сделать.

    Отправка изображения или файла ajax-запросом через jQuery

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

    html-код будет такой:

    Суть идеи в том, что поверх кнопки выводится стандартный input для выбора файла, но он полностью прозрачен и имеет такие же размеры как кнопка. Таким образом, пользователь видит кнопку button, но когда наводит на нее курсор, фактически наводит на input. Соответственно, когда он нажимает на кнопку, на самом деле нажимается input выбора файла. Для того, чтобы не мигал курсор после выбора файла, размер шрифта задан 0px.

    Теперь javascript код отправки файла на сервер с отображением прогресса:

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

    Пример серверной части на php (по просьбе Евгения):

    Информация о загруженном изображении будет содержаться в $_FILES[‘upload’] , т.к. скриптом файл добавлялся так: form.append(‘upload’, files[0]); Соответственно, всё что требуется от php-программы — это проверить что файл соответствует ожидаемым параметрам, перенести файл в нужную папку (в примере в папку files) под нужным именем (в примере newname_image) и вернуть в браузер ответ, который в моем примере просто выводится пользователю командой alert(message);

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

    Мастер Йода рекомендует:  20 вопросов и ответов на знание базы данных SQLite
  • Добавить комментарий