Single page Ajax interface in Domino part 2
As an example, I started building a single page Ajax interface to this blog. The launch page is an XML file, in this case a $$NavigatorTemplate form for a dummy navigator 'ajax'. This form returns XML, which is transformed with an XSL file, stored in a page element: 'ajax.xsl'. I explained this idea in my previous post. You can view the elements:
- The navigator XML
- The XSL file
- The result (work in progress)
The core Ajax library
The single variable G contains a number of shortcuts, useful functions, DOM scripting and cross-browser XML/XSL handling.
The codevar G={w:window,d:document,g:navigator.product=='Gecko',start:new Date().getTime(),
init:function(){for(var n in G)if(G[n].init)G[n].init()},
set:function(a,b){for(var o in b)a[o]=b[o];return a},
next:function(a){setTimeout(a,0)},
time:function(a){return (a||new Date()).getTime()},
put:function(a,b){a.tagName?a:$(a).innerHTML=b.join('\n')},
create:function(a,b,c,d){var o=(d||G.d).createElement(a);G.set(o,b);G.set(o.style,c);return o},
append:function(a,b,c,d){var o=b.tagName?b:G.create(b,c,d);a.appendChild(o)},
_:function(){return G.w.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP')},
get:function(a,b){var o=G._();o.open('GET',a,false);o.send(null);return b?o.responseText:o.responseXML},
xml:function(a){
if(G.g)return new DOMParser().parseFromString(a,'text/xml')
var o=new ActiveXObject('Microsoft.XMLDOM');o.async=false;o.loadXML(a);return o
},
text:function(a,b){
if(G.g){
if(b){var o=new XSLTProcessor();o.importStylesheet(b);a=o.transformToFragment(a,G.d)}
return new XMLSerializer().serializeToString(a)
}
return b?a.transformNode(b):a.xml
}
},
$=function(a,b){return (b||G.d).getElementById(a)},
$$=function(a,b){return (b||G.d).getElementsByTagName(a)}
G.w.onload=G.init
| G.w | Shortcut to the window object. |
| G.d | Shortcut to the document object. |
| G.g | Is true when the browser is Gecko based, e.g. Firefox. |
| G.start | Start time value to see how long it took to render the page. |
| G.init() | This is the function that is executed on page load. It checks if any of its objects contain an .init() function. If so, it is executed. This allows initiating different modules which work together on the page. |
| G.set(object a, object b) | Copies all elements from object b into object a. Useful in many occasions. You can extend a prototype, set html or style attributes, etc. Returns object a. |
| G.next(function a) | Short for setTimeout(a,0) |
| G.time(optional date a) | Returns the timevalue of date a. Without parameter, it returns the timevalue of now. Used in timing. |
| G.put(variant a, array b) | Short for joining an array b and setting the innerHTML of an element with it; parameter a can be an HTML node or an id string. |
| G.create(tagname a, optional attributes b, optional style attributes c, optional document d) | Creates a new node, optionally setting attributes and style attributes. It creates it by default in the current document, but you can create it in another document (XML, iframe) by setting parameter d. Returns the new node. |
| G.append( node a, node b or new node: tagname b, optional attributes c, optional style d) | Can be used in two ways: add an already made node b to node a or create a new one using parameters b, c, d. |
| G._() | Cross browser XMLHttpRequest. |
| G.get(url a, optional boolean b) | Gets a request from url a. If b is true, it returns the responseText, if omitted or false, it returns the responseXML. |
| G.xml(string a) | Returns an XML object created from string a. |
| G.text(XML obj a, optional XSL obj b) | If b omitted, returns a converted to a string. If b, it transforms a with XSL b and returns the result as text. |
| $(id string a, optional document b) | Returns the node with id a. If b is omitted, it looks in the current document. |
| $$(tagName a, optional node b) | Returns an array of elements with tagName a, optional looking only within a node b. If b is omitted, it looks in the current document. |
Next
In my following post, I will look into the script, the notes elements and the XSL files needed to render the different elements of the Ajax page.
Comments
To add a comment, log in or register as new user. It's free and safe.