Florida Atlantic University
Department of Computer Science & Engineering
COP 4814 – Web Services
Dr. Roy Levow
Part 2 – Ajax Fundamentals
Fall 2006
Frames (Prelude to AJAX)
• Introduced in HTML 4.0
• Allow page to be loaded into portion of browser window
• Use discouraged in XHTML because of poor interaction with back
button
• Hidden frame technique
• Use 1-pixel frame to contain form (thus hidden)
• Fill in form from JavaScript and submit
• Receive response asynchronously to update page
• Iframes
• Independent of frameset
• Go anywhere on page and can be hidden
Web Services – Fall 2006
The Real Ajax
• On Browser
• Ajax Engine (JavaScript code)
•
•
•
•
Generates display using HTML and CSS
Receive JS calls from user interface
Sends HTTPRequest to Server
Receives Data from Server
• Server
• Receives HTTPRequest from Browser
• Interacts with local database
• Sends Data to Browser
Web Services – Fall 2006
Hidden Frame Technique
o Pattern






Visible frame for user interaction
User action triggers call to load hidden frame
Server responds, loading hidden frame
onload function in hidden frame calls function in
display frame to show data
JavaScript transfers data from hidden frame to visible
frame
Examples: Hidden Frame Examples
Web Services – Fall 2006
Hidden iFrames

Hidden iFrame approach is similar but cleaner




No frameset required
iFrame can be created dynamically
Examples: Hidden iFrame Examples
Note: Back/Forward behavior depends on browser



Okay in IE
Works in Foxfire only if frame is in orignian html
Not in Safari
Web Services – Fall 2006
XMLHttp Requests
• The Real Thing
• No frames required
• Asynchronous operation
• Event handler triggered by completion of data transfer
• Unfortunately, implement differs among browsers
• Use browser identifying code to put generic wrapper
on request code
• Examples: XMLHttp Requests Examples
Web Services – Fall 2006
XMLHttp Request Processing

Create XMLHttpRequest Object


Open connection to web server


Sense browser to use required mechanism
Specify get/post, url, asynchronous
Set handler for readystate change





0 = Uninitialized
1 = Loading
2 = Loaded
3 = Interactive (partial response)
4 = Complete
Web Services – Fall 2006
XMLHttp Request Processing (cont.)

Check status (response code)

200 is OK
Verify the content type
 GET request, example 1
 POST request, example 2

Web Services – Fall 2006
XMLHttp Request Issues
No Back/Forward
 Requires ActiveX in IE
 Load must be from the same server that
delivered the page


Can be handled by server program to act as
proxy
Web Services – Fall 2006