—»     —»   Совместное использование jQuery и JSON API-клиентов: руководство для начинающих
  Раздел: Руководства   Нет комментариев  

Совместное использование jQuery и JSON API-клиентов: руководство для начинающих



Заинтересованы ли вы в динамических данных? Интересно ли вам то, каким таким магическим образом, твиты владельцев веб-сайтов автоматически внезапно появляются на сайте? Поверьте, это не так сложно.

Сегодняшнее руководство мы посвятим созданию простого веб-приложения, которое будет собирать постеры к фильмам с базы TMDb. Здесь мы будем использовать jQuery и пользовательское поле ввода, с которого будет производиться запрос к API, основанному на JSON, которое, в свою очередь, будет выдавать нам ответ с нужными данными.

Хотим заверить вас в том, что API не такие уж и страшные, и зачастую они могут быть лучшими друзьями разработчиков.

Будущее за API, но, что более важно, и настоящее тоже!

API, основанные на JSON, в наши дни повсеместно используются на различных веб-сайтах. Вряд ли сейчас можно вспомнить времена, когда блоги существовали без отдельного блока с последними твитами автора или со списком друзей в социальной сети Facebook. Подобная интерактивность делает интернет гораздо более привлекательным и захватывающим. Единственное ограничение, существующее в веб на сегодняшний день, кажется, заключается лишь в воображении разработчиков. Всё, что мы наблюдаем сегодня, от твитов до самодостаточных автоматических API с отображением валютных котировок, указывает на то, что в наше время самый ценный продукт – это информация, и веб-сайты свободно ей обмениваются.

Разработчики позволяют нам абсолютно без труда получать данные и пользоваться ими, сегодня не существует различных специальных разделов, «ключ» к которым есть только у «избранных». Веб-сайты, наоборот, стремятся к тому, чтобы как можно больше народу получило доступ к информации, размещенной, на страницах, стараются привлечь больше людей. Веб-сайты наподобие TMDb и LastFM позволяют вам создавать цельные отдельные приложения, основанные на данных, которые эти сервисы собирали годы напролет. Такая открытость и восприимчивость способствуют созданию одной большой переплетенной сети пользователей и их взаимодействия друг с другом и с приложениями.

Совместное использование jQuery и JSON API-клиентов: руководство для начинающих

Статья направлена на людей, сведущих в HTML и CSS, и имеющих знания в области jQuery. Мы хотели бы окунуться глубже в расширенные методы применения javascript, но давайте для начала расскажем новичкам о возможностях создания более сложных Веб-инструментов.

Коротко об API

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

Конечно, всё это классно! Но какой код мне понадобится?

Многих разработчиков «кидает» от серверной к конечной разработке, и многим из нас нравится работать как в PHP, так и в jQuery. Это зависит от того, какую шляпу мы сегодня надели с утра.

Так как данная статья в большей степени направлена на jQuery на основе JSON API-клиентов, мы сосредоточимся на коде с клиентской стороны (то есть, на jQuery).

Работая с API и вооружившись jQuery, нам в большинстве случаев также следует учесть и JSON.

Герой 1: JSON

JSON (или javascript Object Notation) – это простой и популярный метод обмена данными. jQuery не единственный инструмент для манипуляций и взаимодействия с JSON, просто многим уже так намного удобнее.

Многие сервисы, которыми мы пользуемся ежедневно, используют API на JSON: Twitter, Facebook и Flickr – все эти сервисы возвращают информацию именно в JSON-формате.

JSON-запрос от API выглядит следующим образом:

([{"score":
null,"popularity":
3,"translated":true,"adult":
false,"language":"en","original_name":"The Goonies","name":"The Goonies","alternative_name":"I Goonies",
"movie_type":"movie","id":9340,"imdb_id":"tt0089218",
"url":"http://www.themoviedb.org/movie/9340",
"votes":16,"rating":9.2,"certification":"PG","overview":"A young teenager named Mikey Walsh finds an old treasure map in his father's attic.
Hoping to save their homes from demolition, Mikey and his friends Data Wang, Chunk Cohen, and Mouth Devereaux runs off on a big quest
to find the secret stash of the pirate One-Eyed Willie.","released":"1985-06-07",
"posters":[{"image":{"type":"poster","size":"original","height":1500,"width":1000,
"url":"http://cf1.imgobject.com/posters/76b/4d406d767b9aa15bb500276b/the-goonies-original.jpg",
"id":"4d406d767b9aa15bb500276b"}}],"backdrops":[{"image":{"type":"backdrop","size":"original","height":1080,"width":1920,
"url":"http://cf1.imgobject.com/backdrops/242/4d690e167b9aa13631001242/the-goonies-original.jpg",
"id":"4d690e167b9aa13631001242"}}],"version":3174,"last_modified_at":"2011-09-12 13:19:05"}])

Немного запутанно, не правда ли? Сравните это с тем же JSON-запросом, просматриваемым в консоли разработчика в браузере Google Chrome:

Совместное использование jQuery и JSON API-клиентов: руководство для начинающих

JSON-запрос доступен посредством функционала jQuery, что позволяет нам управлять, отображать и, что самое важное, стилизовать его так, как нам потребуется.

Герой 2: jQuery

Многие наши знакомые предпочитают всегда использовать jQuery. Данная технология значительно упрощает процесс веб-разработки для тех, кто любит немедленно приступать к рабочему процессу. Многие разработчики используют JQuery вместо javascript, так как уже для себя выяснили, что последний подход требует значительно большего времени. javascript, по сути, предназначен для тех, кто желает глубже окунуться в язык программирования и в DOM. Но если вам требуется простота в использовании и в рабочем процессе, то смело используйте jQuery.

В целом, jQuery представляет собой библиотеку javascript с некоторыми удобными функциями типа getJSON. Эта функция как раз будет выполнять роль «клея», который будет скреплять наших клиентов API вместе.

Цель: JSON API-клиент на основе jQuery

Давайте сегодня мы возьмем на рассмотрение интересное веб-приложение под названием Front Row.

Идея веб-приложения заключается в том, чтобы использовать введенное пользователем название фильма, пропустить его через API от TMDb, и получить соответствующий постер. Затем пользователь имеет возможность сохранить его в компьютер или поделиться им с друзьями.

Веб-приложение разделено на HTML, CSS и jQuery. Давайте сосредоточимся на jQuery, так как именно здесь происходит магия.

HTML

Ниже представлена структура нашего веб-приложения. Ничего особенного.

<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Ben Howdle and Dan Matthew">
<meta name="description" content="A responsive movie poster grabber">
<title>Front Row by Ben Howdle</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
<!--jQuery, linked from a CDN-->
<script src="scripts.js"></script>
<script type="text/javascript" src="http://use.typekit.com/oya4cmx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<header>
<h1>Front Row</h1>
</header>
<section id="fetch">
<input type="text" placeholder="Enter a movie title" id="term" />
<button id="search">Find me a poster</button>
</section>
<section id="poster">
</section>
<footer>
<p>Created by <a href="http://twostepmedia.co.uk">Ben Howdle</a></p>
</footer>
</div>
</body>
</html>

Здесь просто небольшое упоминание о Twitter, поле и кнопка ввода.
Готово!

CSS-код ни коим образом не подходит под нашу сегодняшнюю статью, поэтому мы опустим его.

jQuery

$(document).ready(function(){

//This is to remove the validation message if no poster image is present

$('#term').focus(function(){
var full = $("#poster").has("img").length ? true : false;
if(full == false){
$('#poster').empty();
}
});

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

//function definition

var getPoster = function(){

//Grab the movie title and store it in a variable

var film = $('#term').val();

//Check if the user has entered anything

if(film == ''){

//If the input field was empty, display a message

$('#poster').html("<h2 class='loading'>Ha! We haven't forgotten to validate the form! Please enter something.</h2>");

Совместное использование jQuery и JSON API-клиентов: руководство для начинающих

Далее мы разъясним, почему мы храним основной код, возвращающий нам информацию, в функции.

Когда мы размещаем значение поля ввода в переменную, а затем используем ее снова в коде, jQuery не приходится заново сканировать DOM.

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

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

} else {

//They must have entered a value, carry on with API call, first display a loading message to notify the user of activity

$('#poster').html("<h2 class='loading'>Your poster is on its way!</h2>");

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

$.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/" + film + "?callback=?", function(json) {

//TMDb is nice enough to return a message if nothing was found, so we can base our if statement on this information

if (json != "Nothing found."){

//Display the poster and a message announcing the result

$('#poster').html('<h2 class="loading">Well, gee whiz! We found you a poster, skip!</h2><img id="thePoster" src=' + json[0].posters[0].image.url + ' />');

Совместное использование jQuery и JSON API-клиентов: руководство для начинающих

Здесь у нас «начинка» нашего API-клиента. Мы используем функцию jQuery «getJSON», которая по определению подгружает «JSON-закодированные данные с сервера при помощи запроса GET HTTP».

Дальше мы используем URL API, в данном случае предложенный базой TMDb. Как и в случае со многими API, вам нужно будет зарегистрировать ваше приложение для того, чтобы получить ключ (процесс займет не более 30 секунд). Затем мы вносим ключ API (23afca60ebf72f8d88cdcae2c4f31866) в URL, и вводим заголовок фильма, который ищет пользователь, в параметр поиска.

Здесь нужно отметить то, что окончание URL callback=? позволяет нам создавать кросс-доменные JSON- и AJAX-запросы. Не забывайте об этом, иначе данные будут ограничены только вашим доменом! Данный метод использует то, что мы называем JSONP (или JSON с отступом), который обычно позволяет скрипту извлечь данные с другого сервера и домена. Для этого нам нужно определить обратный вызов, упомянутый выше, при загрузке данных посредством jQuery. Он заменяет «?» названием нашей функции, что позволяет нам без труда делать кросс-доменные запросы.

В обратном вызове функции нам нужно вставить слово json (что позволит нам удерживать полученные в ответ данные), но мы можем разместить там данные или сообщение.

Следующая проверка предназначена для определения, были ли получены данные в ответ. Функционал TMDb достаточно любезен, и поэтому мы сможем видеть сообщение «Nothing found», если скрипт не сможет ничего найти. Таким образом, мы основали объявление if на значение строки.

Эта проверка направлена на API. Обычно, если результат не был получен, мы можем расширить объект для того, чтобы осуществить поиск параметра с именем length, который поможет нам определить, сколько результатов было получено в ответ. Если это происходит, то код будет выглядеть следующим образом:

if (json.length != 0){

Для справки, прежде чем написать хотя бы строчку кода в функции обратного вызова в JSON-запросе, нам нужно ознакомиться с результатами, полученными в консоли Chrome или в Firebug. Это расскажет нам о том, что именно следует проверять на наличие объявлений if и, что более важно, куда нужно идти, чтобы найти данные, которые мы хотим.

Давайте добавим console.log(json); следующим образом:

$.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/" + film + "?callback=?", function(json) {
console.log(json);

Это выдаст нам нечто вроде того, что отображено в консоли вашего любимого браузера (кликните по изображению, чтобы посмотреть в полном размере):

Совместное использование jQuery и JSON API-клиентов: руководство для начинающих

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

Давайте немного разъясним относительно того, каким образом мы получаем изображения при помощи строки json[0].posters[0].image.url.

Причина к тому, почему мы используем json[0] заключается в том, что, так как нам нужно отобразить только постер, и мы при этом знаем, насколько схожи результаты из базы данных TMDb, мы можем ориентироваться на самый первый результат. Далее мы осуществляем доступ к массиву постеров следующим образом: json[0].posters[0]. Chrome даже сообщает нам о том, что постеры находятся в массиве, так что мы знаем, с чем имеем дело. Опять же, мы осуществляем доступ к первому значению массива, надеясь на то, что он будет самым соответствующим. Затем нам сообщают о том, что изображение является объектом, а значит мы можем осуществить доступ к нему посредством следующего: json[0].posters[0].image. Расширяя наш объект все дальше, мы видим, что изображение содержит параметр под названием url. Джек-пот! Это дает нам прямую ссылку на изображение, которую мы можем использовать в атрибуте src в нашем элементе изображения.

} else {

//If nothing is found, I attempt humor by displaying a Goonies poster and confirming that their search returned no results.

$.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/
23afca60ebf72f8d88cdcae2c4f31866/goonies?callback=?", function(json) {

$('#poster').html('<h2 class="loading">We're afraid nothing was found for that search. Perhaps you were looking for The Goonies?</h2><img id="thePoster" src=' + json[0].posters[0].image.url + ' />');

});
}

Определим то, что у API нет результатов для пользователя, мы можем отобразить сообщение об ошибке. Но, так как это веб-приложение, связанное с фильмами, давайте мы лучше отобразим постер из фильма «Балбесы» и сообщим, что ничего по запросу найти не удалось. Мы будем использовать тот же атрибут src для изображения, который использовали и раньше, но в этот раз вручную впишем адрес постера в URL, который запрашивает API.

});

}

return false;
}

//Because we've wrapped the JSON code in a function, we can call it on mouse click or on a hit of the Return button while in the input field

$('#search').click(getPoster);

$('#term').keyup(function(event){

if(event.keyCode == 13){

getPoster();

}

});

});

Теперь мы обернули наш JSON-запрос в функцию: это позволяет нам запустить функцию, когда пользователь кликает по кнопке подтверждения, либо нажимает клавишу Enter при вводе текста в поле.

Совместное использование jQuery и JSON API-клиентов: руководство для начинающих

Полный код

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Ben Howdle and Dan Matthew">
<meta name="description" content="A responsive movie poster grabber">
<title>Front Row by Ben Howdle</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
<!--jQuery, linked from a CDN-->
<script src="scripts.js"></script>
<script type="text/javascript" src="http://use.typekit.com/oya4cmx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<header>
<h1>Front Row</h1>
</header>
<section id="fetch">
<input type="text" placeholder="Enter a movie title" id="term" />
<button id="search">Find me a poster</button>
</section>
<section id="poster">
</section>
<footer>
<p>Created by <a href="http://twostepmedia.co.uk">Ben Howdle</a></p>
</footer>
</div>
</body>
</html>

jQuery

$(document).ready(function(){

$('#term').focus(function(){
var full = $("#poster").has("img").length ? true : false;
if(full == false){
$('#poster').empty();
}
});

var getPoster = function(){

var film = $('#term').val();

if(film == ''){

$('#poster').html("<h2 class='loading'>Ha! We haven't forgotten to validate the form! Please enter something.</h2>");

} else {

$('#poster').html("<h2 class='loading'>Your poster is on its way!</h2>");

$.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/
23afca60ebf72f8d88cdcae2c4f31866/" + film + "?callback=?", function(json) {
if (json != "Nothing found."){
$('#poster').html('<h2 class="loading">Well, gee whiz! We found you a poster, skip!</h2><img id="thePoster" src=' + json[0].posters[0].image.url + ' />');
} else {
$.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/
23afca60ebf72f8d88cdcae2c4f31866/goonies?callback=?", function(json) {
console.log(json);
$('#poster').html('<h2 class="loading">We're afraid nothing was found for that search. Perhaps you were looking for The Goonies?</h2><img id="thePoster" src=' + json[0].posters[0].image.url + ' />');
});
}
});

}

return false;
}

$('#search').click(getPoster);
$('#term').keyup(function(event){
if(event.keyCode == 13){
getPoster();
}
});

});

Завершение

И на этом всё: отличный метод считывания данных с удавленного API посредством jQuery, а также управление выдачей результатов JSON, которые удовлетворяют наши требования.

Каждый API отличается друг от друга, и каждый предоставляет в ответ разные результаты с разной структурой (что особенно забавно). Итак, привыкайте использовать console.log(), и знакомьте себя с результатами перед тем, как пробовать соединить их с кодом, либо использовать их в вашем приложении.

Начните с чего-нибудь практического и занимательного: создайте встроенную проверку посредством API Gowalla, визуализируйте обновления посредством API от Twitter, либо создайте приложение с распознанием лиц на фотографиях с помощью API от Face.com.

API – это весело.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, JSON, API
Опубликовал Design FactoRy   Прочитано (раз): 8388   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2019    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031