Года полтора назад встала проблема в динамическом генерировании HTML кода. Отстраивать HTML посредством DOM слишком громоздко и код получается большой, подгружать сгенерированный HTML на сервере, не очень красивое и харкодное решение.
Было принято решение искать альтернативный способ генерации HTML.
И оно было найдено: AJAX + XML + XSLT.
НА стороне сервера лежит XSLT шаблон, скрипт который генерирует XML (или XML файл). НА стороне клиента посредством AJAX загружается XML и XSLT и преобразуется в HTML
Пример использования:
myDiv — элемент в который будет вставлен наш HTML
callback — функция обратного вызова, которая отработает после загрузки контента.
Плюсы: Минимализация загружаемых данных с сервера, разгрузка сервера при генерации HTML, в данном случае эта операции перекладывается на компьютер клиента.
Минусы данного метода: некорректно работает в браузерах Опера и Сафари при парсинге XSLT шаблонов содержищие сложные инструкции типа for-each
Ну и сам код который реализует эту связку:
Было принято решение искать альтернативный способ генерации HTML.
И оно было найдено: AJAX + XML + XSLT.
НА стороне сервера лежит XSLT шаблон, скрипт который генерирует XML (или XML файл). НА стороне клиента посредством AJAX загружается XML и XSLT и преобразуется в HTML
Пример использования:
- 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 — элемент в который будет вставлен наш HTML
callback — функция обратного вызова, которая отработает после загрузки контента.
Плюсы: Минимализация загружаемых данных с сервера, разгрузка сервера при генерации HTML, в данном случае эта операции перекладывается на компьютер клиента.
Минусы данного метода: некорректно работает в браузерах Опера и Сафари при парсинге XSLT шаблонов содержищие сложные инструкции типа for-each
Ну и сам код который реализует эту связку:
- function getXmlHttpRequestObject() {
- if (window.XMLHttpRequest) {
- try {
- var receiveReq = new XMLHttpRequest();
- } catch (e){}
- } else if (window.ActiveXObject) {
- var xmlHttpVers = new Array('Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP','Microsoft.XMLHTTP');
- for(var i = 0; i < xmlHttpVers.length && !receiveReq; i++){
- try{
- var receiveReq = new ActiveXObject(xmlHttpVers[i]);
- }catch(e){}
- }
- }
- return receiveReq;
- }
-
- function __callXmlHttprequest(r, f){
- if(r.readyState == 4 && r.status == 200){
- f(r);
- }
- }
-
- function getReceive(url, funcCallback, l){
- if(!l){
- l = true;
- }
- var xmlHttp = getXmlHttpRequestObject();
- if(!xmlHttp){
- return;
- }
- if(funcCallback){
- xmlHttp.onreadystatechange = function(){
- __callXmlHttprequest(xmlHttp, funcCallback);
- };
- }else{
- xmlHttp.onreadystatechange = function(){};
- }
- xmlHttp.open("GET", url, l);
- xmlHttp.send(null);
- }
-
- var Browser = {
- IE: !!(window.attachEvent && !window.opera),
- Opera: !!window.opera,
- Khtml: navigator.userAgent.indexOf('AppleWebKit/') > -1,
- Gecko: navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1
- }
-
- function xsltLoad(xmlFile, xsltFile, elementId, _call){
- var method;
- var postData;
- var stylesheetDoc;
- var xmldoc, xsldoc;
-
- this.createMSDOM = function(){
- var msdom;
- var v = new Array("Msxml2.DOMDocument.6.0","Msxml2.DOMDocument.5.0","Msxml2.DOMDocument.4.0");
- for (var i=0; i< v.length && !msdom; i++) {
- try {
- msdom = new ActiveXObject(v[i]);
- } catch (e) {}
- }
- return msdom;
- }
-
- this.init = function(){
- if(Browser.IE){
- xmldoc = new ActiveXObject("Microsoft.XMLDOM");
- xmldoc.async = false;
- xmldoc.load(xmlFile);
-
- xsldoc = new ActiveXObject("Microsoft.XMLDOM");
- xsldoc.async = false;
- xsldoc.load(xsltFile);
- document.getElementById(elementId).innerHTML = xmldoc.transformNode(xsldoc);
- if(_call){
- _call();
- }
- }else{
- this.loadStylesheet();
- this.loadXMLFile();
- return;
- }
- }
- this.callBack = function(r){
- try{
- var dp = new DOMParser();
- stylesheetDoc = dp.parseFromString(r.responseText, "text/xml");
- }catch(e){
- alert(e)
- }
- }
-
- this.loadStylesheet = function(){
- getReceive(xsltFile+"?"+randomNumber(1,999999), this.callBack, false);
- }
-
- this.loadXMLFile = function(){
- if(!method){
- getReceive(xmlFile, this.buildHTML);
- }else{
- getReceive(xmlFile, encodeURIComponent(this.postData), this.buildHTML);
- }
- }
-
- this.buildHTML = function(r){
- xmlResponse = r.responseXML;
- try{
- var xsltProcessor = new XSLTProcessor();
- xsltProcessor.importStylesheet(stylesheetDoc);
- page = xsltProcessor.transformToFragment(xmlResponse, document);
- var e = document.getElementById(elementId);
- e.innerHTML = "";
- e.appendChild(page);
- stylesheetDoc = null;
- xsltProcessor = null;
- }catch(e2){
- alert(e2.message);
- }
- if(_call){
- _call();
- }
- }
- }
* This source code was highlighted with Source Code Highlighter.