Transcript ppt3 - department of computer & electrical engineering and

Florida Atlantic University
Department of Computer Science & Engineering
COP 4814 – Web Services
Dr. Roy Levow
Part 3 – Ajax Patterns
Fall 2006
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
Web Services – Fall 2006
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

Web Services – Fall 2006
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
Web Services – Fall 2006
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

Web Services – Fall 2006
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
Web Services – Fall 2006
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
Web Services – Fall 2006
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
Web Services – Fall 2006
Submission Throttling
Collect Data
Yes
No
No
User idle?
Time to
send
Yes
Yes
More Data?
No
Done
Web Services – Fall 2006
Send Data
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

Web Services – Fall 2006
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

Web Services – Fall 2006
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

Web Services – Fall 2006
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
Web Services – Fall 2006
Fallback Patterns – Try Again

When request fails may wish to try again


Be sure not to try forever
Example: Try Again
Web Services – Fall 2006