Возможно, вам лучше разрешить браузеру выполнить преобразование, используя метод, описанный Xenan.Тем не менее, это вполне возможно сделать и в JavaScript.Вот схема того, как вы могли бы сделать это кросс-браузерным способом.
Во-первых, вам нужно будет загрузить XML и XSL.Есть много способов сделать это.Обычно, это будет включать в себя какой-то AJAX, но не обязательно.Чтобы этот ответ был простым, я предполагаю, что вы рассмотрели эту часть, но, пожалуйста, дайте мне знать, если вам нужна дополнительная помощь, и я отредактирую, чтобы включить пример загрузки XML.
Поэтому, давайте предположим, что мыимеют следующие объекты:
var xml, xsl;
Где xml
содержит структуру XML, а xsl
содержит таблицу стилей, с которой вы хотите преобразовать.
Редактировать:
Если вам нужно загрузить эти объекты, вы в конечном итоге будете использовать какую-то форму AJAX для этого.Существует множество примеров кросс-браузерного AJAX.Вам будет лучше использовать библиотеку для достижения этой цели, а не использовать собственное решение.Я предлагаю вам изучить jquery или YUI, которые отлично справляются с этой задачей.
Однако основная идея довольно проста.Чтобы завершить этот ответ, вот некоторый не специфичный для библиотеки код, который выполняет это кросс-браузерным способом:
function loadXML(path, callback) {
var request;
// Create a request object. Try Mozilla / Safari method first.
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
// If that doesn't work, try IE methods.
} else if (window.ActiveXObject) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
}
}
}
// If we couldn't make one, abort.
if (!request) {
window.alert("No ajax support.");
return false;
}
// Upon completion of the request, execute the callback.
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
callback(request.responseXML);
} else {
window.alert("Could not load " + path);
}
}
};
request.open("GET", path);
request.send();
}
Вы могли бы использовать этот код, указав ему путь к вашему XML и функцию длявыполнить после завершения загрузки:
loadXML('/path/to/your/xml.xml', function (xml) {
// xml contains the desired xml document.
// do something useful with it!
});
Я обновил свой пример, чтобы показать эту технику.Вы можете найти рабочий демонстрационный код здесь .
Чтобы выполнить преобразование, вы получите третий XML-документ, который является результатом этого преобразования.Если вы работаете с IE, вы используете метод " transformNodeToObject ", а если вы работаете с другими браузерами, вы используете метод " transformToDocument ":
var result;
// IE method
if (window.ActiveXObject) {
result = new ActiveXObject("MSXML2.DOMDocument");
xml.transformNodeToObject(xsl, result);
// Other browsers
} else {
result = new XSLTProcessor();
result.importStylesheet(xsl);
result = result.transformToDocument(xml);
}
На этом этапе result
должно содержать результирующее преобразование.Это все еще документ XML, и вы должны относиться к нему как к такому.Если вам нужна строка, которую вы можете передать в document.write
или innerHTML
, у вас есть немного больше работы.
Еще раз, есть метод IE для этого и метод, который применяется кдругие браузеры.
var x, ser, s = '';
// IE method.
if (result.childNodes[0] && result.childNodes[0].xml) {
for (x = 0; x < result.childNodes.length; x += 1) {
s += result.childNodes[x].xml;
}
// Other browsers
} else {
ser = new XMLSerializer();
for (x = 0; x < result.childNodes.length; x += 1) {
s += ser.serializeToString(result.childNodes[x]);
}
}
Теперь s
должен содержать полученный XML-код в виде строки.Вы должны быть в состоянии передать это в document.write или innerHTML и сделать что-то полезное.Обратите внимание, что он может содержать декларацию XML, которую вы, возможно, захотите удалить или нет.
Я проверял это в Chrome, IE9 и FF4.Вы можете найти упрощенный рабочий пример этого на моем тестовом стенде .
Удачи и удачного кодирования!