Your SlideShare is downloading. ×
Fall 2006 Florida Atlantic University
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Fall 2006 Florida Atlantic University

246

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
246
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Fall 2006 Florida Atlantic University Department of Computer Science & Engineering COT 6930 Advanced Internet Programming Dr. Roy Levow Day 2
  • 2. Day 2 Syllabus
    • AJAX Patterns
    • XML Technologies
      • XML
      • XPath
      • XSLT
    • Self-Study
    • JSON
  • 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
  • 4. AJAX Patterns (cont.)
    • Periodic Refresh
      • Keep view up-to-date with changing data
        • ESPN scoreboard
        • Gmail
      • Example: Periodic Refresh
    • Fallback Patterns
      • Cancel Pending
      • Try Again
  • 5. Predictive Fetch – Page Preloading
    • Example: Predictive 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. 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. 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. 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. 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
  • 10. Submission Throttling Collect Data User idle? Time to send Send Data More Data? No No Yes No Yes Yes Done
  • 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. 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 Throttling
      • Single filed example
      • Complete form example
  • 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. 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 Pending
  • 15. Fallback Patterns – Try Again
    • When request fails may wish to try again
      • Be sure not to try forever
    • Example: Try Again
  • 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. 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. IE XML DOM Navigation Examples
    • Examples: IE DOM
      • DOM creation
      • Get Elements by Tag Name
      • Create Node
      • Insert Node
      • Remove Child
      • Replace Child
  • 19. IE XML DOM Error Handling
    • Creates and propagates exception object parseError
    • parseError object provides details
      • errorCode, reason
      • filePos, line, linePos
      • srcText
      • url
  • 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. 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. Firefox XML DOM - 3
    • Examples: Firefox DOM
      • DOM Dreation
      • DOM Parser
      • Get text
      • Serialize
      • Error handling
  • 23. Cross-Browser XML
    • Requires library to create standard calls for operations
      • Text provides zXml library
      • zXmlDom.createDocument()
    • Examples: Cross-Browser DOM
      • Processing Book List
  • 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. 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. XPath in IE and Firefox
    • IE uses two functions
      • selectSingleNode()
      • selectNodes()
      • Examples: IE XPath
    • Firefox uses two objects
      • XPathEvaluator
      • XPathResult
      • Examples: Firefox XPath
  • 27. Cross-Browser XPath
    • Use zXml library
      • Same functions as IE
    • Examples: Cross-Browser XPath
  • 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: XSLT
  • 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
  • 30. Cross-Browser XSLT
    • Requires library
      • Text provides this in zXml
      • Syntax similar to Firefox
    • Example: Best Picks Revisited
  • 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 Firefox

×