CHAPTER 8 SCRIPTING IN THE BROWSER 245 The Moz_Document_load() overrides the Mozilla load() method. This allows the wrapper to include code for firing the MSXML equivalent events: function _Moz_Document_load(strURL) { this.parseError = 0; updateReadyState(this, 1); try { this.__load__(strURL); } catch (oException) { this.parseError = -1; } updateReadyState(this, 4); } The updateReadyState() function is a helper method that sets the readyState property and fires the necessary events: function updateReadyState(oDOMDocument, intReadyState) { oDOMDocument.readyState = intReadyState; if (oDOMDocument.onreadystatechange != null && . typeof DOMDocument.onreadystatechange == “function”) oDOMDocument.onreadystatechange(); } The two functions that deal with XSLT are very similar. The only difference is that one of them serializes the result to a string, and the other returns the processed result as a DOMDocument object. Both functions allow the Mozilla XSLTProcessor object to mimic XSLT transformations in MSXML: function _Moz_node_transformNode(oStylesheetDOM) { var oXSLTProcessor = new XSLTProcessor(); var oOutDOM = document.implementation.createDocument(“”,””,null); oXSLTProcessor.transformDocument( this, oStylesheetDOM, oOutDOM, null); return (new XMLSerializer()).serializeToString(oOutDOM); } Some of the extra functions in the wrapper aren t included in this brief walkthrough. You can look through the code if you want to explore further. WHY EXTEND MOZILLA? Given that the Mozilla implementation is more standards-compliant, you may be wondering why you re using a JavaScript wrapper that makes Mozilla work like IE. MSXML is a separate library from IE, so it s not possible to extend it with JavaScript prototypes. IE was the first browser to support XML and is still the most popular web browser. By replicating the behavior of IE, you can use the large number of IE-specific examples available on the Internet in your own projects more easily.
Check Tomcat Web Hosting services for best quality webspace to host your web application.

244 CHAPTER (Most popular web site) 8 SCRIPTING IN THE BROWSER

244 CHAPTER 8 SCRIPTING IN THE BROWSER xDOM.createDocument() Method The xDOM.createDOMDocument() is the only method that you call with JavaScript in other words, it s a public method. This method determines which browser is being used and creates a DOMDocument object using the appropriate method for that browser. The method also attaches an event handler to the Mozilla loadevent so that you can raise this event in the same way as in IE: xDOM.createDOMDocument = function() { var oOutDOMDocument = null; if (is_gecko) { oOutDOMDocument = document.implementation.createDocument(“”, “”, null); oOutDOMDocument.addEventListener(“load”, document_onload, false); } else if (is_ie) { oOutDOMDocument = new ActiveXObject(strMSXMLProgID); oOutDOMDocument.preserveWhite space = true; } return oOutDOMDocument; } Private xDOM Library Functions The remainder of the library file contains the implementations of the prototypes that you declared earlier. You can look through these to see how Mozilla natively handles some of its more advanced XML features. The first method implemented is the Mozilla version of the MSXML loadXML() method. This uses the XMLParser object that is included in the Mozilla XMLExtras library. This library ships with all Mozilla installations: function _Moz_Document_loadXML(strXML) { updateReadyState(this, 1); var oDOMParser = new DOMParser(); var oDOM = oDOMParser.parseFromString(strXML, “text/xml”); while (this.hasChildNodes()) this.removeChild(this.lastChild); for (var i=0; i < oDOM.childNodes.length; i++) { var oImportNode = this.importNode(oDOM.childNodes[i], true); this.appendChild(oImportNode); } fireOnLoad(this); } This method copies the nodes from the newly parsed DOM.
Note: In case you are looking for affordable and reliable webhost to host and run your j2ee application check Vision J2ee Web Hosting services.

CHAPTER 8 SCRIPTING IN THE (Web design service) BROWSER 243

CHAPTER 8 SCRIPTING IN THE BROWSER 243 if (is_ie) { var blnSuccess = false; for (var i=0; i < arrMSXMLProgIDs.length && !blnSuccess; i++) { try { var oDOMDocument = new ActiveXObject(arrMSXMLProgIDs[i]); strMSXMLProgID = arrMSXMLProgIDs[i]; blnSuccess = true; } catch (oException) { } } if (!blnSuccess ){ blnFailed = true; strFailedReason = "No suitable MSXML library on machine."; } } Initializing in Mozilla The Mozilla initialization code is slightly more complicated. It makes use of JavaScript prototypes, which allow you to add methods or properties to objects at run-time. In this case, the code adds methods that mimic the way that MSXML behaves: Document.prototype.__load__ = Document.prototype.load; Document.prototype.load = _Moz_Document_load; Note that _Moz_Document_load is a function that the wrapper declares later. The preceding code replaces the default loadmethod in the Mozilla DOM with a new method, _Moz_Document_load(). It keeps a reference to the default method by first assigning it to a prototype of a different name, Document.prototype.__load__. The wrapper must do this because it still needs to call the original method from within the new method. From an object- oriented perspective, this is like overriding a method and then calling that method on the super/parent class within the new method implementation.The wrapper also declares a new event handler called onreadystatechange: Document.prototype.onreadystatechange = null; The wrapper initially assigns the event handler a nullvalue. Later, the wrapper attaches code that runs when the event fires. The final prototype declares a Getter method to get the value of a variable: Node.prototype.__defineGetter__("xml", _Moz_Node_getXML); A Getter method appears as a property to the end user, but is implemented as a function. You don t need a corresponding Setter method because the xml property is read-only.
Searching for affordable and proven webhost to host and run your servlet applications? Go to Linux Web Hosting services and you will find it.


242 CHAPTER 8 SCRIPTING IN THE BROWSER Table 8-3. Continued Function Name Description Public _Moz_node_transformNode An implementation of the transformNode() No (oStylesheetDOM) method for the Mozilla DOM. You add a method to the Mozilla DOM to call this function. _Moz_node_transformNodeToObject An implementation of the No (oStylesheetDOM,oOutputDOM) transformNodeToObject() method for the Mozilla DOM. You add a method to the Mozilla DOM to call this function. _Moz_Node_getXML() An implementation of the xml property No for the Mozilla DOM. You add a property to the Mozilla DOM to call this function. updateReadyState(oDOMDocument, Changes the readyState property No intReadyState) to the DOM and calls the added onreadystatechange() event handler if there is one. Note The xDOM library uses the Ultimate JavaScript Client Sniffer Version 3.03 created by Netscape Communications. This is included in the code directory (as browserDetect.js), along with xDOM.js.You need to include both of these JavaScript files to use xDOM. xDOM Walkthrough This section walks through the xDOM.js file and describes the code therein. If you aren t interested in the details of the xDOM wrapper, please feel free to skip ahead to the Using JavaScript with the DOM section. The code starts by declaring global variables that library functions will use. The most important line follows: var arrMSXMLProgIDs = ["MSXML4.DOMDocument", "MSXML3.DOMDocument", . "MSXML2.DOMDocument", "MSXML.DOMDocument", "Microsoft.XmlDom"]; This line creates an array of strings that contain the ProgIDs for creating different versions of the MSXML DOMDocument object. The next step initializes the wrapper. The method used depends on the browser version. Initializing in IE For IE, the initialization code determines which version of MSXML a user has available on his or her machine by iterating through the arrMSXMLProgIDs array:
Searching for affordable and proven webhost to host and run your servlet applications? Go to Linux Web Hosting services and you will find it.


CHAPTER 8 SCRIPTING IN THE BROWSER 241 Browser Support for the W3C DOM Now that you ve seen the interfaces available in the W3C DOM, let s examine how you can use JavaScript to work with XML data stored in a DOM Document on the client. You can create a DOM Document using an ActiveX object in IE. You can use the following code to create an instance of the MSXML parser: var oDocument =new ActiveXObject(“Microsoft.XMLDOM”); Bear in mind that different versions of IE use different ActiveX objects. Mozilla creates a document using this line: var oDocument =document.implementation.createDocument(“”, “”, null); These lines are just the start of the differences between the two major browsers. Given that the DOM implementations in MSXML and Mozilla aren t completely compatible, you need to be careful to develop client-side code suitable for both browsers. You could write code that branches to accommodate each different approach. However, a better solution is to use a wrapper to allow both browsers to exhibit the same JavaScript behaviors. This book includes the xDOM wrapper, written specifically for this chapter. Using the xDOM Wrapper xDOM is a JavaScript library that makes it easier to write cross-browser JavaScript code for client-side manipulation of the DOM. You can find the library in the files xDOM.js and browserDetect.js with your resources. The wrapper needs to use a common method to create documents. It also needs to be able to provide a mechanism for Mozilla to deal with MSXML-specific methods and properties and the application of XSLT stylesheets on the client side. Table 8-3 summarizes the functions available in xDOM.js. Table 8-3. Functions Available in xDOM.js Function Name Description Public xDOM.createDOMDocument() This is the main function in xDOM. It creates a DOM Document. Yes _Moz_Document_loadXML(strXML) An implementation of loadXML() for the Mozilla DOM. You add a method to the Mozilla DOM to call this function. No _Moz_Document_load(strURL) Replaces the Mozilla DOM load() method. You override the existing method on the Mozilla DOM to call this function. No document_onload() A local event handler used to call fireOnLoad() when the document is loaded in Mozilla. No fireOnLoad(oDOMDocument) Checks for a parser error and changes the readyState if required. No Continued
Searching for affordable and reliable webhost to host and run your web applications? Go to our java web server services and you will be pleased.


240 CHAPTER 8 SCRIPTING IN THE BROWSER nextNode() This method returns the next node in the node collection: oDocument.getElementsByTagName(‘title’)[0].nextNode(); The method will return the first node if no previous node has been selected. You can use the reset()method to return to the starting point. selectNodes(patternString) The selectNodes() method creates a NodeList of all nodes that match the specified XPath expression: oDocument.selectNodes(“DVD/title”); If no match is made, the method returns null. selectSingleNode(patternString) This method works in the same way as the selectNodes() method, except that it selects the first matching node: oDocument.selectSingleNode(“DVD/title”); transformNode(styleSheet) The transformNode() method performs XSLT transformations on the current node and returns the result of the transformation as a string. This method takes a stylesheet argument, which is a DOM Document containing the XSLT stylesheet: oDocument.transformNode(oXSLT); transformNodeToObject(styleSheet, OutputDOM) The transformNodeToObject() method is very similar to the previous method. The difference is that it fills the OutputDOM document with the result of the transformation: oDocument.transformNodeToObject(oXSLT, oTransDocument); XMLHttpRequest ActiveX Object MSXML also includes an ActiveX object called the XMLHttpRequest object. This object provides a mechanism for content to be loaded from the server and is at the heart of an approach called Asynchronous JavaScript and XML (Ajax). Mozilla and Opera offer native support for this object, and you ll find out more about both the object and Ajax in Chapter 9.
We highly recommend you visit web and email hosting services if you need stable and cheap web hosting platform for your web applications.

CHAPTER 8 SCRIPTING IN THE BROWSER 239 (Web hosting account)

CHAPTER 8 SCRIPTING IN THE BROWSER 239 Table 8-2. readyState Property Values Constant Value Description LOADING 1 Indicates that the loading process has started and the data is being retrieved. LOADED 2 Indicates that the data has been retrieved and that the parser is parsing the XML document. At this point, the object model is not available. INTERACTIVE 3 Indicates that some data has been parsed, and the object model is available on a partial data set. At this stage, the object model is read-only. COMPLETED 4 Indicates that the loading process is finished. Doesn t indicate whether the document was successfully loaded. onreadystatechange This event fires every time the readyState property changes. You can use it to assign a handler for the event: oDocument.onreadystatechange = processXML; MSXML Node Interface Additions MSXML includes the following additions to the Node interface: xml nextNode() selectNodes() selectSingleNode() transformNode() transformNodeToObject() xml The xml property is a read-only property that returns the serialized contents of a node. In other words, it converts the raw XML into a text format: var strXML = oDocument.xml;
We recommend you use shared web hosting services, because many users agree that it is cheap, reliable and customer-satisfying webhost.

Unlimited web hosting – 238 CHAPTER 8 SCRIPTING IN THE BROWSER

238 CHAPTER 8 SCRIPTING IN THE BROWSER Examining Extra Functionality in MSXML Microsoft XML Parser (MSXML) 3, which ships with IE 6, provides some additional properties and methods that you can use with the DOM interfaces discussed previously. You ll see examples of some of these additions later, as well as how to create similar functionality in Mozilla. Let s start by looking at extensions to the Document and Node interfaces: Additions to the MSXML Document Interface MSXML includes the following additions to the Document interface: load() loadXML() readystate onreadystatechange() load(url) The load() method loads XML content from the URL argument: oDocument.load(“dvd.xml”); The loading happens asynchronously, which means that the method returns immediately and the parser loads the XML. As the content loads, it changes the value of the readystate property and raises the onreadystatechange event. The load() method is also part of the DOM Level 3 Save and Load module. Mozilla supports both this method and the async property from DOM Level 3. loadXML(xml) The loadXML()method loads XML string data into a Document object. When called, it loads asynchronously. The method is useful for using string manipulation to create XML in JavaScript. The following line loads some simple XML content into a DOM Document from a string: oDocument.loadXML(‘ ‘); readyState The readyState property is read-only and indicates the state of a loaded document. Table 8-2 summarizes the values for this property and their meaning.
Visit our web design programs services for an affordable and reliable webhost to suit all your needs.

CHAPTER 8 SCRIPTING IN THE BROWSER 237 (Adult web hosting)

CHAPTER 8 SCRIPTING IN THE BROWSER 237 NamedNodeMap is most commonly associated with the collection of attributes within a node. A NamedNodeMap is also returned for collections of entities and notations. You can t use NamedNodeMap with the childNodescollection. NamedNodeMap has the same members as NodeList. In addition, it has the following members: getNamedItem() removeNamedItem() setNamedItem() getNamedItem(name) The getNamedItem() method retrieves a node by name using the name string parameter: oDocument.documentElement.lastChild.attributes.getNamedItem(“id”); removeNamedItem(name) This method uses the name argument to determine which node to remove. The method returns the removed node: oDocument.documentElement.lastChild.attributes.removeNamedItem(“id”); setNamedItem(newNode) The setNamedItem()method takes a Node as a parameter and adds it to the end of the NamedNodeMap: var idAttr = oDocument.documentElement.firstChild.attributes.removeNamedItem(“id”); oDocument.documentElement.lastChild.attributes.setNamedItem(“id”); The preceding code removes the id attribute from the first child and adds it to the attributes collection of the last child element. You must ensure that the node you re inserting is of the correct type. Caution NodeList and NamedNodeMap are live objects. This means that changes made to the list are reflected immediately. Therefore, you should be very careful when making changes to the list while inside a loop iterating through that list. For example, if your loop has an exit condition that relies on reaching the end of the list, adding new nodes will increase the length of the list. You ll never exit the loop because you ll never get to the end of the list. The length updates continually as the NodeList grows.
Visit our web design programs services for an affordable and reliable webhost to suit all your needs.

236 CHAPTER 8 (Crystaltech web hosting) SCRIPTING IN THE BROWSER

236 CHAPTER 8 SCRIPTING IN THE BROWSER removeChild(oldChild) The removeChild() method removes the old child parameter from the current node s childNodes collection. It returns a reference to the removed node: oCurrentNode = oDocument.documentElement; oOldNode = oCurrentNode.removeNode(oCurrentNode.lastChild); This code removes the last child of the current node. replaceChild(newChild, oldChild) This method replaces a child of the current node with a new child. It returns the replaced child. The following code creates a new node and uses replaceChild to replace the last child element: oNewNode = oDocument.createElement(“title”); oRootNode = oDocument.documentElement; oOldNode = oRootNode.replaceChild(oRootNode.lastChild,oNewNode); Understanding the NodeList Interface The NodeList interface deals with an ordered collection of nodes. Each node in the collection is indexed, starting with 0. You saw earlier that the childNodes property returns a NodeList. You need to be familiar with the length property and item() method. length The length read-only property indicates the length of the NodeList. item (index) The item() method takes an index argument and returns the node at that index from the NodeList: for (var i=0; i < oDocument.documentElement.childNodes.length; i++) { alert(oDocument.documentElement.childNodes.item(i).nodeName); } This code block uses a for loop to iterate through the childNodes collection of documentElement. It pops up an alert box showing the nodeName of each node in that collection. You can also use shorthand syntax to access the list of nodes: alert(oDocument.documentElement.childNodes[i].nodeName); Understanding the NamedNodeMap Interface The NamedNodeMap interface reflects a collection of nodes that you can access by name or index. The collection is not held in any particular order, and you can use the interface to add and delete nodes from within the collection.
Searching for affordable and proven webhost to host and run your servlet applications? Go to Linux Web Hosting services and you will find it.