Учебник по jQuery (часть 5). AJAX Them All!

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

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

• Введение: что такое jQuery и почему вас это должно волновать? Создание веб-интерактивности: введение в jQuery Создание веб-интерактивности: введение в jQuery jQuery - это библиотека сценариев на стороне клиента, которую использует почти каждый современный веб-сайт - она ​​делает веб-сайты интерактивными. Это не единственная библиотека Javascript, но она наиболее разработана, наиболее поддерживается и наиболее широко используется ...
• 1: Селекторы и основы jQuery Tutorial - Начало работы: основы и селекторы jQuery Tutorial - Начало работы: основы и селекторы На прошлой неделе я говорил о том, насколько важен jQuery для любого современного веб-разработчика и почему он потрясающий. На этой неделе, я думаю, пришло время запачкать руки кодом и научиться…
• 2: Введение в методы jQuery (часть 2): Методы и функции Введение в jQuery (часть 2): Методы и функции Это часть продолжающегося введения новичков в серию веб-программирования jQuery. В первой части были рассмотрены основы jQuery, как включить его в ваш проект, и селекторы. Во второй части мы продолжим с…
• 3: Ожидание загрузки страницы и анонимных функций Введение в jQuery (часть 3): Ожидание загрузки страницы и анонимных функций Введение в jQuery (часть 3): Ожидание загрузки страницы и анонимных функций jQuery, вероятно, является важным навыком для современный веб-разработчик, и в этом коротком мини-сериале я надеюсь дать вам знания, чтобы начать использовать его в своих собственных веб-проектах. В…
• 4: События jQuery Tutorial (Часть 4) - Слушатели событий JQuery Tutorial (Часть 4) - Слушатели событий Сегодня мы собираемся поднять его на ступеньку выше и показать, где на самом деле светит jQuery - события. Если вы следовали прошлым урокам, теперь у вас должно быть достаточно хорошее понимание основного кода…
• Отладка с помощью инструментов разработчика Chrome Выясните проблемы с веб-сайтом С помощью инструментов разработчика Chrome или Firebug Выясните проблемы с веб-сайтом с помощью инструментов разработчика Chrome или Firebug Если вы уже читали мои руководства по jQuery, возможно, вы уже столкнулись с некоторыми проблемами кода и не знаете, как чтобы исправить их. Когда мы сталкиваемся с нефункциональным фрагментом кода, это очень…

Что?

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

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

Сегодня мы рассмотрим использование стороннего сервиса Flickr, от которого мы можем использовать AJAX для получения некоторых изображений, используя тип данных JSON. На самом деле не имеет значения, как Flickr реализует принимающую сторону, потому что это красота API-интерфейсы - все, что нам нужно знать, это URL-адрес API, какие данные мы собираемся получить и как ими манипулировать.

Для дальнейшего чтения я недавно написал еще один учебник по обработке AJAX в WordPress для отправки контактной формы. Учебник по использованию AJAX в WordPress Учебник по использованию AJAX в WordPress. AJAX - замечательная веб-технология, которая вывела нас за рамки простого “нажмите на ссылку, перейдите на другую страницу” Структура Интернета 1.0. Он позволяет веб-сайтам динамически извлекать и отображать контент без участия пользователя, так что вы можете проверить это; это включает в себя написание собственного обработчика PHP и интеграцию его в “официальный” WordPress AJAX процесс.

Метод AJAX

Вот основной формат запроса AJAX:

$ .ajax (type: "GET or POST", url: "API или URL вашего обработчика PHP", тип данных: "JSON", // в зависимости от того, какие данные вы хотите вернуть, но JSON - наиболее распространенные данные: // набор пар ключ: «значение», success: function (data) // обработать успешный возврат данных, error: function (message) // обработать ошибку);

Поначалу это выглядит довольно сложно - не помогает отсутствие отступов от этого плагина кода - но вы увидите, как легко, когда доберетесь до реального примера.

Flickr API AJAX

В этом примере мы собираемся получить теги, связанные с текущим постом WordPress, и получить несколько изображений для добавления в конце статьи. В документации jQuery есть похожий пример, но он использует сокращенный метод, называемый getJSON () вместо того, чтобы объяснять полный формат AJAX. Хотя это верный способ сделать что-то, если вы знаете, что вернете только данные JSON, я чувствую, что изучение фактического метода AJAX более важно, поэтому мы так и сделаем.

Сначала один single.php и мы попытаемся вывести простой запятый отдельный список текущих тегов записей. Как правило, вы бы использовали the_tags () чтобы сделать это, но это не хорошо, так как мы хотим в конечном итоге сохранить их как переменную, в то время как the_tags () повторяет их прямо в предварительно отформатированном виде. Вместо этого мы будем использовать get_the_tags ():

название.","; ?>

Это хорошо работает, поэтому мы выведем это внутри запроса AJAX на URL API Flickr следующим образом (обратите внимание, это скриншот - для сохранения отступа код доступен в этой PasteBin).

На этом этапе все это происходит для вывода на консоль браузера или для предупреждения об ошибке, если она есть. Чтобы действительно что-то сделать с возвращенными данными, добавьте куда-нибудь изображения для размещения:

И отредактируйте успех параметр вызова AJAX, чтобы перебрать Предметы которые возвращаются.

$ .each (data.items, function (i, item) if (i == 3) return false; // остановка, когда у нас есть 3 $ ("# flickr"). append ("
SEO соображения
Это не главное, но поскольку вы занимаетесь разработкой веб-сайтов, следует упомянуть: поисковые системы не будут индексировать контент, который не существует при загрузке страницы, например, что-либо, сделанное через AJAX. Самое худшее, что вы могли бы сделать, - это полностью AJAXify вашего блога, чтобы домашняя страница была просто контейнером, похожим на iframe, для всего контента, который загружается динамически. Используйте AJAX с умом, чтобы усилить содержание страницы, а не как замена. Или столкнуться с тяжелыми последствиями.
Спасибо за чтение, и я надеюсь, что дал вам несколько идей. Конечно, Flickr не единственный API - только Google “публичный API” и вы обязательно найдете больше вещей, с которыми можно поиграть.
Следующая неделя будет последним уроком из серии руководств по jQuery, так как мы проверяем плагин jQuery UI. Как всегда, комментарии и предложения приветствуются; если у вас есть вопрос, который будет полезен другим, рассмотрите возможность размещения его на нашем сайте ответов.