В последней части серии, посвященной 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() получает два аргумента:
Метод $.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():
Полный список параметров приводится в документации 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
Источник: