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

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

3. Advanced Internet Programming – Fall 2006 3 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

4. Advanced Internet Programming – Fall 2006 4 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

5. Advanced Internet Programming – Fall 2006 5 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

6. 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 number Waits 5 seconds and then requests data only for next page until all pages are loaded Loads page into hidden div

7. Advanced Internet Programming – Fall 2006 7 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

8. 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

9. 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 DownlaodMulti-stage Downlaod

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

11. Advanced Internet Programming – Fall 2006 11 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 Email address must be valid Date must be valid

12. Advanced Internet Programming – Fall 2006 12 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

13. 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

14. 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 active Error code return Failure to contact server Example: Cancel PendingCancel Pending

15. 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 AgainTry Again

16. Advanced Internet Programming – Fall 2006 16 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

17. Advanced Internet Programming – Fall 2006 17 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

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

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

20. Advanced Internet Programming – Fall 2006 20 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

21. 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

22. Advanced Internet Programming – Fall 2006 22 Firefox XML DOM - 3 Examples: Firefox DOMFirefox DOM DOM Dreation DOM Parser Get text Serialize Error handling

23. Advanced Internet Programming – Fall 2006 23 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

24. Advanced Internet Programming – Fall 2006 24 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

25. 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

26. Advanced Internet Programming – Fall 2006 26 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

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

28. Advanced Internet Programming – Fall 2006 28 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

29. 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 IEXSLT in IE

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

31. Advanced Internet Programming – Fall 2006 31 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