Написание AJAX запросов с помощью jQuery

Работа с запросами AJAX на " чистом" JavaScript имеет несколько существенных недостатков:

ü код даже самого простого AJAX запроса получается достаточно громоздким и сложным для понимания без специального ознакомления;

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

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

Синтаксис запроса, написанного с использование jQuery, следующий:

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

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

– данные (необязательный параметр) – это данные, передаваемые вместе с запросом.

– функция (необязательный параметр) – это функция, вызываемая после выполнения запроса.

Например, нам требуется переслать значения переменных x и y в скрипт test.php, после чего вернуть результат сложения и отобразить его в блоке с идентификатором #par1.

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

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

Метод.ajaxSend()

Метод.ajaxSend() запускает обработчик Ajax события, когда Ajax-запрос готов к отправке (это происходит в момент перед самой отправкой):

Метод.ajaxSend() подключает функцию обратного вызова ко всем элементам набора jQuery. Возвращаемым значением является набор jQuery.

Рассмотрим параметры метода.ajaxSend():

o handler( [event, XHR, ajaxOptions] ) – функция - обработчик Ajax события готовности запроса к отправке (ajaxSend), которое возникает, когда объект создан и запрос готов к отправке. Методу передаются три параметра:

o event- экземпляр объекта JavaScript, свойство type которого имеет значение 'ajaxSend' (название типа произошедшего Ajax события), а свойство target ссылается на текущий DOM элемент;

o XHR - экземпляр объекта XMLHttpRequest;

o ajaxOptions - объект со свойствами - параметрами запроса, которые были использованы функцией $.ajax().

Примечание. Обработчики события ajaxSend всегда вызываются перед отправкой на сервер любого запроса Ajax, независимо от того, какой это был запрос. Различие между параметрами достигается путем изменения значений event, XHR и ajaxOptions, переданных обработчику.

Хотя событие ajaxSend наступает перед отправкой запроса на сервер, отменить отправку запроса в этот момент нельзя.

Метод ajaxComplete()

Метод ajaxComplete выполнит переданный код после выполнения AJAX-запроса, независимо от того, выполнится запрос с ошибкой или нет.

Методы ajaxSuccess и ajaxError

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

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

Пример создания всплывающих подсказок с использованием технологии AJAX

В практической web-разработке одной из самых распространенных задач является задача по организации системы подсказок на сайте. Система подсказок представляет собой аналог живого поиска, разработанного компанией Google.

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

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

1) создадим экземпляр объекта XMLHttpRequest();

2) отправим запрос с введенным пользователем словом или символом методом GET;

3) выведем результат запроса в блок с идентификатором #res. До тех пор, пока пользователь не начал вводить символы, мы не видим блок с идентификатором #res.

Хотя создание кода с использованием языка php не является предметом изучения в данном разделе, приведем текст файла suggest.php, в котором происходит выборка и обработка данных, отправляемых в формате json и отображаемых в блоке с идентификатором #res:

Библиотека Prototype

Одной из наиболее известных и самых используемых Ajax-библиотек является Prototype. Библиотека Prototype – это независимый проект группы разработчиков с изначально открытым исходным кодом. Библиотека очень быстро подгружается, формируя ядро для построения других библиотек, например, script.aculo.us и Rico.

Prototype — это набор объектов, которые помогают преодолеть некоторые трудности доступа и работы с элементами страницы в различных браузерах. Библиотека Prototype была создана и до сих пор поддерживается Сэмом Стефенсоном (Sam Stephenson), последнюю версию (на момент написания учебного пособия) можно скачать с http: //prototypejs.org. На сайте также содержится документация по API библиотеки, а также статьи и учебные пособия по ее эффективному использованию.

Для того, чтобы начать работать с библиотекой Prototype, ее необходимо подключить к страницк уже знакомым нам способом, используя тег script:

Одной из основных особенностей Prototype является наличие нескольких схожих с языком Ruby функций и свойств. Ruby — простой в использовании язык, но в то же время сложный для восприятия, и использование библиотекой Prototype этих функций в JavaScript может вызвать путаницу, особенно если не знать специфических компонентов Prototype.

Ключевыми среди этих компонентов являются функции " доллар" и " доллар F". Функция $() (" доллар" ), выдает ссылку на элемент, имя которого передано в функцию:

Элемент идентифицируется с помощью атрибута id:

Это эквивалентно использованию вызова метода DOM:

Помимо возвращения элемента, функция $() также присоединяет несколько специфических свойств Prototype.

Функция $F() возвращает значение поля формы, заданного идентификатором:

Это эквивалентно следующему:

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

Другой ключевой компонент Prototype — это объект Enumerable, который добавляет интерактивные возможности для JavaScript.

Создание совокупностей данных, таких, как массивы, всегда было чем-то примитивным в JavaScript, по крайней мере, по сравнению с другими языками. Это также подверглось изменению в новых версиях JavaScript: скажем, в JavaScript 1.6 были добавлены forEach и filter, а в JavaScript 1.7 — итеративность. Однако до тех пор, пока подобные изменения не будут поддерживаться большинством браузеров, использование объекта Enumerable библиотеки Prototype сможет во многом их заменить.

Prototype также предоставляет объекты для управления запросами XMLHttpRequest. Они просты в использовании и упрощают код запроса к веб-сервисам. Основным объектом Ajax является объект со сходным названием Ajax, но большая часть работы выполняется объектом Ajax.Request.

Формирования запроса с помощью этого объекта выглядит следующим образом:

Первый параметр — это URL-адрес запроса к веб-сервису, а второй параметр состоит из объекта, в котором указан метод HTTP-запроса, параметров запроса и функции, вызываемой по окончании запроса.

Ответ запроса XMLHttpRequest заключен в Prototype; и вы не сможете перехватывать различные этапы запроса. Для того, чтобы обработать каждый этап, контролируются события onComplete, onLoading, onLoaded и onInteractive. Однако, для большинства приложений понадобится отслеживать только события onComplete и onSuccess, которые появляются в случае успешного выполнения запроса.

Prototype также предоставляет возможность эмулировать методы HTTP-запроса DELETE и PUT, используя для этого альтернативный POST —подход.

Библиотека также располагает возможностью автоматически анализировать возвращенные данные. Если данные представлены в формате HTML, метод Ajax.Updater может обработать ответ и вставить данные в указанный элемент. Если данные помечены как JSON, Prototype может автоматически их проанализировать и передать как объект в функцию обратного вызова.

Подведем итоги:

В данном разделе мы рассмотрели способы добавления уровня поведений на web-страницу. Узнали синтаксис и основные конструкции языка программирования на стороне браузера JavaScript, ознакомились с объектами языка, свойствами и методами объктов и вариантами их использования для создания интерактивности на веб-странице.

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

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

 

Проверь себя:

1. Назовите способы ввода-вывода данных в JavaScript.

2. Какие операторы для организации циклов имеются в JavaScript?

3. Назовите объекты языка, перечислите из свойства и методы.

4. Что такое DOM?

5. В чем разница между CORE DOM, HTML DOM и XML DOM?

6. Сколько существует уровней DOM?

7. Сколько групп свойств и методов DOM выделяют разработчики?

8. Назовите самый популярный метод доступа к объекту DOM

9. Что такое узлы-элементы и текстовые узлы в DOM?

10. Является ли DOCTYPE объектом DOM?

11. Что такое AJAX?

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

13. Что такое XML?

14. Что такое JSON?

15. В чем отличие между форматами JSON и XML?

16. Назовите основные преимущества использования AJAX.

 

Задания для самостоятельной работы

JavaScript и DOM:

1. Ввести с экранадва числа, сложить их, результат вывести в окно документа.

2. Ввести с экрана значение градусов по Фаренгейту, перевести их в градусы по Цельсию по формуле:

⁰C=5/9(⁰F-32)

Оформить результат с помощью таблиц стилей.

3. Ввести с экрана значение градусов по Фаренгейту, перевести их в градусы по Цельсию по формуле:

⁰C=5/9(⁰F-32)

Указать в зависимости от получившегося значения, в каком состояии находится вода: лед, холодная вода, теплая вода, горячая вода, пар.

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

4. Укажите название месяца в зависимости от его номера в году.

5. Вывести в окно документа таблицу соответствия градусов по Цельсию градусам по Фаренгейту в пределах от -250 до 300 с шагом 10. Пример можно увидеть на рисунке 74. Можно также предусмотреть вариант, когда пределы и шаг вводится пользователем с экрана.

Замечание. Вспомните, что в операторе document.write внутри кавычек можно указывать теги HTML.

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

Замечание. Можно использовать операцию деления по модулю (%).

7. Введите с экрана число, например, 5. Выведите на экран пять строчек, в каждой строке по пять символов.

8. Введите с экрана число, например, 5. Выведите на экран пять строчек, в первой строке одна звездочка, во второй – две, и так далее. В последней - пять звездочек.

9. Введите с экрана число, например, 5. Выведите на экран пять строчек, в первой строке четыре пробела и одна звездочка, во второй – три пробела и две звездочки и т.д. В последней - пять звездочек.

10. Введите с экрана число, например, 5. Выведите на экран пять блоков, в первом блоке одна звездочка; во втором – одна, три; в третьем – одна, три, пять и т.д. (см. рис. 75).

11. Создать в одной функции часы в окне документа в 24-часовом формате, а также вывести текущую дату, указав название месяца на русском языке.

12. Определить, сколько дней осталось до нового учебного года.

13. Напишите код, подсчитывающий сумму элементов массива. Массив введите с экрана, запросив предварительно размерность этого массива. Сумма элементов массива должна вычисляться с помощью функции.

14. Написать функцию, возвращающую максимальное по модулю число в массиве. Если это число отрицательное, не потеряйте знак!

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

16. Доработайте слайд-шоу из примера со страницы 176, добавив кнопку play/stop, при нажатии на которую слайд-шоу либо останавливается, либо воспроизводится. Можно вместо одной кнопки можно создать две отдельные: play и stop.

17. Нарисуйте дерево DOM для следующего документа

<! DOCTYPE html>

< html>

< head>

< title> Главная Страница< /title>

< /head>

< body>

< p id=" id_p_1" > Нумерованный список< /p>

< ol>

< li> Пункт 1 < /li>

< /ol>

< p class=" p_1" > Параграф1< /p>

< p class=" p_2" > Параграф2< /p>

< p> Параграф1< /p>

< div id=" for_div1" > Измените этот текст! < /div>

< div id=" for_div2" > < em> Измените цвет текста! < /em> < /div>

< /body>

< /html>

a. Измените текст внутри блока for_div1.

b. Измените цвет текста внутри блока for_div2.

c. Измените текст и свойства параграфов p_1, p_2.

AJAX и jQuery:

Задание 1

Создайте четыре кнопки и напишите для них код, запрашивающий с помощью AJAX файлы winter.txt, summer.txt, autumn.txt, spring.txt с сервера и отображающий результат на странице.

Задание 2

Скрипт file1.php принимает три аргумента var1, var2, var3 (значения могут быть в диапазоне от 1 до 5). Создайте AJAX запрос для обращения к этому скрипту и подберите такие значения аргументов var1, var2 и var3, чтобы результат выполнения скрипта был равен 8.

Задание 3

Скрипт file2.php принимает три аргумента a, b, c (значения могут быть в диапазоне от 5 до 10). Создайте AJAX запрос для обращения к этому скрипту и подберите такие значения аргументов a, b и c, чтобы результат выполнения скрипта был равен 130.

Задание 4

Запросите файл test.xml из скрипта, примите ответ с помощью responseXML и затем:

- выведите содержимое 3 и 4 тэга name на страницу;

- выведите содержимое 2 и 3 тэга surname на страницу;

- выведите содержимое 1 тэга dept на страницу;

- выведите содержимое всех тэгов surname, которые присутствуют в файле на страницу.

Задание 5

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

a. Создайте AJAX запросы, которые должны после нажатия на соответствующие кнопки обращаться к файлам autumn.txt, winter.txt, summer.txt, и spring.txt, и затем отображать результат запроса в абзац с id=par1.

b. После нажатия на кнопку с id=but5 элемент span c id=let1 должен содержать первую букву кодового слова, span c id=let2 вторую и т.д.

Задание 6*

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

 

⇐ Предыдущая27282930313233343536

Поделиться:

Популярное:

1. III. Задачи, решаемые организацией с помощью ИСУ и ИТУ.
2. VI. Выберите подчинительный союз, с помощью которого стиль и смысл высказывания передается точнее других.
3. VIII. Проделки с помощью прута и колокольчика
4. А. Сделайте свое лицо красивым с помощью массажа рта
5. Анализ данных с помощью команд Подбор параметра и Поиск решения
6. Анализ — это такой логический приём, с помощью которого мы мысленно расчленяем приметы, явления, выделяя отдельные их части, свойства.
7. Билет №35 .Вопрос 3 Создание защищенных сетей VPN с помощью IPSec
8. В нормальном мозге полушарие, которое ошиблось, обращается за помощью к другому.
9. Ввод формулы с помощью программы MS Equation.
10. Владимир Путин: «Нарастить туристический потенциал можно только с помощью комплексного подхода»
11. ВРЕД ОТ ПОВЫШЕННЫХ ЗАПРОСОВ. ДОВОЛЬСТВОВАТЬСЯ ТЕМ, ЧТО ИМЕЕМ.
12. Второй аспект проверки модели связан с установлением степени, в которой информация, получаемая с ее помощью, действительно помогает руководству совладать с проблемой.