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

Реклама

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

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

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

Что?

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

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

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

Для дальнейшего чтения я недавно написал еще один урок о обработка AJAX в WordPress для отправки контактной формы Учебник по использованию AJAX в WordPressAJAX - это замечательная веб-технология, которая вывела нас за рамки простой ссылки «перейдите на другую страницу» Структура Интернета 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 ():

PHP. $ tagslist = get_the_tags (); foreach ($ taglist как $ tag) { echo $ tag-> name. ","; }

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

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

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

$ .each (data.items, function (i, item) {if (i == 3) return false; // остановка, когда у нас есть 3 $ ("# flickr"). append (""); });

И там у нас это есть. Мы Добавление данных 3 элемента из возвращенного объекта JSON (данные индексируются нулем, поэтому, если мы перейдем к пункту 3, мы на самом деле находимся на четвертом элементе. Смущаюсь, я знаю. На этом этапе мы используем вернуть ложь выпрыгнуть из каждый () итератор). Я уже изучил содержимое возвращаемых объектов, поэтому я знаю структуру данных и извлекаю только ссылку и ссылку на IMG. Если вам интересно узнать, что еще возвращается, просто бросьте console.log (item) там.

Вот результаты на моем тестовом сайте, и полный код в этом PasteBin. Обратите внимание, что возвращаемые результаты в основном нежелательны - в моем сообщении был тег DIY для прогулка по курятникуи Flickr дал мне DIY вязание. Приятно. Конечно, это одно из препятствий, с которыми вы сталкиваетесь при работе с API и выполнении действий автоматически; Вы можете либо повторно пометить свои сообщения (значительная задача), изменить запрос, чтобы запросить «все» теги вместо «любой» (вероятно, чтобы вернуться ничего в этом случае), или придумайте новое настраиваемое поле, в котором вы бы указали целевое ключевое слово для использования с API (вероятно, простой).

SEO соображения

Это не главное, но поскольку вы занимаетесь разработкой веб-сайтов, это должно быть упомянуто: поисковые системы не будут индексировать контент, который не существует при загрузке страницы, такой как что-либо сделанное через AJAX. Самое худшее, что вы можете сделать, - это полностью AJAXify вашего блога, чтобы домашняя страница была просто контейнером, похожим на iframe, для всего контента, который загружается динамически. Используйте AJAX с умом, чтобы усилить содержание страницы, а не как замена. Или столкнуться с ужасными последствиями.

Спасибо за чтение, и я надеюсь, что дал вам несколько идей. Конечно, Flickr - не единственный API - только Googleпубличный APIИ вы обязательно найдете больше вещей, с которыми можно поиграть.

Следующая неделя станет последним уроком в серии руководств по jQuery, так как мы проверяем плагин jQuery UI. Как всегда, комментарии и предложения приветствуются; если у вас есть вопрос, который будет полезен другим, рассмотрите возможность размещения его на нашем сайте ответов.