Skip to content

Обращение к REST-сервисам из JavaScript

05/11/2009

В предыдущем посте я обещал рассказать почему я выбрал именно такой способ обращения к REST API — через прокси-скрипт. Here goes:

В JavaScript есть такая вещь как Same Origin Policy. Вкратце она означает что JavaScript в окне браузера может делать запросы только к страницам находящимся на том же домене которому принадлежит объект окна (а не файл скрипта, заметьте). Причём два окна могут обмениваться информацией только если у них совпадают домен, порт и схема (окна http не могут общаться с окнами https). Впрочем, тут есть одна лазейка. Скрипт может менять URL фреймов и самого верхнего окна, уже без ограничений по домену.

Получается, у нас есть два способа обращаться к сторонним серверам: жонглируя iframe‘ами либо дёргая PHP-скрипт, который уже будет обращаться к нужному сервису.

Преимущества первого варианта: снижается нагрузка на сервер, время ответа (серверу тоже надо получить и переслать запрос), несколько упрощается логика серверной части приложения.

Преимущества второго варианта: можно оперировать данными на сервере до передачи их скрипту (например, менять формат с XML на JSON), можно кешировать наиболее часто вызываемые функции (например, получение «top 10» элементов за сегодня вполне можно закешировать на несколько часов и отдавать уже из базы, не обращаясь к сервису). В первом варианте мы ограничены методами GET/POST, а здесь можно использовать любые. К тому же в этом случае упрощается программирование клиентской части.

Я выбрал второй вариант отчасти из за простоты, отчасти из за возможности кеширования. JavaScript в современных браузерах вполне способен переварить XML необходимых размеров, так что это на выбор не влияло. Кроме GET другие методы нам не понадобятся.

Итак, PHP-прокси. Раз уж данные проходят через сервер, можно здорово упростить их обработку в JavaScript передавая их в виде JSON и вырезая всё лишнее. Так и будем делать. Скрипт обращается к сервису, парсит полученный XML, собирает из нужных параметров JSON и отдаёт его браузеру.

include('api/spore-api.php');

$string = '';
$strings = array();

switch ($_GET['action']) {
	case 'user':
		$creatures = getAssetsPerUser($_GET['user'], 0, 5, 'creature');
		foreach ($creatures AS $creature) {
			$strings[] = ' "' . $creature['id'] . '" : { "name" : "' . $creature['name'] . '", "id" : "' . $creature['id'] . '", "thumb" : "' . $creature['thumb'] . '" } ';
		}
		break;

	case 'toprated':
		$creatures = getAssetsFromQuery('TOP_RATED_NEW', 0, 5, 'creature');
		foreach ($creatures AS $creature) {
			$strings[] = ' "' . $creature['id'] . '" : { "name" : "' . $creature['name'] . '", "id" : "' . $creature['id'] . '", "thumb" : "' . $creature['thumb'] . '" } ';
		}
		break;

	case 'featured':
		break;

	case 'search':
		$creatures = getAssetsFromQuery('random', 0, 5, 'creature');
		foreach ($creatures AS $creature) {
/*			$image = getCreaturePreview($creature['id']);*/
			$strings[] = ' "' . $creature['id'] . '" : { "name" : "' . $creature['name'] . '", "id" : "' . $creature['id'] . '", "thumb" : "' . $creature['thumb'] . '" } ';
		}
		break;
}

header('Content-type: application/x-json');

echo '{ ' . implode(', ', $strings) . ' }';

В PHP начиная с версии 5.2.0 встроено расширение для работы с JSON (если PHP собран без директивы --disable-json), но для такой простой задачи оно не понадобится. Возможно потом я просто перепишу скрипт прокси с использованием этого расширения🙂

Вызов прокси будет выглядеть так:

function load_user_creatures(user) {
	$.getJSON("proxy.php?action=user&user=" + user, function(data){

		$.each(data, function(i, creature){
			show_creature(creature);
		});

	});

}

jQuery очень упрощает работу с AJAX, как видите. Функция getJSON получает два параметра: URL объекта и функцию-callback для обработки полученных данных. Вообще начиная с jQuery 1.2 getJSON позволяет получать JSON с другого домена, но это уже не наш случай🙂

О другом способе вызова REST — с использованием фреймов — можно почитать здесь.

3 комментария
  1. Здравствуйте!

    Не знала, к кому обратиться, поэтому влезла в Вашу тему. Завела позавчера кулинарный блог, а вчера полдня промучалась, пытаясь как-то решить проблему с видеовставками с YouTube: то сверху и снизу, то справа и слева остаются широкие чёрные поля, а как их убрать, не могу найти. Код видеоролика не принимается — только URL. Тогда как в других, менее спродвинутых, сервисах — нет проблем. Может быть, есть такая возможность.

    И ещё. Украли у меня недавно ноутбук и много-много информации с ним. Сейчас пытаюсь вспомнить, как называется этот популярный скрипт норвежца, который всплывающие окна продаёт. И не отвергнет ли wordpress этот скрипт. Во всплывающее окно можно, ведь, и видеоролики загружать.

    Хотя бы, «да» или «нет», «возможно» или «невозможно». Спасибо!

    • kuroikaze85 permalink

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

      Про скрипт норвежца тоже не уверен. Для модальных окон можно использовать Thickbox. WordPress вроде как жаловаться не должен, ему всё равно как ссылки в JS обрабатываются. Видеоролики в Thickbox загружать можно.

  2. Oleg permalink

    Есть ещё способ с подключением js скрипта на каждый запрос, например для него сделан userapi контакта

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: