Fall 2006

1
Florida Atlantic UniversityDepartment of
Computer Science Engineering
COP 4814 Web Services Dr. Roy Levow Part 3
Ajax Patterns
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

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

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

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

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

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

8
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

9
Submission Throttling
No
No
Time to send
Collect Data
User idle?
Yes
Yes
Yes
Send Data
More Data?
No
Done
10
Submission ThrottlingIncremental 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

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

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

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

14
Fallback Patterns Try Again

• When request fails may wish to try again
• Be sure not to try forever
• Example Try Again