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

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

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

• Введение: что такое jQuery и почему вас это должно волновать?
• 1: Селекторы и основы
• 2: методы
• 3: Ожидание загрузки страницы и анонимных функций
• 4: События
• Отладка с помощью инструментов разработчика Chrome

Что?

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

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

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

Для дальнейшего чтения я недавно написал еще одно руководство по обработке AJAX в WordPress для отправки контактной формы. , так что вы также можете проверить это; это включает в себя написание собственного обработчика PHP и интеграцию его в «официальный» процесс WordPress AJAX.

Метод AJAX

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

$.ajax({ type: "GET or POST", url: "API or your PHP handler URL ", datatype:"JSON", // depending on what kind of data you want back, but JSON is the most common data: { //a set of key:"value" pairs }, success:function(data){ //handle a successful return of data }, error:function(message){ //handle the error } }); 

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

Flickr API AJAX

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

 <?php $tagslist = get_the_tags(); foreach($tagslist as $tag){ echo $tag->name.","; }?> 

 <div id="flickr"></div> 

 $.each(data.items, function(i,item){ if(i==3) return false; // stop when we have 3 $("#flickr").append("<a href='"+item.link+"'><img style='width:33%' src='"+item.media.m+"'/></a>"); });