1 Fall 2006 Florida Atlantic University Department of Computer Science & Engineering COT 6930 Advanced Internet Programming Dr. Roy Levow Day 2

Advanced Internet Programming – Fall Day 2 Syllabus AJAX Patterns XML Technologies XML XPath XSLT Self-Study JSON

Advanced Internet Programming – Fall AJAX Patterns Communication Control Predictive Fetch Preload anticipated next item Example: Predictive FetchPredictive Fetch Example: Multi-stage DownlaodMulti-stage Downlaod Submission Throttling Send data to server progressively Incremental form validation is an example Example: Submission ThrottlingSubmission Throttling

Advanced Internet Programming – Fall AJAX Patterns (cont.) Periodic Refresh Keep view up-to-date with changing data ESPN scoreboard Gmail Example: Periodic RefreshPeriodic Refresh Fallback Patterns Cancel Pending Try Again

Advanced Internet Programming – Fall Predictive Fetch – Page Preloading Example: Predictive FetchPredictive Fetch Basic Operation of php file No parameters: deliver first page, full html Page parameter specifies page to deliver DataOnly 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 Page Preloading - 2 JavaScript Verifies that XMLHttpRequest is supported If not, does normal page loads Sets display class for current page number Waits 5 seconds and then requests data only for next page until all pages are loaded Loads page into hidden div

Advanced Internet Programming – Fall Page Preloading - 3 On page number click If current page, do nothing Else 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 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 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 DownlaodMulti-stage Downlaod

Advanced Internet Programming – Fall Submission Throttling Collect DataUser idle? Time to send Send DataMore Data? No Yes No Yes Done

Advanced Internet Programming – Fall Submission Throttling Incremental Form Validation Use standard form So it will work even without XMLHttpRequest Validate selected fields as they are entered User name must be unique address must be valid Date must be valid

Advanced Internet Programming – Fall Incremental Form Validation validateField() used for all fields Identify field from event target Pass data and field id to server php to check Example: Submission ThrottlingSubmission Throttling Single filed example Complete form example

Advanced Internet Programming – Fall 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 Fall Back – Cancel Pending Requests Most common in periodic refresh To handle errors Need to handle several conditions Disable requests when page is not active Error code return Failure to contact server Example: Cancel PendingCancel Pending

Advanced Internet Programming – Fall Fallback Patterns – Try Again When request fails may wish to try again Be sure not to try forever Example: Try AgainTry Again

Advanced Internet Programming – Fall XML, XPath, XSLT XML support generally limited to IE and Firefox XML in IE Microsoft.XmlDom in IE4.0 MSXML 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 XML DOM Navigation DOM object properties childNodes, firstChild, lastChild, parentNode, nextSibling, previousSibling, nodeName, nodeType, nodeValue text, attributes xml ownerDocument – root node Navigate tree with these functions

Advanced Internet Programming – Fall IE XML DOM Navigation Examples Examples: IE DOMIE DOM DOM creation Get Elements by Tag Name Create Node Insert Node Remove Child Replace Child

Advanced Internet Programming – Fall IE XML DOM Error Handling Creates and propagates exception object parseError parseError object provides details errorCode, reason filePos, line, linePos srcText url

Advanced Internet Programming – Fall XML DOM in Firefox Uses createDocument() method to generate DOM object Empty From string From url load() method loads from a url String version of XML subtree is produced by XMLSerializer object

Advanced Internet Programming – Fall 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 Firefox XML DOM - 3 Examples: Firefox DOMFirefox DOM DOM Dreation DOM Parser Get text Serialize Error handling

Advanced Internet Programming – Fall Cross-Browser XML Requires library to create standard calls for operations Text provides zXml library zXmlDom.createDocument() Examples: Cross-Browser DOMCross-Browser DOM Processing Book List

Advanced Internet Programming – Fall XML Namespaces XML uses namespace concept to resolve naming conflicts between documents from different sources Tag name has form ns:tagName Declared 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 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 Expressions have own syntax and can be quite complex

Advanced Internet Programming – Fall XPath in IE and Firefox IE uses two functions selectSingleNode() selectNodes() Examples: IE XPathIE XPath Firefox uses two objects XPathEvaluator XPathResult Examples: Firefox XPathFirefox XPath

Advanced Internet Programming – Fall Cross-Browser XPath Use zXml library Same functions as IE Examples: Cross-Browser XPathCross-Browser XPath

Advanced Internet Programming – Fall XSL Transformations Transformation is done with xsl:stylesheet with XML specific elements xsl:template to select XMLnodes to process xsl:variable to select attributes from nodes Examples: XSLTXSLT

Advanced Internet Programming – Fall 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 IEXSLT in IE

Advanced Internet Programming – Fall Cross-Browser XSLT Requires library Text provides this in zXml Syntax similar to Firefox Example: Best Picks RevisitedBest Picks Revisited

Advanced Internet Programming – Fall XSLT in Firefox First load XML and XSL into DOM objects Create XSLTProcessor Import XSL stylesheet Transform XmlDOM document or fragment Examples: XSL in FirefoxXSL in Firefox