Кроссбраузерное XSLT-преобразование в JavaScript

Автор: Вячеслав Гринин | веб-программирование | 25 Окт 2009 3:00 пп

Столкнулся я однажды с необходимостью отобразить XML-данные погодного информера gismeteo посредством XSLT-шаблона. Причем возникла острая необходимость сделать это через JavaScript, так как на предлагаемом бесплатном хостинге не было поддержки PHP, а значит отпарсить XML на сервере не представлялось возможным.

В результате этой острой необходимости родился код на JavaScript, который я и предлагаю на ваше рассмотрение.

function transformXslt(source,style) {
    if(window.ActiveXObject)
    {
        return source.transformNode(style);
    }
    else if(window.XSLTProcessor)
    {
        var xsltProcessor=new XSLTProcessor();
        xsltProcessor.importStylesheet(style);
        var resultDocument = xsltProcessor.transformToDocument(source);
        var xmls = new XMLSerializer();
        return xmls.serializeToString(resultDocument);
    }
    else
    {
        alert("Преобразование XML не поддерживается браузером");
        return null;
    }
}

Что мы здесь видим?

А видим мы здесь кроссбраузерное решение данной задачи. XSLT-преобразование в IE производится посредством метода transformNode XML-документа. Во всех остальных браузерах(FF, Chrome, Safari, Opera) XSLT-преобразование делается совсем по-другому. И делается оно посредством объекта XSLTProcessor, в который методом importStylesheet загружается файл стилей XSLT, а результирующий документ генерируется методом transformToDocument(xml). И напоследок мы поручим объекту XMLSerializer сгенерить строковое представление результирующего XML-документа.

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

function getXMLFromString(s) {
    if(window.ActiveXObject)
    {
        var xml;
        xml=new ActiveXObject("Microsoft.XMLDOM");
        xml.async=false;
        xml.loadXML(s);
        return xml;
    }
    else if(window.DOMParser)
    {
      var parser = new DOMParser();
      return parser.parseFromString(s,'text/xml');
    }
    else
    {
        alert("Загрузка XML не поддерживается браузером");
        return null;
    }
}

Этот код я собираюсь оставить без комментариев, так как в нем и так все понятно. :)

Скачать файл с этими функциями вы можете здесь

Прочтите еще:

Кросдоменный JavaScript (JSONP)

Автор: Вячеслав Гринин | веб-программирование | 10 Окт 2009 4:41 пп

Итак, мы уже научились использовать объект XMLHttpRequest для фоновой загрузки данных с сервера, этот подход подробно описан в статье AJAX. 1 – Что это такое?. Однако, приведенный метод обладает одним недостатком – он не позволяет делать кроссдоменные запросы, то есть скрипт расположенный на домене easy4web.ru не может обратиться к домену vision4web.ru, а иногда этого так хочется. И здесь нам на помощь придет метод динамически подгружаемых скриптов <SCRIPT>.

Как известно, HTML-элемент <SCRIPT> может загружаться и с чужого домена, то есть аттрибут src у него может указывать вообще на любой домен. При этом, сразу после загрузки в нашу страницу, скрипт начнет выполняться. Таким образом, вставив в этот скрипт вызов некой заранее известной функции, мы можем организовать оповещение страницы о том, что скрипт загружен и готов к выполнению работы. А данные для для скрипта можно упаковать в пакет JSON. Такой комбинированный подход носит имя JSONP (JSON with padding).

На клиентской стороне мы выполняем такой код:

  var script = document.createElement("script");
  script.src = 'http://mydomain.ru/script.php?callback=func1';
  script.type = 'text/javascript';
  document.body.appendChild(script);

А по адресу  http://mydomain.ru/script.php поселим вот такой код:

<?php
echo($_REQUEST['callback'].'({"result":"Успешно!"})');
?>

На клиентской стороне также существует такой callback (то есть функция, которая сработает после загрузки скрипта):

function func1(response)
{
  alert(response.result);
}

Протестировать рабочий пример можно здесь: http://easy4web.ru/samples/jsonp/index.html, а скачать код вышеприведенного примера можно здесь: http://easy4web.ru/images/jsonp.zip

В тестовом примере, как можно увидеть, не происходит кроссдоменной загрузки – мы загружаем с того же домена, где расположен скрипт. Но вы можете заменить URL в этом месте кода:

<input type="button" value="Получить JSONP"
 onclick="getJSONP('http://easy4web.ru/samples/jsonp/handler.php',onSuccess)"/>

на ваш собственный или на наш тестовый handler, расположенный на другом домене, (вот здесь http://vision4web.ru/api/handler.php) и убедиться в том, что кроссдоменная загрузка прекрасно работает.

Ниже приведен скриншот сетевого взаимодействия:
screen

Как видно, при нажатии на кнопку “Получить JSONP” происходит создание элемента <SCRIPT> с атрибутом src=http://easy4web.ru/samples/jsonp/handler.php, при этом браузер тут же начинает загружать этот скрипт с удаленного сервера. А загруженный скрипт представляет собой вызов функции onSuccess() с параметром {”result”:”Успешно!”}. После загрузки скрипта он тут же начинает выполняться, тем самым выполняя функцию OnSuccess, которая, получив в качестве аргумента JSON-объект, обрабатывает его и совершает все необходимые действия, обусловленные логикой приложения.

Этот подход я собираюсь использовать при реализации многих полезных сервисов в рамках проекта easyAPI.

Прочтите еще:

Начинаем создавать набор сервисов easyAPI

Автор: Вячеслав Гринин | веб-мастеру | 09 Окт 2009 9:00 пп

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

Собственно, этой статьей я начинаю публикацию на нашем ресурсе сервисов под общим названием easyAPI.

Что это будет?

EasyAPI это по большей части JavaScript-библиотеки, реализующие ту или иную функциональность, я пока до конца не знаю, какие именно сервисы я буду предоставлять и в каком виде. Но точно знаю, что эти сервисы помогут, например, владельцу сайта, поднятого на бесплатном хостинге, отобразить погодный информер, настроенный полностью под требования веб-мастера. Или, например, позволят определить географию посетителей определенного сайта и отобразить ее на карте страны. Или, например, отобразить посетителю сайта погодный информер именно его города. И все это, повторюсь, чаще всего будет возможно даже на хостинге без поддержки PHP.

Короче говоря, от слов к делу!

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

Он живет здесь http://easy4web.ru/api/geoip/get.php

Поддерживаемые параметры:
p – формат отдаваемых данных:

  • p=j – результат – JSON
  • p=a – результат – массив вида cc2=RU;cc3=RUS;cty=Moskow
  • p=x – результат – XML
  • p=ax – результат – массив обернутый в XML, вида <easy>cc2=RU;cc3=RUS;cty=Moskow</easy>
  • p=jx – результат – JSON обернутый в XML, вида <easy>cc2=RU;cc3=RUS;cty=Moskow</easy>

f – длина имен полей:

  • f=f – длинные имена, вида country_code
  • f=s – короткие имена, вида cc2

ip – IP-адрес, если он не задан, то в качестве адреса берутся координаты сервера, с которого пришел запрос REMOTE_ADDR.

s – кодировка(charset) отдаваемых данных.
Например s=koi8-r или s=utf-8, по умолчанию считается s=windows-1251.

Если я желаю получить информацию по собственному местоположению в формате JSON с длинными именами полей, я вызову URL http://easy4web.ru/api/geoip/get.php?p=j&f=f

В следующей статье на эту тему я расскажу о том, как можно применить данный сервис при вызове его из PHP-программы, и из JavaScript на удаленном сервере. Пока сервис easy.GeoIP находится в стадии тестирования, возможны некоторые изменения в его работе, о которых я буду предупреждать на сайте.

Сервис переехал на другой адрес. Теперь он живет здесь http://easyapi.ru/geoip/get.php

Добавился новый параметр c-коллбэк. Применяется только в режиме p=j/. Таким образом, вызвав http://easyapi.ru/geoip/get.php?p=j&c=onGet, мы получим пакет вида:

onGet('{"country_code":"RU","country_code3":"RUS","country_name":
"Russian Federation","region":48,"city":"Moscow",
"latitude":55.7522,"longitude":37.6156}');

Добавил поля error, country_name_ru, city_ru (их краткие эквиваленты: err, cnr, ctr). Возвращают описание ошибки, название страны на русском языке, название города на русском языке. также добавил возврат заголовка charset=utf-8, и указал заголовок кодировки и версии xml. Результат выложен по адресу: http://easyapi.ru/geoip/get1.php, после тестирования он перейдет в официальную версию. Особенно интересно, чтобы его протестировали те, кто уже пользуется этим сервисом без улучшений.

Исправил проблему с кодировками. Добавил во входные параметры требуемую кодировку, она теперь задается параметром s, например s=utf-8. По умолчанию считается charset=windows-1251. Ликвидировал тестовый хэндлер get1.php, все изменения внес в get.php после собственного тестирования. Скоро будет статья на тему того, как все это использовать в PHP и JavaScript.

Прочтите еще: