Upload
sampetruda
View
234
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
1Fall 2006
Florida Atlantic UniversityDepartment of Computer Science & Engineering
COT 6930Advanced Internet Programming
Dr. Roy Levow
Day 2
Advanced Internet Programming – Fall 2006 2
Day 2 Syllabus AJAX Patterns XML Technologies
XMLXPathXSLT
Self-Study JSON
Advanced Internet Programming – Fall 2006 3
AJAX Patterns Communication Control
Predictive Fetch• Preload anticipated next item• Example: Predictive Fetch• Example: Multi-stage Downlaod
Submission Throttling• Send data to server progressively• Incremental form validation is an example• Example: Submission Throttling
Advanced Internet Programming – Fall 2006 4
AJAX Patterns (cont.) Periodic Refresh
Keep view up-to-date with changing data• ESPN scoreboard• Gmail
Example: Periodic Refresh Fallback Patterns
Cancel PendingTry Again
Advanced Internet Programming – Fall 2006 5
Predictive Fetch – Page Preloading Example: Predictive Fetch Basic Operation of php file
No parameters: deliver first page, full htmlPage parameter specifies page to deliverDataOnly parameter specifies whether to
deliver page data only as div (true) or normal html page (not present or false)
CSS controls display of pages and page number list through class set by JavaScript
Advanced Internet Programming – Fall 2006 6
Page Preloading - 2 JavaScript
Verifies that XMLHttpRequest is supported• If not, does normal page loads
Sets display class for current page numberWaits 5 seconds and then requests data only
for next page until all pages are loadedLoads page into hidden div
Advanced Internet Programming – Fall 2006 7
Page Preloading - 3 On page number click
If current page, do nothingElse check if page is preloaded
• If not, load the next page normally• If preloaded, update div class to display correct
page and update page number class
Advanced Internet Programming – Fall 2006 8
Page Preloading – Function Summary getURLForPage() from location showPage() make page visible and fix page
number display loadNextPage()
Create request object first time Abort any pending request After loading, wait
onload function Fix up display Fix links if XMLHttpRequest is supported
Advanced Internet Programming – Fall 2006 9
Multistage Download Load basic content in original page
Design issue: What is basic? Then download extra content
Not loaded if no XMLHttpRequest Example: Multi-stage Downlaod
Advanced Internet Programming – Fall 2006 10
Submission Throttling
Collect Data User idle? Time to send
Send DataMore Data?
No No
Yes
No
Yes
Yes
Done
Advanced Internet Programming – Fall 2006 11
Submission ThrottlingIncremental Form Validation
Use standard formSo it will work even without XMLHttpRequest
Validate selected fields as they are enteredUser name must be uniqueEmail address must be validDate must be valid
Advanced Internet Programming – Fall 2006 12
Incremental Form Validation validateField() used for all fields
Identify field from event targetPass data and field id to server php to check
Example: Submission ThrottlingSingle filed exampleComplete form example
Advanced Internet Programming – Fall 2006 13
Periodic Refresh Check for changes periodically
Refresh when changes are present Note headers to suppress caching page
header(“Cache-control: No-Cache);header(“Pragma: No-Cache);
Can also avoid cache hit by changing query string, say by adding datetime
Load into div and them make visible
Advanced Internet Programming – Fall 2006 14
Fall Back – Cancel Pending Requests Most common in periodic refresh
To handle errors Need to handle several conditions
Disable requests when page is not activeError code return Failure to contact server
Example: Cancel Pending
Advanced Internet Programming – Fall 2006 15
Fallback Patterns – Try Again When request fails may wish to try again
Be sure not to try forever Example: Try Again
Advanced Internet Programming – Fall 2006 16
XML, XPath, XSLT XML support generally limited to IE and
Firefox XML in IE
Microsoft.XmlDom in IE4.0MSXML ActiveX in IE 5.0+
• But only on Windows; not on MAC
Text uses createDocument() for cross-IE compatability
XML DOM object created from string
Advanced Internet Programming – Fall 2006 17
XML DOM Navigation DOM object properties
childNodes, firstChild, lastChild, parentNode, nextSibling, previousSibling, nodeName, nodeType, nodeValuetext, attributesxmlownerDocument – root node
Navigate tree with these functions
Advanced Internet Programming – Fall 2006 18
IE XML DOM Navigation Examples Examples: IE DOM
DOM creation Get Elements by Tag NameCreate NodeInsert NodeRemove ChildReplace Child
Advanced Internet Programming – Fall 2006 19
IE XML DOM Error Handling Creates and propagates exception object
parseError parseError object provides details
errorCode, reasonfilePos, line, linePossrcTexturl
Advanced Internet Programming – Fall 2006 20
XML DOM in Firefox Uses createDocument() method to generate
DOM objectEmptyFrom stringFrom url
load() method loads from a url String version of XML subtree is produced by
XMLSerializer object
Advanced Internet Programming – Fall 2006 21
XML DOM in Firefox - 2 Error handling
Firefox produces an error document• Not the error object of IE• It can be parsed to get the same information
Advanced Internet Programming – Fall 2006 22
Firefox XML DOM - 3 Examples: Firefox DOM
DOM DreationDOM ParserGet textSerializeError handling
Advanced Internet Programming – Fall 2006 23
Cross-Browser XML Requires library to create standard calls for
operationsText provides zXml libraryzXmlDom.createDocument()
Examples: Cross-Browser DOMProcessing Book List
Advanced Internet Programming – Fall 2006 24
XML Namespaces XML uses namespace concept to resolve
naming conflicts between documents from different sourcesTag name has form ns:tagNameDeclared as xmlsn:ns-prefix=“nsURI”
• URI has same syntax as URL but need not be real address
• Should be unique• Declarations in root tag of document
Advanced Internet Programming – Fall 2006 25
XPath XPath expressions
Context node is partial path from which selection begins
• book/author – this parent-child sequence
Selection pattern specifies which nodes to include
• book[@isbn=‘0010001001’]• Expressions have own syntax and can be quite
complex
Advanced Internet Programming – Fall 2006 26
XPath in IE and Firefox IE uses two functions
selectSingleNode()selectNodes()Examples: IE XPath
Firefox uses two objectsXPathEvaluatorXPathResultExamples: Firefox XPath
Advanced Internet Programming – Fall 2006 27
Cross-Browser XPath
Use zXml librarySame functions as IE
Examples: Cross-Browser XPath
Advanced Internet Programming – Fall 2006 28
XSL Transformations Transformation is done with
xsl:stylesheet with XML specific elementsxsl:template to select XMLnodes to processxsl:variable to select attributes from nodes
Examples: XSLT
Advanced Internet Programming – Fall 2006 29
XSLT in IE Browser becomes an issue when DOM is
used in conjunction with XSLT Must create ActiveX XSLTemplate object Create processor object from template object transform() method does transformation
Result is output property of processor Examples: XSLT in IE
Advanced Internet Programming – Fall 2006 30
Cross-Browser XSLT Requires library
Text provides this in zXmlSyntax similar to Firefox
Example: Best Picks Revisited
Advanced Internet Programming – Fall 2006 31
XSLT in Firefox First load XML and XSL into DOM objects Create XSLTProcessor
Import XSL stylesheetTransform XmlDOM document or fragment
Examples: XSL in Firefox