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

Большинство современных сайтов используют технологию, которая называется 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 (который традиционно используется для отправки данных формы).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Открываем 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() .

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

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

• 

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

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

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

В этом уроке мы с вами разберем что такое fetch и как он отличается от XMLHttpRequest. Fetch — это улучшеный XMLHttpRequest, который по умолчанию использует промисы и более простое и чистое API.

Следует сразу заметить, что fetch не поддерживается всеми браузерами. Например в IE 10-11 он не работает. В Safari он работает с версии 10. Конечно для него есть полифил, который использует XMLHttpRequest с старых браузерах.

Для того, чтобы обращатся на сервер за данными, давайте создадим API с тестовыми данными с помощью сервиса mocky.io.

Вот у меня есть JSON данных

Вставляем его в body запроса и в advance mode выбираем

Для того, чтобы любой домен мог обращатся к этому API.

Нажимаем Generate response и получаем ссылку на наш API.

Теперь давайте напишем запрос с помощью fetch, который позволит нам получить данные.

Один из нюансов в fetch, что мы не получаем сразу в response данные, а Stream-обьект. Это значит, что мы должны наш response парсить, для того, чтобы получить данные.

Здесь мы используем метод .json, чтобы парсить ответ как json. Результат вызова .json тоже является промисом, поэтому мы должны писать then, в котором мы получим результат. Если мы посмотрим в браузер, то у нас в консоли вывелись данные.

Этот код можно написать чуть чище, разбив на 2 then конструкции и избежав глубокой вложенности

Если мы посмотрим в браузер, то наш код работает точно также.

В получении данных часто возникают ошибки и их нужно как-то обрабатывать. В fetch с этим есть нюансы. Обычно думаешь, что если написать .catch, то отловишь любую ошибку.

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

Если мы хотим отловить обычные ошибки, их нужно обрабатывать в первом блоке .then. И так как мы работаем с промисами, то мы можем их резолвить и реджектить когда хотим

Мы добавили еще один блок с resolve и reject, который позволяет сделать нашу работу с fetch правильной. Ни один из следующих then не выполнится при ошибке, а мы сразу попадем в catch.

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

Если например бы хотим сделать POST запрос, то там достаточно указать method post. Также мы можем добавить body, которое мы хотим передать в запросе.

Как мы видим, fetch намного более гибкий чем XMLHttpRequest. Из-за использования промисов он позволяем нам комбинировать код, как нам нужно.

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

1. Кода все равно получается много и приходится писать свою обертку вокруг fetch, чтобы было удобно его использовать
2. Парсинг данных не особо полезен, если я получаю от сервера всегда JSON, а код приходится писать
3. Если вы хотите передавать данные в body в виде обьекта, то вам нужно на обьекте вызывать JSON.stringify, что неудобно
4. Обработка ошибок в fetch, когда не все ошибки падают в catch лично мне не нравится. Для меня логично что все ошибки всегда падают в catch

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

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

Я могу использовать https для отправки данных на сервер apache2, есть ли способ использовать https для извлечения некоторых данных с сервера, запускать php script или что-то возвращать

Просто используйте запрос https GET для получения данных.

вы можете использовать CURL для этого (руководство php.net).

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

Если ваш код находится на том же сервере, что и данные, вам может не понадобиться https-соединение. Вероятно, вы можете просто прочитать данные. Если вам нужно использовать веб-API, проверьте его документацию о том, как подключиться через безопасное соединение.

(извините, но я не мог разместить более одной гиперссылки)