Курс по jQuery. Урок 11. Работа AJAX. Часть 1


jQuery для начинающих.ч.1. Начинаем с нуля

Как веб-дизайнеру, мне давно стал интересна такая вещь, как библиотека Javascript jQuery. Не владея ей, я не могу считать себя достаточно профессиональным. В этой серии уроков мы с вами разберёмся в азах jQuery. После этого цикла в блоге появятся более серьёзные и продвинутые статьи по этой библиотеке.

Что такое jQuery и почему он?

Почему jQuery? Потому что во-первых нам отныне не придётся прописывать кучу кода Javascript, и мы научимся выполнять то же самое, прописав всего лишь одну- две строки. И потому что jQuery, подобно WordPress, имеет кучу улучшений и дополнений.

Если брать из Википедии,
jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax.

Работа в jQuery. Первые команды

Для начала подключим jQuery:

Убедитесь, что используете Minifest — версию.

Второй, и более верный способ — подключать через Google’s Content Delivery Network (CDN). Это гарантирует самую последнюю версию.

Перед тем, как чтото туда писать, научимся выбирать нужные элементы. Это довольно просто — используется знак $.
Т.е. $(‘выбранные элементы’). Для того, чтобы выбрать все div’ы на этой странице, придеться прописать $(‘div’).

Комбинировать можно как угодно.

Создадим новый Div на нашей странице.

Пропишем ему стили:

получится что-то в этом духе:

Заставим его двигаться.

Финальной частью нашего первого урока будет движение этого блока на странице. Для начала выделим его:

Можно конечно использовать и $(‘div’), но лучше всё максимально конкретизировать.
Чтобы заставить объект двигаться, используем функцию animate():

Вообще есть у этой функции три опции, но одна необязательна.

Если более детально взглянуть на «что поменять», видим:

То есть в итоге мы задаём отступ сверху 300, слева 400, и скорость 1000. 1000=1сек. ‘возврат’ выполняется после совершения движения, но сейчас мы обойдёмся без него.

Использование Ajax: часть II

В этой главе я покажу вам, как использовать низкоуровневый jQuery Ajax API. Термин низкоуровневый подразумевает, что вы вникаете в самую сущность запроса, но на самом деле это не совсем так. Методы, которые я опишу в этой главе, не такие сокращенные и удобные, как описанные в главе 14, но приложив совсем немного усилий, вы можете конфигурировать запрос таким образом, что он будет соответствовать вашим нуждам, если конфигурация, используемая сокращенными методами с ними (нуждами) не справляется. В таблице 15-1 представлено краткое содержание этой главы.

Таблица 15-1: Краткое содержание главы

Современный учебник JavaScript

Перед вами учебник по JavaScript, начиная с основ, включающий в себя много тонкостей и фишек JavaScript/DOM.

Содержание

Первые две части посвящены JavaScript и его использованию в браузере. Затем идут дополнительные циклы статей на разные темы.

Язык программирования JavaScript

Здесь вы можете изучить JavaScript, начиная с нуля и заканчивая продвинутыми концепциями вроде ООП.

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

#10 — Ajax.

Пользователи интернет-ресурсов часто заполняют данные в формах, нажимают на кнопку
«Отправить», не задумываясь над тем, какие процессы происходят при этом,
какое взаимодействие осуществляется в этот момент между их компьютером и компьютером
отдаленным — сервером.

В этом видео будет раскрыта тайна самого страшного слова из всего курса
по jQuery — ajax. Посмотрев этот урок, вы перестанете его бояться и научитесь использовать
для динамической подгрузки данных от сервера, а также отправки запросов на сервер.

Оказывается, методами jQuery ajax-запрос создать не так уж сложно. Главное — не бояться
и смело идти на покорение новых вершин.

Топ-пост этого месяца:  Новые темы для WordPress в 2020 году

Приятного всем просмотра! Учитесь с удовольствием!

Курс Javascript/jQuery

Интерактивный мини-курс Javascript и jQuery с нуля

Цель мини-курса Javascript/jQuery дать начальное представление о работе с DOM, как с помощью Javascript ES5, так и с помощью jQuery. Курс Javascript(JS)/jQuery подходит для начинающих с нуля, однако необходимо знать основы HTML/CSS.

  • 21 заданий
  • 1 час видео
  • Сертификат об окончании

О курсе

Разработка сайта на Javascript и jQuery, позволит сделать интерфейс вашего сайта более живым и интерактивным. Это самые основы языка Javascript для начинающих, изучающих язык Javascript с нуля. В видеокурсах Javascript и jQuery показываются примеры программирования на языке Javascript и jQuery.

В уроках Javascript/jQuery вы узнаете:

  • Что такое язык Javascript и как его используют
  • Базовый синтаксис классического Javascript (ES5)
  • Как пользоваться переменными в Javascript
  • Какие бывают виды циклов в Javascript и для чего они нужны
  • Что такое массивы и как работать с массивами в Javascript
  • Что такое JSON
  • Функции для работы со строками и массивами в Javascript
  • Как создавать собственные функции
  • Как создавать и обрабатывать события при клике на кнопку
  • Как изменять CSS-стили при клике на кнопку
  • Что такое библиотека jQuery
  • Как встроить jQuery в html-страницу

Язык Javascript изучают не только Frontend (фронтенд) разработчики, но и Backend разработчики, для программирования серверной части веб-сайтов. После завершения мини-курса по основам Javascript и jQuery, мы рекомендуем пройти уроки современного Javascript (ES6, ES7, ES8)

План курса

План мини-курса Javascript/JQuery включает в себя уроки Javascript (видео), тесты Javascript, интерактивные задания Javascript в браузере

jQuery для начинающих

Вы хотите изучить JQuery? Обратите внимание на эти видеоуроки! Автор очень доступно объясняет сложные вещи. Изучайте с удовольствием!

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

Вместе с этими видеоуроками Вы сможете освоить:

  • Выборки необходимых Вам узлов из DOM-дерева
  • Изменения полученных наборов элементов.
  • Используя полученные наборы элементов, Вы сможете быстро изменять структуру страницы и её содержимое, а также оформление всех элементов на ней.
  • Простейшие анимационные эффекты, основанные на h >


Глава 1: разбор DOM (01:20:14)

Часть 1: Селекторы и фильтры (46:41)

Урок 1 (11:44): селекторы базовые, иерархические
Урок 2 (07:57): фильтры базовые
Урок 3 (07:56): фильтры контента и видимости
Урок 4 (04:55): фильтры атрибутов
Урок 5 (06:16): «семейные» фильтры
Урок 6 (07:53): селекторы/фильтры форм

Часть 2: функциональный разбор DOM (33:33)

Урок 1 (10:18): фильтрация отобранных элементов (часть 1)
Урок 2 (05:43): фильтрация отобранных элементов (часть 2)
Урок 3 (08:30): поиск в наборах элементов
Урок 4 (09:02): утилитарные функции для работы с наборами

Глава 2: работа с элементами DOM (52:48)

Часть 1: работа с атрибутами (19:07)

Урок 1 (06:57): работа с атрибутами
Урок 2 (06:11): работа с классами
Урок 3 (05:59): работа со значениями (value)

Часть 2: работа с содержимым (33:41)

Урок 1 (07:34): создание/добавление нового контента
Урок 2 (08:06): вставка контента/элементов
Урок 3 (05:37): «заварачивание» элементов
Урок 4 (12:24): копирование/замена/удаление элементов

Глава 3: работа с событиями (38:56)

Урок 1 (05:40): связывание событий с их обработчиками
Урок 2 (14:36): объект события в jQuery
Урок 3 (08:16): хелперы событий
Урок 4 (10:24): утилитарные методы для работы с событиями

Глава 4: работа с анимационными эффектами (19:02)

Урок 1 (07:05): hiding-эффекты
Урок 2 (06:38): fading-эффекты
Урок 3 (05:19): sliding-эффекты

Глава 5: работа с AJAX запросами (58:54)

Урок 1 (06:09): вводный
Урок 2 (13:38): базовые методы и свойства
Урок 3 (12:57): задание обработчиков локальных AJAX событий
Урок 4 (07:51): детальная настройка запросов
Урок 5 (06:49): задание обработчиков глобальных AJAX событий
Урок 6 (11:30): shorthand методы

Глава 6: отладка JQ кода (1:08:06)

Урок 1 (07:10): вводный
Урок 2 (12:47): работа с консолью (часть 1)
Урок 3 (16:01): работа с консолью (часть 2)
Урок 4 (10:59): отладка селекторов
Урок 5 (05:44): отладка обработчиков событий
Урок 6 (12:27): отладка асинхронных запросов (AJAX)

Современный учебник JavaScript

Перед вами учебник по JavaScript, начиная с основ, включающий в себя много тонкостей и фишек JavaScript/DOM.

Содержание

Первые две части посвящены JavaScript и его использованию в браузере. Затем идут дополнительные циклы статей на разные темы.

Язык программирования JavaScript

Здесь вы можете изучить JavaScript, начиная с нуля и заканчивая продвинутыми концепциями вроде ООП.

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

Использование Ajax: часть II

В этой главе я покажу вам, как использовать низкоуровневый jQuery Ajax API. Термин низкоуровневый подразумевает, что вы вникаете в самую сущность запроса, но на самом деле это не совсем так. Методы, которые я опишу в этой главе, не такие сокращенные и удобные, как описанные в главе 14, но приложив совсем немного усилий, вы можете конфигурировать запрос таким образом, что он будет соответствовать вашим нуждам, если конфигурация, используемая сокращенными методами с ними (нуждами) не справляется. В таблице 15-1 представлено краткое содержание этой главы.

Таблица 15-1: Краткое содержание главы

Что такое jQuery?

jQuery — это библиотека, которая значительно упрощает и ускоряет написание JavaScript кода.

Девиз jQuery «write less, do more» (пиши меньше, делай больше) отражает ее главное предназначение.

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

Данная библиотека работает со всеми браузерами (IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome). Это значит, что Вам больше не нужно будет беспокоиться о кроссбраузерной совместимости JavaScript кода.

Для jQuery написано огромное количество плагинов, которые позволяют расширить ее возможности еще больше.

Пример использования jQuery

Добавление jQuery на страницы

Для того, чтобы начать использовать jQuery необходимо:

  1. Скачать ее с официального сайта. Существуют две версии jQuery: для использования в готовых приложениях (production) и для разработки (development). Версия для разработки содержит комментарии и структурированный код. В сокращенной версии нет комментариев и код в ней не структурирован зато она занимает меньше места и поэтому страницы с ней будут загружаться быстрее. После того, как Вы выберите подходящую версию нажмите на кнопку «Download ( jQuery )»
  2. Добавить ее на страницу. Для этого следующий код должен быть добавлен на страницу в секцию head:

Для тех кто по каким-либо причинам не может (или не хочет) скачивать jQuery предусмотрен альтернативный способ удаленного использования библиотеки предоставленный компанией Google.

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

Сделайте сами

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

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

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

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

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

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

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

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

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

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

AJAX запрос — асинхронный

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

Топ-пост этого месяца:  OpenCart – кнопки вверх и вниз для сайта
Добавить комментарий