Кроссдоменный запрос JSON

Многие из вас для написание своих проектов используют ajax запросы. Это удобно, экономит трафик и время на загрузку страниц. Если получать данные через json то экономия трафика будет еще явно заметна. Сам по себе аякс запрос-ответ не представляет никакой сложности и легко осуществим. Другое дело если мы имеем дело с кроссдоменным запросом. Это когда запрос с домена site.ru выполняется на домен site2.ru . Обычным способом выполнить его не удастся. На помощь приходит JSONP.

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

Пример:

$.ajax({
    url: 'http://nizami.lk/mini.php?callback=?',
    dataType: 'jsonp',
	timeout: 60000,
	cache: false,
	data: {	
	myrequest: "переданное значение",
	},
	success: function(data){
		alert("Ok");
	}	
});

ответ на такой запрос должен выглядеть так:
jQuery16209245540534611791_1348553792534({«code»:2,»place»:»6-3″});

Это обычный json, переданный как аргумент функции jQuery16209245540534611791_1348553792534, название которой сгенерировал при отправке сам jquery.

Код php для обработки запроса и выдачи ответа должен выглядеть следующим образом:


// элементы массива которые будут преобразованы в jsonp
$data['code'] = 1;
$data['place'] = 5;

$callback=$_REQUEST['callback'];

print "$callback(".json_encode($data).");";

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

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

Если вы выполняете несколько запросов jsonp используйте случайно генерируемые названия callback функций, иначе вы получите ошибку что функция callback не определена. Например такую:

Uncaught ReferenceError: my_callback_func6 is not defined

Если же вы получаете сообщение что передан неверный заголовок, что получены данные javascript а тип их html, то необходимо явным образом передать заголовок: application/json

header(‘Content-Type: application/json; charset=UTF-8’);

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