10.06.11

Как вы наверное знаете, в целях безопасности AJAX запрос не может быть направлен на другой домен, а иногда бывает необходимо реализовать такой функционал. В этом случае нам на помощь приходит JSONP и Ext.ux.JSONP.
Суть запроса в формате JSONP в том, что сервер возвращает нам ответ не в виде JSON, а в виде callbackFunction(JSON), где callbackFunction – функция в вашем JS (передается серверу в качестве параметра), а JSON – собственно необходимые данные.
Следует отметить, что сервер должен поддерживать выдачу ответа в формате JSONP.

Для работы с JSONP нам потребуется расширение Ext.ux.JSONP. Доработанное расширение с улучшенной обработкой ошибок можно взять здесь. Это расширение было найдено мной где-то на просторах Интернета.
Теперь рассмотрим как им можно воспользоваться (подключение ExtJS и данного расширения мы оставим за рамками статьи, скажу только что jsonp.js нужно подключать как любой другой JS файл после подключения файлов ExtJS).

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
Ext.ux.JSONP.request({
url: 'http://example.com/example_action',
callbackKey: 'json_callback',
method: 'GET',
params: {
addressdetails: 1,
lat: latitude,
lon: longitude
},
scope: this,
success : requestSuccess,
failure : requestFailure
});

Здесь:

  • url – адрес, на который отправляем запрос
  • callbackKey – параметр запроса, в котором передается callbackFunction (например http://example.com/example_action?json_callback=Ext.ux.JSONP.callback – в данном примере будет именно так)
  • params – прочие параметры запроса
  • scope – область видимости callback функций
  • success – функция, которая будет вызвана в результате удачного запроса
  • failure – функция, которая будет вызвана в результате неудачного запроса

Комментарии

  1. [...] Урок №1 – Введение в ExtJS Урок №2 – Кросс-доменные AJAX запросы [...]

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>