Transformação XSL de XML via jQuery

Publicado por em Programação [Dez 06 2010]


Desde que descobri a existência de arquivos XSL(T) sempre adorei poder fazer a integração apenas uma vez e a integração com o sistema. Deixando para mais tarde a integração com o layout, ou mesmo a mudança de layout é bastante simplificada tendo em conta que não é preciso entender o que ifs e fors fazem em cada contexto. Mesmo que bem comentado sempre dá algum trabalho.
Lógicamente também é bem facilitada a alteração de layout.

Maaas, e quando você tem um XML para ser requisitado e inserido via ajax no HTML já formatado? O trabalho que se tem fazendo o javascript interpretar o XML seria impressionantemente desnecessário se possível usar XSL, e advinhe só? É possível!
A minha solução é essa, um plugin de jQuery bem simples de usar.

O arquivo jquery.woh_xslt.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

;(function($){
/*******************************************************************************************/
// jquery.woh_xslt.js - version 0.1

// A jQuery plugin for ajax XML+XSLT integration on XHTML Documents

//

// Copyright (c) 2010, William Ochetski Hellas (http://ligona.org)

// Liscensed under the MIT License (MIT-LICENSE.txt)

// http://www.opensource.org/licenses/mit-license.php

// Created: 2010-05-08 | Updated: 2010-05-08

/*******************************************************************************************/
$.fn.woh_xslt = function(options){
// Setup default option values

var defaults = {
xml : null,
xsl : null
};
var options = $.extend(defaults, options);
// Helpers values

var _$meta;
var $page_container;
return this.each(function(){
$page_container = $(this);
_$meta = $page_container;
// Initialise meta data


if(options.xml === null || options.xsl === null)
return false;
var _returned = '';
_returned = _woh_xslt_result();
// loop for damn IE bug

while(_returned == '')
continue;
$page_container.html(_returned);
});
function _woh_xslt_load(file_name)
{
if(window.XMLHttpRequest)
{
var _xhttp = new XMLHttpRequest();
}
else
{
var _xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
_xhttp.open("GET", arguments[0], false);
_xhttp.send("");
return _xhttp.responseXML;
};
function _woh_xslt_result()
{
var _xml = _woh_xslt_load(options.xml);
var _xsl = _woh_xslt_load(options.xsl);
// code for Mozilla, Firefox, Opera, etc.

if(document.implementation && document.implementation.createDocument)
{
var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(_xsl);
return xsltProcessor.transformToFragment(_xml, document);
}
// code for damn IE

else if(window.ActiveXObject)
{
return _xml.transformNode(_xsl);
}
};
};
})(jQuery);

O método de uso é o seguinte:

1
2
3
4
5
6
7
8
9

<script type="text/javascript">// <![CDATA[

$(function(){
	$('#selector').woh_xslt({xml:'file.xml', xsl:'file.xsl'});
});
// ]]></script>

Este código vai carregar o file.xml e o file.xsl via ajax e transformar os dados do XML. Assim que a transformação estiver terminada incluirá na parte do HTML selecionada, no exemplo, onde id=’selector’.

Tags: , , , ,

nenhum comentário

Deixar uma resposta