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