Florida Atlantic University Department of Computer Science

Florida Atlantic University Department of Computer Science & Engineering COT 6930 Advanced Internet Programming Dr. Roy Levow Day 1 1 Fall 2006

Day 1 Syllabus Course Introduction ¢ Introduction to AJAX ¢ Review of base technologies ¢ HTML & CSS l Java. Script l Document Object Model (DOM) l AJAX Basics ¢ AJAX Patterns (introduction) ¢ Advanced Internet Programming – Fall 2006 2

Course Goals ¢ Reinforce concepts from Web Programming l ¢ HTML, CSS, Java. Script, DOM Develop understanding of AJAX programming model Asynchronous Java. Script + XML l XPath, XSLT, JSON l ¢ Provide skills for Ajax web project Advanced Internet Programming – Fall 2006 3

Ajax is Born o Jesse James Garrett of Adaptive Path Conceives alternative to Macromedia Flash using free technologies (February 2006) l l l ¢ Publishes ideas online l ¢ ¢ Asynchronous HTTP Request Java. Script And XML Ajax: A New Approach to Web Applications See also article form June 2006 Wired Intro to Ajax film clip Advanced Internet Programming – Fall 2006 Web Development Project – Fall 2006 4

AJAX Asynchronous Java. Script And XML ¢ Provides a framework for the development of web pages that are ¢ Interactive ¢ Highly dynamic ¢ Small transfers that update current page provide faster, smoother response ¢ Advanced Internet Programming – Fall 2006 5

Ajax Site Examples ¢ Google Suggest (Beta) http: //www. google. com/webhp? complete=1&hl=en ¢ Google Maps http: //maps. google. com/ ¢ Gmail http: //gmail. google. com/ ¢ Google Page Creator (Beta) http: //pages. google. com/ Advanced Internet Programming – Fall 2006 6

AJAX vs Classic Page Loads Advanced Internet Programming – Fall 2006 7

Advanced Internet Programming – Fall 2006 8

Advanced Internet Programming – Fall 2006 9

Pros and Cons of Ajax: Pros ¢ Interactivity Achieved by direct manipulation of DOM l Quick updates using incremental data loads l ¢ Portability Open standards l Java. Script is supported by most current browsers l Advanced Internet Programming – Fall 2006 10

Pros and Cons of Ajax: Cons ¢ Inefficiency Interpreted code l Overhead of XML transfer (larger files) l ¢ Portability Requires Java. Script l Also requires Active. X on IE l Inconsistent rendering l Issues with response to Back button ¢ Accessibility issues ¢ Advanced Internet Programming – Fall 2006 11

Alternative Technologies ¢ Macromedia Flash Highly interactive l Prepackaged “movies” l Requires plugin l ¢ Java Web Start l ¢ Java application interacts between client and server Microsoft. NET Advanced Internet Programming – Fall 2006 12

Ajax Component Technologies XHTML ¢ CSS ¢ Java. Script ¢ Document Object Model (DOM) ¢ XML, XPath, XSLT ¢ XMLHttp. Request ¢ Server-side technologies ¢ Advanced Internet Programming – Fall 2006 13

Ajax Design Principles Highly interactive ¢ Smooth responses ¢ ¢ Separation of Data l Presentation l Program logic l Advanced Internet Programming – Fall 2006 14

Fundamental Technologies ¢ XHTML l ¢ Cascading Style Sheets (CSS) l ¢ Provide for separation of format from content Document Object Model (DOM) l ¢ Provides basis for presentation of web pages Dynamic access to elements of web page in browser Extensible Markup Language (XML) l Basic structure for representation of data and other structured documents Advanced Internet Programming – Fall 2006 15

DOM Review DOM creates tree representation of web page ¢ Tree can be mainpulated with Java. Script ¢ Changes in tree structure or values change rendered page ¢ Advanced Internet Programming – Fall 2006 16

DOM Example Buy it

Don’t forget

• Beans
• Milk

DOM Tree Components ¢ Nodes l Element nodes • Correspond to tags l Text nodes • Contain text of elements l Attribute nodes • Contain attributes • attr=“value” Advanced Internet Programming – Fall 2006 18

Major DOM Methods ¢ get. Element. By. Id l ¢ Returns element with specified id or null doucment. get. Element. By. Id(“item 1”) get. Elemens. By. Tag. Name Returns array of elements with the specified tag name document. get. Elements. By. Tag. Name(“li”) l Advanced Internet Programming – Fall 2006 19

Major DOM Methods ¢ get. Attribute Gets specified attribute or null from an object obj. get. Attribute(“style”) l ¢ set. Attribute Sets value of specified attribute for an object obj. set. Attribute(“title”, “help me”) l Advanced Internet Programming – Fall 2006 20

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 Java. Script and submit • Receive response asynchronously to update page • Iframes • Independent of frameset • Go anywhere on page and can be hidden Advanced Internet Programming – Fall 2006 Web Development Project – Fall 2006 21

The Real Ajax • On Browser • Ajax Engine (Java. Script 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 Advanced Internet Programming – Fall 2006 Web Development Project – Fall 2006 22

HTTP • Hypertext Transfer Protocol • Accepts requests from browser • Transfers responses to browser • Fetch web pages • but has many other uses • HTTPRequest format [] Advanced Internet Programming – Fall 2006 Web Development Project – Fall 2006 23

HTTP Request • Many request types • GET and POST are of interest in Ajax • Example GET / HTTP/1. 1 Host: www. wrox. com User-Agent: Mozilla/5. 0 (Windows; U; Windows NT 5. 1; en-US; rv: 1. 7. 6) Gecko/20050225 Firefox/1. 0. 1 Connection: Keep-Alive • Get request for root node with HTTP version • Originating client and information on client • Request to maintain connection for more transfers Advanced Internet Programming – Fall 2006 24

HTTP Request ¢ Item following GET is path to page to load GET /index. html HTTP/1. 1 ¢ Parameters can be appended to the url as in URL ? name 1=value 1&name 2=value 2&… Advanced Internet Programming – Fall 2006 Web Development Project – Fall 2006 25

POST ¢ POST Example POST / HTTP/1. 1 Host: www. wrox. com User-Agent: Mozilla/5. 0 (Windows; U; Windows NT 5. 1; en-US; rv: 1. 7. 6) Gecko/20050225 Firefox/1. 0. 1 Content-Type: application/x-www-form-urlencoded Content-Length: 40 Connection: Keep-Alive name=Professional%20 Ajax&publisher=Wiley ¢ Adds Content-Type, Content-Length, and data Advanced Internet Programming – Fall 2006 Web Development Project – Fall 2006 26

HTTP Responses • Response format <[] • Example HTTP/1. 1 200 OK Date: Sat, 31 Dec 2005 23: 59 GMT Content-Type: text/html; charset=ISO 8859 -1 Content-Length: 122 Advanced Internet Programming – Fall 2006 Web Development Project – Fall 2006 27

Response Codes • • • 200 (OK) 304 (NOT MODIFIED) 401 (UNAUTHORIZED) 403 (FORBIDDEN) 404 (NOT FOUND) Advanced Internet Programming – Fall 2006 Web Development Project – Fall 2006 28

Hidden Frame Technique ¢ Pattern l l ¢ Visible frame for user interaction User action triggers call to load hidden frame Server responds, loading hidden frame Java. Script transfers data from hidden frame to visible frame Examples: Hidden Frame Examples Advanced Internet Programming – Fall 2006 Web Development Project – Fall 2006 29

Hidden i. Frames ¢ Hidden i. Frame approach is similar but cleaner l l ¢ ¢ No frameset required i. Frame can be created dynamically Examples: Hidden i. Frame Examples Note: Back/Forward behavior depends on browser l l l Okay in IE Works in Foxfire only if frame is in orignian html Not in Safari Advanced Internet Programming – Fall 2006 Web Development Project – Fall 2006 30

XMLHttp Request ¢ The Real Thing l No frames required Unfortunately, implement differs among browsers ¢ Use browser identifying code to put generic wrapper on request code ¢ ¢ Examples: XMLHttp Requests Examples Advanced Internet Programming – Fall 2006 31

XMLHttp Request Processing ¢ Create XMLHttp. Request Object l ¢ Open connection to web server l ¢ Sense browser to use required mechanism Specify get/post, url, asynchronous Set handler for readystate change l l l 0 = Uninitialized 1 = Loading 2 = Loaded 3 = Interactive (partial response) 4 = Complete Advanced Internet Programming – Fall 2006 32

XMLHttp Request Processing (cont. ) ¢ Check status (response code) l 200 is OK Verify the content type ¢ GET request example ¢ POST request example ¢ Advanced Internet Programming – Fall 2006 33

XMLHttp Request Issues No Back/Forward ¢ Requires Active. X in IE ¢ Load must be from the same server that delivered the page ¢ l Can be handled by server program to act as proxy Advanced Internet Programming – Fall 2006 34

AJAX Patterns ¢ Communication Control l Predictive Fetch • Preload anticipated next item • Example: Predictive Fetch • Example: Multi-stage Downlaod l Submission Throttling • Send data to server progressively • Incremental form validation is an example • Example: Submission Throttling Advanced Internet Programming – Fall 2006 35

AJAX Patterns (cont. ) ¢ Periodic Refresh l Keep view up-to-date with changing data • ESPN scoreboard • Gmail l ¢ Example: Periodic Refresh Fallback Patterns Cancel Pending l Try Again l Advanced Internet Programming – Fall 2006 36