AJAX + XML + XSLT or a new lookup on AJAX

A year and a half ago, there was a problem in dynamically generating HTML code. To rebuild HTML using DOM is too cumbersome and the code turns out to be big, loading the generated HTML on the server is not a very nice and harsh solution.
It was decided to look for an alternative way to generate HTML.
And it was found: AJAX + XML + XSLT.
On the server side is the XSLT template, the script that generates the XML (or XML file). On the client side via AJAX, XML and XSLT are loaded and converted to HTML

Example of use:

function getContent(){ try { var xslt = new xsltLoad( "http://" +location.hostname+ "/content.xml, "http: //"+location.hostname+"/template.xsl", "myDiv", callback); xslt.init(); } catch (e){ alert(e.message) } } * This source code was highlighted with Source Code Highlighter .

1. function getContent(){ try { var xslt = new xsltLoad( "http://" +location.hostname+ "/content.xml, "http: //"+location.hostname+"/template.xsl", "myDiv", callback); xslt.init(); } catch (e){ alert(e.message) } } * This source code was highlighted with Source Code Highlighter .
2. function getContent(){ try { var xslt = new xsltLoad( "http://" +location.hostname+ "/content.xml, "http: //"+location.hostname+"/template.xsl", "myDiv", callback); xslt.init(); } catch (e){ alert(e.message) } } * This source code was highlighted with Source Code Highlighter .
3. function getContent(){ try { var xslt = new xsltLoad( "http://" +location.hostname+ "/content.xml, "http: //"+location.hostname+"/template.xsl", "myDiv", callback); xslt.init(); } catch (e){ alert(e.message) } } * This source code was highlighted with Source Code Highlighter .
4. function getContent(){ try { var xslt = new xsltLoad( "http://" +location.hostname+ "/content.xml, "http: //"+location.hostname+"/template.xsl", "myDiv", callback); xslt.init(); } catch (e){ alert(e.message) } } * This source code was highlighted with Source Code Highlighter .
5. function getContent(){ try { var xslt = new xsltLoad( "http://" +location.hostname+ "/content.xml, "http: //"+location.hostname+"/template.xsl", "myDiv", callback); xslt.init(); } catch (e){ alert(e.message) } } * This source code was highlighted with Source Code Highlighter .
6. function getContent(){ try { var xslt = new xsltLoad( "http://" +location.hostname+ "/content.xml, "http: //"+location.hostname+"/template.xsl", "myDiv", callback); xslt.init(); } catch (e){ alert(e.message) } } * This source code was highlighted with Source Code Highlighter .
7. function getContent(){ try { var xslt = new xsltLoad( "http://" +location.hostname+ "/content.xml, "http: //"+location.hostname+"/template.xsl", "myDiv", callback); xslt.init(); } catch (e){ alert(e.message) } } * This source code was highlighted with Source Code Highlighter .
8. function getContent(){ try { var xslt = new xsltLoad( "http://" +location.hostname+ "/content.xml, "http: //"+location.hostname+"/template.xsl", "myDiv", callback); xslt.init(); } catch (e){ alert(e.message) } } * This source code was highlighted with Source Code Highlighter .

function getContent(){ try { var xslt = new xsltLoad( "http://" +location.hostname+ "/content.xml, "http: //"+location.hostname+"/template.xsl", "myDiv", callback); xslt.init(); } catch (e){ alert(e.message) } } * This source code was highlighted with Source Code Highlighter .

myDiv - the element into which our HTML will be inserted
callback is a callback function that will work after the content is loaded.
Pros: Minimizing the download data from the server, unloading the server when generating HTML, in this case, this operation is transferred to the client's computer.
Disadvantages of this method: it does not work correctly in Opera and Safari browsers when parsing XSLT templates containing complex for-each instructions

Well, the code itself that implements this bundle:

1. function getXmlHttpRequestObject () {
2. if (window.XMLHttpRequest) {
3. try {
4. var receiveReq = new XMLHttpRequest ();
5. } catch (e) {}
6. } else if (window.ActiveXObject) {
7. var xmlHttpVers = new Array ( 'Msxml2.XMLHTTP.6.0' , 'Msxml2.XMLHTTP.5.0' , 'Msxml2.2.XMLHTTP.4.0' , 'Msxml2.XMLHTTP.3.0' , 'Msxml2.XMLHTTP' , 'Microsoft.XMLHTTP' ) ;
8. for ( var i = 0; i <xmlHttpVers.length &&! receiveReq; i ++) {
9. try {
10. var receiveReq = new ActiveXObject (xmlHttpVers [i]);
11. } catch (e) {}
12. }
13. }
14. return receiveReq;
15. }
17. function __callXmlHttprequest (r, f) {
18. if (r.readyState == 4 && r.status == 200) {
19. f (r);
20. }
21. }
23. function getReceive (url, funcCallback, l) {
24. if (! l) {
25. l = true ;
26. }
27. var xmlHttp = getXmlHttpRequestObject ();
28. if (! xmlHttp) {
29. return ;
30. }
31. if (funcCallback) {
32. xmlHttp.onreadystatechange = function () {
33. __callXmlHttprequest (xmlHttp, funcCallback);
34. };
35. } else {
36. xmlHttp.onreadystatechange = function () {};
37. }
38. xmlHttp.open ( "GET" , url, l);
39. xmlHttp.send ( null );
40. }
42. var Browser = {
43. IE: !! (window.attachEvent &&! Window.opera),
44. Opera: !! window.opera,
45. Khtml: navigator.userAgent.indexOf ( 'AppleWebKit /' )> -1,
46. Gecko: navigator.userAgent.indexOf ( 'Gecko' )> -1 && navigator.userAgent.indexOf ( 'KHTML' ) == -1
47. }
49. function xsltLoad (xmlFile, xsltFile, elementId, _call) {
50. var method;
51. var postData;
52. var stylesheetDoc;
53. var xmldoc, xsldoc;
55. this .createMSDOM = function () {
56. var msdom;
57. var v = new Array ( "Msxml2.DOMDocument.6.0" , "Msxml2.DOMDocument.5.0" , "Msxml2.DOMDocument.4.0" );
58. for ( var i = 0; i <v.length &&! msdom; i ++) {
59. try {
60. msdom = new ActiveXObject (v [i]);
61. } catch (e) {}
62. }
63. return msdom;
64. }
66. this .init = function () {
67. if (Browser.IE) {
68. xmldoc = new ActiveXObject ( "Microsoft.XMLDOM" );
69. xmldoc.async = false ;
70. xmldoc.load (xmlFile);
72. xsldoc = new ActiveXObject ( "Microsoft.XMLDOM" );
73. xsldoc.async = false ;
74. xsldoc.load (xsltFile);
75. document .getElementById (elementId) .innerHTML = xmldoc.transformNode (xsldoc);
76. if (_call) {
77. _call ();
78. }
79. } else {
80. this .loadStylesheet ();
81. this .loadXMLFile ();
82. return ;
83. }
84. }
85. this .callBack = function (r) {
86. try {
87. var dp = new DOMParser ();
88. stylesheetDoc = dp.parseFromString (r.responseText, "text / xml" );
89. } catch (e) {
90. alert (e)
91. }
92. }
94. this .loadStylesheet = function () {
95. getReceive (xsltFile + "?" + randomNumber (1.999999), this .callBack, false );
96. }
98. this .loadXMLFile = function () {
99. if (! method) {
100. getReceive (xmlFile, this .buildHTML);
101. } else {
102. getReceive (xmlFile, encodeURIComponent ( this .postData), this .buildHTML);
103. }
104. }
106. this .buildHTML = function (r) {
107. xmlResponse = r.responseXML;
108. try {
109. var xsltProcessor = new XSLTProcessor ();
110. xsltProcessor.importStylesheet (stylesheetDoc);
111. page = xsltProcessor.transformToFragment (xmlResponse, document );
112. var e = document .getElementById (elementId);
113. e.innerHTML = "" ;
114. e.appendChild (page);
115. stylesheetDoc = null ;
116. xsltProcessor = null ;
117. } catch (e2) {
118. alert (e2.message);
119. }
120. if (_call) {
121. _call ();
122. }
123. }
124. }

* This source code was highlighted with Source Code Highlighter .