Transcript Slide 1

Florida Atlantic University
Department of Computer Science & Engineering
COT 6930
Advanced Internet Programming
Dr. Roy Levow
Day 2
1
Fall 2006
Day 2 Syllabus
AJAX Patterns
 XML Technologies

XML
 XPath
 XSLT

Self-Study
 JSON
Advanced Internet Programming – Fall 2006
2
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
3
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

Advanced Internet Programming – Fall 2006
4
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
Advanced Internet Programming – Fall 2006
5
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 2006
6
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 2006
7
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
8
Multistage Download

Load basic content in original page


Then download extra content


Design issue: What is basic?
Not loaded if no XMLHttpRequest
Example: Multi-stage Downlaod
Advanced Internet Programming – Fall 2006
9
Submission Throttling
Collect Data
Yes
No
No
User idle?
Time to
send
Yes
More Data?
Yes
Send Data
No
Done
Advanced Internet Programming – Fall 2006
10
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

Advanced Internet Programming – Fall 2006
11
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

Advanced Internet Programming – Fall 2006
12
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
13
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
Advanced Internet Programming – Fall 2006
14
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
15
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 2006
16
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 2006
17
IE XML DOM Navigation Examples

Examples: IE DOM
DOM creation
 Get Elements by Tag Name
 Create Node
 Insert Node
 Remove Child
 Replace Child

Advanced Internet Programming – Fall 2006
18
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 2006
19
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 2006
20
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
21
Firefox XML DOM - 3

Examples: Firefox DOM
DOM Dreation
 DOM Parser
 Get text
 Serialize
 Error handling

Advanced Internet Programming – Fall 2006
22
Cross-Browser XML

Requires library to create standard calls for
operations
Text provides zXml library
 zXmlDom.createDocument()


Examples: Cross-Browser DOM

Processing Book List
Advanced Internet Programming – Fall 2006
23
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 2006
24
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
25
XPath in IE and Firefox

IE uses two functions
selectSingleNode()
 selectNodes()
 Examples: IE XPath


Firefox uses two objects
XPathEvaluator
 XPathResult
 Examples: Firefox XPath

Advanced Internet Programming – Fall 2006
26
Cross-Browser XPath

Use zXml library


Same functions as IE
Examples: Cross-Browser XPath
Advanced Internet Programming – Fall 2006
27
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
Advanced Internet Programming – Fall 2006
28
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
29
Cross-Browser XSLT

Requires library
Text provides this in zXml
 Syntax similar to Firefox


Example: Best Picks Revisited
Advanced Internet Programming – Fall 2006
30
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
Advanced Internet Programming – Fall 2006
31