1. Fall 2006 Florida Atlantic University Department of Computer Science & Engineering COP 4814 – Web Services Dr. Roy Levow Part 2 – Ajax Fundamentals

2. Web Services – 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

3. 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

4. oPattern 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 ExamplesHidden Frame Examples Hidden Frame Technique Web Services – Fall 2006

5. Hidden iFrame approach is similar but cleaner No frameset required iFrame can be created dynamically Examples: Hidden iFrame ExamplesHidden 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 Hidden iFrames Web Services – Fall 2006

6. 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 ExamplesXMLHttp Requests Examples XMLHttp Requests Web Services – Fall 2006

7. XMLHttp Request Processing Create XMLHttpRequest Object Sense browser to use required mechanism Open connection to web server Specify get/post, url, asynchronous Set handler for readystate change 0 = Uninitialized 1 = Loading 2 = Loaded 3 = Interactive (partial response) 4 = Complete

8. 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

9. 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