Upload
aurek
View
42
Download
0
Embed Size (px)
DESCRIPTION
TUTORIAL 10. WORKING WITH THE DOCUMENT OBJECT MODEL. Updating XML documents. XML API. XML and XSLT are a markup languages Describe how things are arranged and how things look API Collection of prewritten procedures Enables processing of XML Two APIs for use with XML - PowerPoint PPT Presentation
Citation preview
XP
New Perspectives on XML, 2nd EditionTutorial 10
1
WORKING WITH THE DOCUMENT OBJECT MODEL
TUTORIAL 10
XPUpdating XML documents
New Perspectives on XML, 2nd EditionTutorial 10
2
XPXML API
• XML and XSLT are a markup languages– Describe how things are arranged and how things look
• API– Collection of prewritten procedures
– Enables processing of XML
• Two APIs for use with XML– W3C DOM (Document Object Model)
• Requires entire XML document be held in memory; memory intensive
– SAX (Simple API for XML)• Can be used on a stream of XML which need not be held entirely in memory
• Developed by XML-DEV mailing list
New Perspectives on XML, 2nd EditionTutorial 10
3
XP
New Perspectives on XML, 2nd EditionTutorial 10
4
DOM LEVELSPage 572
XPGeneral approach
1. Determine which browser is being used
2. Create document object
3. Load a file into the document object
4. Transform the document object using XSLT
5. Display the transformed document
New Perspectives on XML, 2nd EditionTutorial 10
5
XP
New Perspectives on XML, 2nd EditionTutorial 10
6
CREATING A CROSS-BROWSER SOLUTION
• Because there are some fundamental differences between Internet Explorer and the Mozilla-based browsers in implementing the Document Object Model, any program code that you write has to first determine which browser is in use.– Object-detection
<script type=“text/javascript”>
var IE = window.ActiveXObject ? true:false;
var MOZ = document.implementation.createDocument ? true:false;
</script>
Java Script is case sensitive
XP
New Perspectives on XML, 2nd EditionTutorial 10
7
CREATING A CROSS-BROWSER SOLUTION
if (IE) {
Internet Explorer code
} else if (MOZ) {
Mozilla code
}
XPGeneral approach
1. Determine which browser is being used
2. Create document object
3. Load a file into the document object
4. Transform the document object using XSLT
5. Display the transformed document
New Perspectives on XML, 2nd EditionTutorial 10
8
XP
New Perspectives on XML, 2nd EditionTutorial 10
9
CREATING A DOCUMENT OBJECT IN INTERNET EXPLORER
• A document object is an object that can store the contents and structure of a document.
docObj = new ActiveXObject(PID);
– docObj is the variable name of the document object– PID is the program ID that indicates the type of
document object to be created.
Each version of MSXML supports a different program ID
XPCREATING A DOCUMENT OBJECT IN INTERNET EXPLORER
• IE creates document objects using ActiveX– Microsoft technology used to create interactive content for the web
• Program IDs supported by different versions of MSXMLMsxml2.DOMDocument.5.0
Msxml2.DOMDocument.4.0
Msxml2.DOMDocument.3.0
MSXML2.DOMDocument
Microsoft.XMLDOM
• Example:XMLdoc = new ActiveXobject
(“Msxml2.DOMDocument.3.0”);New Perspectives on XML, 2nd Edition
Tutorial 1010
To determine the most recent version, query the browser
(page 576)
XP
New Perspectives on XML, 2nd EditionTutorial 10
11
CREATING A DOCUMENT OBJECT IN MOZILLA
• SyntaxdocObj = document.implementation.createDocument
(uri,root,doctype);uri is the URI of the document’s namespace
root is the qualified name of the document’s root element
doctype is the type of document to create (always enter a value of null)
• ExampleXMLdoc = document.implementaton.createDocument
(“http://lhouse.org”, Persons, null);
XPGeneral approach
1. Determine which browser is being used
2. Create document object
3. Load a file into the document object
4. Transform the document object using XSLT
5. Display the transformed document
New Perspectives on XML, 2nd EditionTutorial 10
12
XP
New Perspectives on XML, 2nd EditionTutorial 10
13
LOADING A FILE INTO A DOCUMENT OBJECT
• First choose load strategy:– An asynchronous load does not require the application loading
the file to wait for it to finish loading before proceeding through the lines in the program code
– A synchronous load causes the application to stop until the file is completely loaded.
• Example: choose synchronous loaddocObj.async=false;
• Example load:docObj.load(url)
Default
Use for large files or retrieving files
through a slow internet connection
XPGeneral approach
1. Determine which browser is being used
2. Create document object
3. Load a file into the document object
4. Transform the document object using XSLT
5. Display the transformed document
New Perspectives on XML, 2nd EditionTutorial 10
14
XP
New Perspectives on XML, 2nd EditionTutorial 10
15
Transforming a Document Using XSLT
(Internet Explorer)
• Because XSLT style sheets are also XML documents, you need to create a document object using ActiveX for the style sheet– Rental-threaded model
• Content is accessed by the XML processor using a single sequence of instructions
– Free-threaded model• Content is access by the processor through multiple input
threads
Preferable for efficiency reasons
XP
New Perspectives on XML, 2nd EditionTutorial 10
16
Transforming a Document Using XSLT
(Internet Explorer)
• Once a style sheet is loaded, IE applies the style sheet to the source document using either of two methods:– transformNode()
• Creates a text string containing the code for the result document
– transformNotetoObject()• Stores the result lin another
document object
• Either method can be drag on resources– Create a template Object and Processor Object…
Simple
Can write code to further
manipulate the contents
XP
New Perspectives on XML, 2nd EditionTutorial 10
17
Template and Processor Objects (Internet Explorer)
• Template object– Uses a large and complicated style sheet or for programs that need
to run several transformations,
– Increases the efficiency of the program because the cached style sheet can be accessed repeatedly without being recompiled
• Processor object– Processes the template object to produce the result object
• Display the result object
XPCreating a Template Object (Internet Explorer)
• Processor must compile the style sheet object each time the transformation is run.
• For large and complicated style sheets or programs that need to run several transformations, store the style sheet in a template object and use the free-threaded model
• Store the program IDs in an array:Var FreeThreadPID = [“Msxm1.FreeThreadedDocument.5.0”,
“Msxm1.FreeThreadedDocument.4.0”, “Msxm1.FreeThreadedDocument.3.0”];
• Create document object for the style sheetXSLTdoc=New Active Xobject
(getPID (FreeThreadPID) );
New Perspectives on XML, 2nd EditionTutorial 10
18
XPUsing a processor object (Internet Explorer)
• Steps for creating and using a processor object1. Insert a free-threaded style sheet into the template object
2. Create an XSLT processor based on the template
3. Specify an input source document for the processor
4. Transform the source document based on the style sheet
Examplefunction doTransform() {
var contTable = document.getElementById(“ctabale”)”
If (IE) {
XSLTemp.stylesheet=XSLTdoc:
XSLTProc=XSLTemp.createprocessor();
XSLTProc.input=XMLdoc;
XSLTLProc.transform()XSLTproc.out;
}
}
See pages 584-587 for detailsNew Perspectives on XML, 2nd Edition
Tutorial 1019
XP
New Perspectives on XML, 2nd EditionTutorial 10
20
TRANSFORMING A DOCUMENT WITH MOZILLA
XP
New Perspectives on XML, 2nd EditionTutorial 10
21
TRANSFORMING A DOCUMENT WITH MOZILLA
Figure 10-17 page 589
XP
New Perspectives on XML, 2nd EditionTutorial 10
22
CONVERTING A DOCUMENT OBJECT OR FRAGMENT TO A TEXT STRING
WITH MOZILLA
• To convert a document object or a fragment to a text string in Mozilla, you create a serializer object, which contains a textual representation of the contents of a document object or fragment
serialObj = new XMLSerializer();Where serialObj is the serializer object that will contain the text of the document object or fragment.
XP
New Perspectives on XML, 2nd EditionTutorial 10
23
CONVERTING A DOCUMENT OBJECT OR FRAGMENT TO A TEXT STRING
WITH MOZILLAFigure 10-18 Page 591
XPGeneral approach
1. Determine which browser is being used
2. Create document object
3. Load a file into the document object
4. Transform the document object using XSLT
5. Display the transformed document
New Perspectives on XML, 2nd EditionTutorial 10
24
XP
• Display the document:
New Perspectives on XML, 2nd EditionTutorial 10
25
XP
New Perspectives on XML, 2nd EditionTutorial 10
26
WORKING WITH THE DOCUMENT OBJECT
Page 592
XP
New Perspectives on XML, 2nd EditionTutorial 10
27
WORKING WITH THE DOCUMENT OBJECT
Page 593
XP
New Perspectives on XML, 2nd EditionTutorial 10
28
VIEWING THE NODE TREE
• A node that contains other nodes is a parent node, and the
• nodes it contains are child nodes.
• Nodes that share the same parent are sibling nodes.
• Nodes can contain different types of content. For example, element nodes refer to elements from the Document Object Model, and text nodes refer to the actual text content of element nodes.
• Attribute nodes refer to the attributes contained within elements or processing instructions.
XP
New Perspectives on XML, 2nd EditionTutorial 10
29
ACCESSING ELEMENTS BY TAG NAME
docObj.getElementsByTagName(tag)
Where docObj is the document object and tag is the element’s tag name.
Example:XMLdoc.getElementsByTagName("person")
XP
New Perspectives on XML, 2nd EditionTutorial 10
30
USING FAMILIAL RELATIONS
• Each node in a node tree can also be treated as a node object with its own collection of properties and methods
nodeObj.firstChild
Where nodeObj is a node from the document’s node tree.
XP
New Perspectives on XML, 2nd EditionTutorial 10
31
USING FAMILIAL RELATIONSPage 595
XP
New Perspectives on XML, 2nd EditionTutorial 10
32
NODE TYPES, NAMES, AND VALUES
• nodeObj.nodeType• nodeObj.nodeName• nodeObj.nodeValue
Page 596
XP
New Perspectives on XML, 2nd EditionTutorial 10
33
ADDING AND REMOVING NODES
nodeObj = docObj.createElement(tag);
Where– nodeObj is the new element node
– docObj is the document object containing the new node
– tag is the tag name associated with the element
XP
New Perspectives on XML, 2nd EditionTutorial 10
34
CREATING NODE OBJECTS
Page 599
XP
New Perspectives on XML, 2nd EditionTutorial 10
35
INSERTING AND REMOVING NODES
Page 600
XP
New Perspectives on XML, 2nd EditionTutorial 10
36
CREATING A DOCUMENT FRAGMENT
Page 601
XP
New Perspectives on XML, 2nd EditionTutorial 10
37
CLONING A DOCUMENT FRAGMENT Page 602
XPAdd new Records to the Contribution List
New Perspectives on XML, 2nd EditionTutorial 10
38
XP
New Perspectives on XML, 2nd EditionTutorial 10
39
ATTRIBUTE METHODSPage 609
XP
New Perspectives on XML, 2nd EditionTutorial 10
40
FILTERING THE SOURCE DOCUMENT
<xsl:param name="group" select="//person" />
<xsl:param name="group" select="//person[amount > 100]" />
Page 614
XPFILTERING THE SOURCE DOCUMENT
function filterList() {
var filterStr = document.webform.filter.value;
if (filterStr==“”) filter=“//person”
else filter = “//person[“+filterStr+”]”;
}
New Perspectives on XML, 2nd EditionTutorial 10
41
Extract filter expression from formInsert filter expression
into parameter
XP
New Perspectives on XML, 2nd EditionTutorial 10
42
SETTING A PARAMETER VALUEin Internet Explorer
processorObj.addParameter(parameter, value, uri)
• processorObj is a processor object • parameter is the name of the style sheet parameter• value is the value passed to the parameter• uri is an optional value that specifies the
namespace URI for the parameter
XP
New Perspectives on XML, 2nd EditionTutorial 10
43
SELECTING A NODE SETin Internet Explorer
object.selectSingleNode(xpath)
Where object is a document or node object and xpath is an XPath expression.
object.selectNodes(xpath)
XP
New Perspectives on XML, 2nd EditionTutorial 10
44
SAVING AN XML DOCUMENT
docObj.save(location)
Where location is one of the following:– A filename
– The name of another document object
– An ASP (Active Server Pages) response object
– A custom COM object that supports persistence
• Supported on IE on a Web server.
XP
New Perspectives on XML, 2nd EditionTutorial 10
45
WORKING WITH AJAX
• AJAX, or Asynchronous JavaScript and XML, refers to the use of HTML, XML, XSLT, and JavaScript to enable fast, efficient communication between applications running on a user’s browser and data stored and updated on a secure Web server.
• In the classic Web application model, a user interacts with a Web server through a Web page running on their browser.
XP
New Perspectives on XML, 2nd EditionTutorial 10
46
WORKING WITH AJAX
• The AJAX Web application model adds an intermediary between the user and the server-side system, which is called an AJAX engine.
• The AJAX engine is responsible for communicating with the server and for relaying any information from the server to the user interface.
XP
New Perspectives on XML, 2nd EditionTutorial 10
47
WORKING WITH AJAX
Ajax engine:• Written in JavaScript• Ajax uses HTTP to communicate with Web server• Client uses JavaScript call functions to communicate with Ajax engine• Ajax engine placed within Web page• Enables asynchronous rather than synchronous communication
XP
New Perspectives on XML, 2nd EditionTutorial 10
48
WORKING WITH AJAXPage 628
XP
New Perspectives on XML, 2nd EditionTutorial 10
49
THE XMLHttpRequest OBJECT
• Internet Explorer– To create an XMLHttpRequest object, use
reqObj = new ActiveXObject(progID);
Where reqObj is the XMLHttpRequest object and progID is an ActiveX program ID for XMLHttpRequest objects.
• Mozilla and Safari– To create an XMLHttpRequest object, use
reqObj = new XMLHttpRequest();
Ajax engine
Ajax engine
XP
New Perspectives on XML, 2nd EditionTutorial 10
50
METHODS OF THE XMLHttpRequest OBJECT
Page 630
XP
New Perspectives on XML, 2nd EditionTutorial 10
51
PROPERTIES OF THE XMLHttpRequest OBJECT
Page 631