AJAX с помощью jQuery. Руководство для начинающих. Часть 3
В последней части серии, посвященной AJAX, мы продолжаем знакомить читателя с методами и приемами сей актуальной технологии веб программирования.
Получаем данные в формате JSON с помощью метода $.getJSON()
Метод $.getJSON()
открывает простой путь к получению данных в формате JSON с сервера. Он эквивалентен вызову метода $.get()
с параметром формата данных "json"
. Синтаксис его вызова идентичен синтаксису метода $.get()
за исключением того, что вам не нужно указывать формат данных.
Например, наш пример с прогнозом погоды из предыдущих уроков серии можно изменить следующим образом:
$('#getForecast').click( function() { var data = { city: "Васюки", date: "20120318" }; $.getJSON( "getForecast.txt", data, success ); } );
Получаем и запускаем код JavaScript с помощью метода $.getScript()
Также как и метод $.getJSON()
, который является короткой записью вызова метода $.get()
для получения данных в формате JSON, метод $.getScript()
является короткой записью вызова метода $.get()
для получения и выполнения кода JavaScript, то есть аналогично использованию параметра формата данных "script"
. Метод $.getScript()
получает два аргумента:
- URL файла JavaScript для загрузки.
- Опциональную возвратную функцию, которая выполняется по завершению выполнения загруженного JavaScript кода.
Метод $.getScript()
используется для загрузки библиотек и плагинов JavaScript "на лету", то есть тогда, когда они нужны. Так можно уменьшить время начальной загрузки страницы, потому что не нужно включать в заголовок страницы каждую библиотеку JavaScript, которая может быть понадобится, а может быть и нет.
Для демонстрации работы метода $.getScript()
переместим код, который выводит прогноз в отдельный файл JavaScript showForecast.js
. Весь код будет размещен в функции showForecast()
:
function showForecast( forecastData ) { var forecast = forecastData.city + ". Прогноз погоды на " + forecastData.date; forecast += ": " + forecastData.forecast + ". Максимальная температура:" + forecastData.maxTemp + "C"; alert( forecast ); }
Также изменим страницу showForecast.html
для получения нашего кода JavaScript с помощью метода $.getScript()
:
<!doctype html> <html lang="ru"> <head> <title>Прогноз погоды</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $( function() { $.getScript( "showForecast.js", function() { $('#getForecast').click( function() { var data = { city: "Васюки", date: "20120318" }; $.get( "getForecast.txt", data, showForecast, "json" ); } ); } ); } ); </script> </head> <body> <button id="getForecast">Получить прогноз погоды</button> </body> </html>
Запускаем демонстрационный файл и наблюдаем результат работы кода JavaScript, который подгружается из другого файла по мере необходимости.
Код JavaScript в файле showForecast.html
начинается с вызова $.getScript()
для загрузки библиотеки showForecast.js
. Также создается анонимная возвратная функция, которая выполняется сразу после загрузки showForecast.js
. Данная функция добавляет обработчик события click
для кнопки #getForecast
, который вызывает метод $.get()
для получения файла getForecast.txt
и выполнения загруженной функции showForecast()
для вывода сообщения.
Метод $.getScript()
добавляет случайный параметр к строке запроса (например,?_=1330395371668
) для предотвращения кэширования браузером файла JavaScript.
Создаем обобщенный запрос AJAX с помощью $.ajax()
Высокоуровневые методы AJAX, которые мы рассмотрели ранее ($.get()
, $.post()
, load()
, $.getJSON()
и $.getScript())
открывают простой и легкий путь к использованию общих типов запросов AJAX в своих приложениях. Но иногда требуется более сильный контроль над запросом, или нужно решить задачу, которая недоступна высокоуровневым методам.
В такой ситуации нужно использовать низкоуровневый метод jQuery $.ajax()
. Вызов метода $.ajax()
делает AJAX запрос к указанному URL. Обобщенный синтаксис вызова следующий:
$.ajax( url [, параметры] );
Аргумент
url
является адресом URL к которому производится запрос, а параметры
является опциональным объектом, который содержит различные значения, которые определяют, как запрос будет выполняться.
Параметры, которые можно использовать с методом $.ajax()
:
Параметр | Описание | Значение по умолчанию |
---|---|---|
cache |
Устанавливаем значение true , чтобы разрешить кеширование ответа от сервера, или значение false, чтобы всегда производить запрос. Значение false также принуждает jQuery добавлять случайное число к запросу для предотвращения кеширования.. |
true (false , когда используется со значениями 'script' и 'jsonp' параметра dataType ) |
complete |
Задает возвратную функцию, которая выполняется по завершению запроса (независимо от успешности операции). | Нет |
data |
Данные, которые пересылаются на сервер в запросе. | Нет |
dataType |
Ожидаемый тип данных ответа. Дополнительно можно использовать значение "jsonp" для выполнения запроса JSONP. |
Автоматическое определение данных |
error |
Задает возвратную функцию, которая выполняется. если запрос завершился ошибкой. | Нет |
headers |
Дополнительный заголовок HTTP , который отправляется вместе с запросом в виде пар ключ/значение. | {} |
password |
Пароль, который используется, если сервер HTTP требует аутентификации. | Нет |
success |
Задает возвратную функцию, которая выполняется, если запрос завершается успешно. | Нет |
timeout |
Время ожидания (в миллисекундах) завершения запроса AJAX. Значение 0 означает, что jQuery будет ждать без ограничения во времени. | 0 |
type |
Тип запроса: "GET" или "POST" . |
"GET" |
username |
Имя пользователя, если сервер HTTP требует аутентификации. | Нет |
Полный список параметров приводится в документации jQuery.
Изменим наш пример для использования метода $.ajax()
. Мы можем для нашего прогноза отказаться от кеширования и будем обрабатывать ошибки. Вот модифицированный код страницы showForecast.html
:
<!doctype html> <html lang="ru"> <head> <title>Прогноз погоды</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $( function() { $('#getForecast').click( function() { var data = { city: "Васюки", date: "20120318" }; $.ajax( "getForecast.txt", { cache: false, data: data, dataType: "json", error: errorHandler, success: success } ); } ); function success( forecastData ) { var forecast = forecastData.city + ". Прогноз на " + forecastData.date; forecast += ": " + forecastData.forecast + ". Максимальная температура: " + forecastData.maxTemp + "C"; alert( forecast ); } function errorHandler() { alert( "Есть проблемы с получением прогноза. Наверно, Васюки смыло в море." ); } } ); </script> </head> <body> <button id="getForecast">Получить прогноз погоды</button> <div id="forecast"></div> </body> </html>
Запускаем код демонстрации и наслаждаемся результатом.
В данном примере мы используем метод $.ajax()
для генерации запроса AJAX. Мы передаем URL в запрос (getForecast.txt
) вместе со списком опций. Три из данных опций (data
, dataType
и success
) соответствуют аргументам, которые мы передаем в метод $.get()
. Остальные два (cache: false
и error: errorHandler
) отключают кеширование и устанавливают функцию обработки ошибок errorHandler().
Функция errorHandler()
просто выдает сообщение об ошибке пользователю.
Устанавливаем значения по умолчанию с помощью метода $.ajaxSetup()
Вместо того, чтобы каждый раз при формировании запроса AJAX задавать большое количество различных повторяющихся параметров, таких как success
, cache
and type
можно использовать метод $.ajaxSetup()
для установки значений по умолчанию. Все запросы AJAX jQuery будут использовать заданный установки, пока их не изменят.
Например, можно по умолчанию отключить кеширование для всех запросов AJAX:
$.ajaxSetup( { cache: false } );
Заключение
Наше введение в технологию AJAX завершилось. Мы представили основные средства для формирования и обработки запросов AJAX с помощью методов jQuery. Остается только наработать практический опыт их применения.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/leAz8ct6y60/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
Самый лучший человек тот, который живет преимущественно своими мыслями и чужими чувствами, самый худший сорт человека - который живет чужими мыслями и своими чувствами. Из различных сочетаний этих четырех основ, мотивов деятельности - все различие людей. Люди, живущие только своими чувствами, - это звери. Толстой Лев Николаевич - (1828-1910) - великий русский писатель. Его творчество оказало огромное влияние на мировую литературу |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.