Этот урок связан с проектом AJAX с помощью jQuery: Руководство для начинающих

AJAX с помощью jQuery. Руководство для начинающих. Часть 1

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

Разработка кода для JavaScript для реализации AJAX с нуля является весьма трудоемким и нудным процессом. Однако множество библиотек JavaScript, включая jQuery, имеют отличную высокоуровневую реализацию AJAX в виде набора методов и функций, которые облегчают и ускоряют построение веб сайтов.

В данной серии уроков мы рассмотрим основы построения запросов AJAX с помощью jQuery. Будут раскрыты следующие темы:

  • Что такое технология AJAX? Как она работает? В чем ее преимущества?
  • Как выполнить различные типы запросов AJAX с помощью jQuery?
  • Отправка данных на сервер с помощью запросов AJAX.
  • Обработка и выделение данных из ответов AJAX с сервера.
  • Как настроить обработку AJAX в jQuery и изменить установки по умолчанию?

Примечание: Уроки сконцентрированы на части JavaScript клиентской стороны. Но разработка серверной части также достаточно проста. Для более полной информации следует изучить материалы по языкам программирования серверной стороны, например PHP.

 

Что такое AJAX и чем он полезен?

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

  • Обычная веб страница содержит ссылки или формы, которые при нажатии или отправке создают запрос к новому адресу URL на веб сервере. Сервер отправляет полностью новую страницу HTML, которую затем выводит браузер, заменяя оригинальную страницу. Такой подход занимает много времени и плохо действует на посетителя, так как тому приходится ждать загрузки новой страницы.
  • При использовании технологии AJAX, JavaScript код делает запрос к URL на сервере. Код также может отправить данные вместе с запросом. Затем JavaScript код обрабатывает ответ сервера и действует соответствующим образом. Например, могут быть произведены вычисления с возвращаемыми данными, добавлен или обновлен виджет на странице, выдано сообщение посетителю об обновлении базы данных на сервере.

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

Фундаментальным моментом AJAX является объект JavaScript XMLHttpRequest. Он предоставляет ряд методов, таких как  open(), send() и onreadystatechange(), которые могут быть использованы при отправке запросов AJAX на сервер и обработке ответов в фоновом режиме.

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

Для тех кто более любопытен, слово AJAX является аббревиатурой из первых букв выражения на английском языке "Asynchronous JavaScript And XML" (Асинхронный JavaScript и XML). Однако, термин может ввести в заблуждение - запрос не обязательно должен быть асинхронным и необязательно использовать XML для отправки данных.

 

Делаем запрос GET с помощью $.get()

Метод jQuery $.get() предоставляет легкий и удобный способ сделать простой запрос AJAX. Он выполняет запрос с помощью метода HTTP GET (используется для получения URL, например страниц и изображений), вместо метода POST (который традиционно используется для отправки данных формы).

В простейшей форме можно вызвать метод так:

$.get( url );

...где url является адресом URL ресурса, от которого ожидается ответ. Обычно это скрипт на стороне сервера, который выполняет какие-нибудь действия и может возвращать некие данные:

$.get( "http://example.com/getForecast.php" );

...хотя можно также запросить статический документ:

$.get( "http://example.com/mypage.html" );

При запросе URL, вы можете отправить данные с запросом. Вы можете передать данные в строке запроса, так же как и при обычном запросе GET:

$.get( "http://example.com/getForecast.php?city=rome&date=20120318" );

Корректно будет сделать то же самое передав объект данных в качестве второго параметра методу $.get(). Объект данных должен содержать информацию в виде пар имя свойства/значение свойства. Например:

var data = { city: "rome", date: "20120318" };
$.get( "http://example.com/getForecast.php", data );

В качестве альтернативы вы можете передать данные методу $.get() как строку:

var data = "city=rome&date=20120318";
$.get( "http://example.com/getForecast.php", data );

 

Получаем данные с сервера

До сих пор мы рассматривали примеры использования $.get() только для отправки запросов на сервер, игнорируя любой ответ, который может сформировать скрипт на серверной стороне. Но в большинстве случаев ваш JavaScript код будет ожидать ответ от скрипта на серверной стороне и обрабатывать полученные данные.

AJAX запрос - асинхронный, что означет его выполнение в фоновом режиме, когда остальной код JavaScript продолжает действовать. Как же в таком случае получать ответ от сервера, когда завершится запрос?

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

function myCallback( returnedData ) {
  // Делаем обработку данных returnedData
}

 

Как только возвратная функция создана, вы можете передать ее в качестве третьего аргумента в метод $.get():

var data = { city: "rome", date: "20120318" };
$.get( "http://example.com/getForecast.php", data, myCallback );

 

Определяем тип данных ответа

Обычно, серверная сторона передает данные в одном из нескольких типовых форматов, включая XML, JSON, JavaScript, или HTML. По умолчанию jQuery пытается определить наиболее подходящий формат и разобрать данные соответствующим образом. Но лучше явно определить формат.

Для указания формата надо передать четвертый аргумент методу $.get(). Данный аргумент может быть строкой из следующего списка:

  • "xml"
  • "json"
  • "script"
  • "html"

Например, если вы знаете, что скрипт сервера возвращает данные в формате JSON, то вызываете метод $.get() следующим образом:

$.get( "http://example.com/getForecast.php", data, myCallback, "json" );

 

Пример использования метода $.get()

Здесь приводится пример создания запроса AJAX с помощью метода $.get() и простая обработка ответа. Для работы примера нужно на сервере создать простой текстовый файл с именем  getForecast.txt, содержащий следующий текст:

{
  "city": "Васюки",
  "date": "18 марта 2012",
  "forecast": "Зубодробительный холод и слякоть",
  "maxTemp": +1
}

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

Затем создаем страницу showForecast.html в той же папке что и getForecast.txt:

<!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" };
      $.get( "getForecast.txt", data, success, "json" );
    } );
 
    function success( forecastData ) {
      var forecast = forecastData.city + " прогноз на " + forecastData.date;
      forecast += ": " + forecastData.forecast + ". Максимальная температура: " + forecastData.maxTemp + "C";
      alert( forecast );
    }
 
  } );
 
</script>
 
</head>
 
<body>
 
<button id="getForecast">Получить прогноз погоды</button>
 
</body>
</html>

Открываем showForecast.html в браузере и нажимаем кнопку "Получить прогноз погоды". В окне сообщения получим прогноз погоды с нашего сервера.

Вот как работает данный код:

  1. showForecast.html содержит элемент button "Получить прогноз погоды" с ID getForecast.
  2. JavaScript вверху страницы выполняется как только страница будет загружена и DOM окажется в состоянии готовности.
  3. Код JavaScript сначала привязывает обработчик события click к кнопке #getForecast. Данный обработчик выполняет AJAX запрос GET к getForecast.txt, передавая название города и дату для прогноза. Также определяется возвратная функция success(), которая будет выполняться по завершению запроса. Формат возвращаемых сервером данных определяется как JSON.
  4. Файл getForecast.txt возвращает браузеру данные прогноза в формате JSON.
  5. Вызывается функция success(). jQuery разбирает данные JSON, полученные от getForecast.txt, конвертирует их в объект JavaScript, и передает их в функцию.
  6. Функция возвращает объект данных forecastData и выводит сообщение, которое содержит несколько свойств объекта, включая название города, прогноз и температуру.

Простой пример в несколько строк демонстрирует работу запроса AJAX с использованием метода $.get().

demosourse

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/ajax-with-jquery-a-beginners-guide/
Перевел: Сергей Фастунов
Урок создан: 5 Марта 2012
Просмотров: 159987
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 7 Марта 2012 09:34
    Weron
    Наконец-то урок по Ajax. Спасибо
  • 7 Марта 2012 10:13
    belousovnikita
    ура, я дождался!))
  • 7 Марта 2012 11:23
    Alfaix
    Огромное спасибо! Как раз для новичков)
  • 7 Марта 2012 14:16
    Oxyaction
    Не советую использовать $.get() для приема данных в формате json, лучше использовать $.getJSON()
  • 7 Марта 2012 16:27
    botenik
    Спасибо! Ждем уроков по PHP с технологией AJAX)
  • 7 Марта 2012 22:05
    rymaruk
    То что надо...Спасибо!
  • 8 Марта 2012 21:29
    vtvz_ru
    Супер, спасибо большое
  • 8 Марта 2012 23:30
    Ceme4kin
    Здраствуйте! Только у меня творится что-то непонятное? 1) Не отображается русский текст на button и приходится его писать на англ. 2) При нажатии на button ничего не происходит вообще. Прописываю и делаю все как написано в уроке. в чем может быть ошибка?
    • 9 Марта 2012 14:36
      marky
      измени кодировку файла на Utf-8
  • 9 Марта 2012 14:38
    marky
    { "city": "Васюки", "date": "18 марта 2012", "forecast": "Зубодробительный холод и слякоть", "maxTemp": +1
    }
    
    нужно "maxTemp": "+1"
    • 10 Марта 2012 17:32
      loginco
      ничего не работает, может кто-нибудь скинуть файл обработчик?
    • 12 Апреля 2012 22:04
      dreams
      to marky. Ты прав на все 100% про "maxTemp":"+1" все значения нужно ставить в кавычки to laginco "+1" в кавычки постав
  • 11 Марта 2012 11:22
    barankulovsergey
    Что-бы все работало, нужно чтобы тестовый файл имел такое же имя как и у обработчика.
  • 11 Марта 2012 13:43
    Vazcore
    Огромное спасибо за урок.
  • 1 Апреля 2012 14:43
    Alexey_
    Как всегда, огромное спасибо Жене. Я по етому примеру уже успел за 20 мин. впервые написать чуть более сложный скрипт, и всё отлично работает. Но! работает только в ИЕ и ФФ, а вот Хром и Опера тупо не реагируют. В т.ч. и скрипт из исходника на етом сайте. Можете подсказать в чём проблема?
    • 15 Марта 2016 13:16
      aortan
      Никто до сих пор так и не разъяснил, почему код из примера работает в ФФ, но Хром и Опера на него не реагируют. Подтверждаю, у меня то же самое. jQuery вроде как кроссбраузерная библиотека. Все файлы в utf-8, запускаю из сервера. Так откуда же растёт проблема?
  • 15 Мая 2012 08:30
    singleton
    { "city": "Васюки", "date": "18 марта 2012", "forecast": "Зубодробительный холод и слякоть", "maxTemp": +1
    }
    Интересная тонкость - со строчкой
    "maxTemp": +1
    
    ничего не работает. А если исправить на
    "maxTemp": 1
    
    - все работает нормально.
    • 30 Мая 2012 20:26
      Sharfik
      потому что есть понятие "типа переменной"; целое число (1) (тип int) - без каких либо кавычек, а (+1) - это строка, заключается в двойные кавычки..."грамотные", поправьте меня еси я не прав!)
  • 28 Июля 2012 11:01
    drlenux
    Отличный урок, что надо)
  • 18 Апреля 2013 20:37
    lobzinatr
    не работает... скачал исходник не работает, сам написал не работает. в чем может быть проблема?
    • 11 Августа 2014 13:19
      maxim.enbachtov
      Важно! Для того, чтобы примеры работали корректно, необходимо: 1. Все файлы должны быть записаны в кодировке UTF-8. 2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.
  • 1 Июня 2013 15:55
    goilo
    Бред! Откуда взялось forecastData???!!!Как оно конвертировалось???
  • 21 Июня 2013 07:47
    lait1989
    Присоединяюсь! Откуда взялось forecastData? Не совсем понятно.
    • 11 Августа 2014 13:34
      maxim.enbachtov
      forecastData это объект, который возвращается из .txt файла и поступает автоматически в success. Далее можно пользоваться им как объектом, т.е. что бы получить доступ к ("date": "18 марта 2012"), надо писать forecastData.date (отобразиться в браузере: 18 марта 2012)
  • 26 Июня 2013 02:21
    samlewis
    Один из немногих уроков, где все очень подробно, понятно, нужно и интересно. Спасибо!
  • 29 Сентября 2013 18:55
    art.denis
    Спасибо
  • 9 Октября 2015 22:46
    De_Nice
    Я новый, как скачать курс и где?
  • 16 Марта 2016 13:12
    aortan
    Хреновый курс. В Хроме и Опере не работает ни один из примеров. Автор писал для Мозиллы, а на кроссбраузерность наплевал. Так что позитивные отзывы - от тех, кто сидит в Мозилле.
^ Наверх ^