Основы AJAX: Передача данных с помощью элементов <script> (+JSONP)

Сентябрь 9, 2007 – 21:44

В данном цикле статей мы рассматриваем три базовых функциональных элемента, на которых основано большинство AJAX-приложений:

В настоящей статье мы также даем краткий обзор концепции JSON/JSONP.

Передача данных с помощью элементов <script>

Следует признать, что данный AJAX-метод является самым лаконичным на стороне клиента. Кроме того, по сравнению с методами XMLHttpRequest/IFRAME он имеет одно важное преимущество: AJAX-запросы можно направлять не только к собственному, но и к чужим серверам. Это преимущество, правда, может обернуться существенным недостатком, если вы обеспокоены вопросами безопасности и не хотите, чтобы к вашему серверу обращались пользователи других серверов. Если же вы наоборот хотите разместить этим способом у себя на странице чужой AJAX-виджет, также будьте бдительны: выбранный вами AJAX-провайдер сможет в любой момент внедрить на вашу страницу любой (в том числе вредоносный) код. Например, подсматривающий пароли ваших пользователей… В общем, подходить к использованию данного метода следует с осторожностью, осознавая все плюсы и минусы.

В своей основе метод прост до боли (проверено в IE 6, IE 7, FF 2, Opera 9):

function callServer() {
  var script = document.createElement("script");
  script.src = 'http://domain.ru/dynamicDataScript.php';
  script.type = 'text/javascript';
  document.body.appendChild(script);
}

Серверный скрипт dynamicData.php возвращает код JavaScript, который незамедлительно выполняется в браузере клиента. Данный код может, например, как минимум, загрузить в переменные (var) новые значения, как максимум - полностью перерисовать веб-страницу. Единственное, что он не может делать, это использовать функцию document.write() для вставки HTML-кода (данная функция доступна только при первичной загрузке страницы). Ограничение весьма условное, так как все то же самое можно реализовать через DOM и/или innerHTML.

Вся эта гибкость, конечно же, кажется нам чрезмерной - хочется как-то ситематизировать процесс, ввести ряд ограничений, хотя бы на уровне договоренностей. Во-первых, стоит договориться о том, что никаких операций со страницей серверный JavaScript-код не производит, а лишь передает данные (это будет полезным и с точки зрения его переиспользования на других страницах сайта). В связи с этим весьма полезным представляется набор соглашений JSON (JavaScript Object Notation) по представлению данных в формате, удобном для обработки интерпретатором JavaScript.

JSON (JavaScript Object Notation)

По сути, JSON - это JavaScript-код, описывающий некую структуру данных. В нем используются две основные синтаксические конструкции:

// объявление массива:
var array = [ v1, v2, ... ];
// объявление ассоциативного массива:
var hash = { "key1" : v1, "key2" : v2, ... };

С их помощью можно описать структуру данных произвольной сложности. Например:

{
    "firstName": "Иван",
    "lastName": "Федоров",
    "address": {
        "street": "Ордынка",
        "city": "Москва",
        "postalCode": 127327
    },
    "phoneNumbers": [
        "495 765-1234",
        "916 123-4567"
    ]
}

Если предположить, что вышеприведенный текст находится в переменной JSON_text, то работать в JavaScript с ним становится очень удобно:

var p = eval("(" + JSON_text + ")");

div.innerHTML = p.firstName+" "+p.lastName+" живет в городе "+p.address.city;

Просто несравнимо по удобству с манипулированием моделью XML/DOM!

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

Для построения законченного AJAX-приложения нам не хватает лишь одного - уведомления клиента о том, что процесс загрузки данных завершен. Сам по себе JSON такой возможности не предоставляет. Можно конечно грузить JSON-данные через XMLHttpRequest.responseText, используя все возможности последнего по контролю за завершением соединения, однако, это не есть тема нашей статьи.

JSONP: JSON With Padding

Для устранения указанного выше недостатка была предложена концепция JSONP (JSON With Padding). Она состоит в том, что в запрос к серверу добавляется параметр callback, в котором клиент указывает имя функции, которую необходимо вызвать для обработки данных. Для иллюстрации приведем простой серверный PHP-скрипт (sample_ajax_script_json.php), возвращающий данные в формате JSONP:

<?php echo($_REQUEST['callback']
.'({"result":"Данные из файла sample_ajax_script_json.php"})'); ?>

Если обратиться к скрипту с запросом: sample_ajax_script_json.php?callback=onComplete123, в ответ мы получим строку:

onComplete123({"result":"Данные из файла sample_ajax_script_json.php"})

Нам остается лишь обеспечить наличие функции onComplete123(), которая отобразит результат запроса.

Теперь постараемся сделать нашу AJAX-систему универсальной:

// в ассоциативном массиве callbacks мы будем динамически
// создавать и хранить до завершения запроса все
// callback-функции (ведь AJAX-запросы могут поступать
// одновременно от разных компонент на веб-странице)

var callbacks=new Object();

function callJSONP(url, func, arg) {
  var cbId;
  // генерируем уникальный callback-id:
  do cbId = 'c' + Math.floor(Math.random() * 99999); while (callbacks[cbId]);
  // создаем callback-функцию для данного запроса:
  callbacks[cbId] = function(obj) { func(arg, obj); delete callbacks[cbId]; };
  // создаем элемент <script>:
  var script = document.createElement('script');
  // сообщаем серверу имя нашей функции:
  script.src = url+(url.indexOf('?')>=0 ? '&' : '?')+'callback=callbacks.'+cbId;
  script.type = 'text/javascript';
  // делаем запрос к серверу:
  document.body.appendChild(script);
}

Полученную функцию callJSONP() следует вызывать со следующими аргументами:

  • url - ссылка на серверный AJAX-скрипт, возвращающий данные в формате JSONP; в ссылку необходимо включить все параметры запроса (метод POST в случае с элементом <script> неприменим);
  • func - функция для обработки результата (например, отображения данных); функция будет вызвана с двумя параметрами: func(arg, obj):
  • arg - пользовательский аргумент (например, идентификатор элемента страницы, который следует обновить), который будет передан без изменения в функцию func();
  • obj - объект JSON, подлежащий обработке.

В заключение приведем пример использования:

<script type="text/javascript">

// ... сюда необходимо скопировать вышеописанную функцию callJSONP() ...

function showHTML(element, responseObject) {
  if (typeof(element)=="string") element=document.getElementById(element);
  element.innerHTML=responseObject.result;
}

</script>

<input type="button" value="Загрузить!"
 onclick="callJSONP('sample_ajax_script_json.php',showHTML,'targetDiv')"/>
<div id="targetDiv">Здесь появится
 результат вызова sample_ajax_script_json.php</div>

Ссылка на работающий пример: sample_ajax_script.htm

Со стороны сервера работа нашего примера будет выглядеть примерно так:

<< (запрос к серверу)
>> (ответ сервера)

<< GET /samples/sample_ajax_script_json.php?callback=callbacks.c23456
>> callbacks.c23456({"result":"Данные из файла sample_ajax_script_json.php"})

<< GET /samples/sample_ajax_script_json.php?callback=callbacks.c87654
>> callbacks.c87654({"result":"Данные из файла sample_ajax_script_json.php"})

Будем рады вашим вопросам и/или комментариям к данной статье!

  1. Комментарии (3) к статье “Основы AJAX: Передача данных с помощью элементов <script> (+JSONP)”

  2. Сен 19, 2007. От MurZilla.

    Для Java ответ сервлета будет выглядеть примерно так
    out.println(
    request.getParameter(”callback”)
    +”({\”result\”:\”"
    +”Hello World!”
    +”\”})”
    );

  1. 2 Trackback(s)

  2. Сен 9, 2007: WEB-TEC.info » Blog Archive » Основы AJAX: Передача данных с помощью IFRAME
  3. Сен 9, 2007: WEB-TEC.info » Blog Archive » Основы AJAX: Передача данных с помощью XMLHttpRequest

Необходимо войти, чтобы оставить комментарий.