CS 520 Web Programming Introduction to AJAX Chengyu
CS 520 Web Programming Introduction to AJAX Chengyu Sun California State University, Los Angeles
Browser As The New OS Application can be used from anywhere Easy application distribution and deployment Greatly simplifies system administration n n No software to download, install, and update Centralized data management So why it didn’t happen? ?
Disadvantages of Web Applications Usually requires high bandwidth Storing data remotely n n Privacy Reliability Limited number of GUI components n Compared to, e. g. http: //java. sun. com/docs/books/tutorial/ui/feature s/comp. Win. html Interactivity issues
Interactivity Issues Conventional GUI application n n Rich event model Responsive w No network delay w Partial redraw Web application n n Simple request-response model Not so responsive w Send request, wait for response w Full page refresh
HTML Event Models HTML 4 Event Model n n HTML 4. 01 Specification http: //www. w 3. org/TR/REC-html 40/ Limited features but portable Standard Event Model n n DOM Level 2 HTML Specification http: //www. w 3. org/TR/2003/REC-DOM-Level-2 HTML-20030109/ Fully featured but less portable Vender specific event models
Events and Event Handler Events n onfocus, onblur, onkeypress, onkeydown, onkeyup, onclick, ondbclick, onmousedown, onmouseup, onmousemove, onmouseover … Specify event handler n n <element event=“code”> For example: <button onclick="click. Handler(); ">click</button>
Example: Event Handling with Java. Script j 1. html Disclaimer: all my Javs. Script code is only tested under Firefox
Java. Script Interpreted language Originally developed by Netscape Syntax is similar to Java Web Server Client-side Browser Core Server-side
Core Java. Script Mainly covers language syntax, which is kind of similar to Java Global Object n n Created by a Java. Script interpreter Global variables and global methods are simply variables and methods of this object
Client-Side Java. Script Embed Javs. Script in HTML n <script> w type=“text/javascript” w language=“Java. Script” w src=“path_to_script_file” Run inside a browser Window is the global object
![The Window Object self, window, parent, top Current window navigator forms[] frames anchors[] location](http://slidetodoc.com/presentation_image_h2/9a647d9d303b33ad41267669f122d70d/image-11.jpg "The Window Object self, window, parent, top Current window navigator forms[] frames anchors[] location")
The Window Object self, window, parent, top Current window navigator forms[] frames anchors[] location links[] history images[] document applets[] screen embeds[] elements[] • • buttons checkboxes text fields …
Document Object Model (DOM) Representing documents as objects so they can be manipulated in a programming language.
An HTML Document <html> <head><title>Java. Script Example</title></head> <body> <h 1>Java. Script Example</h 1> <p>Some content. </p> </body> </html>
DOM Representation document <html> <head> <title> “Java. Script Example” <body> <h 1> “Java. Script Example” <p> “Some content. ”
Nodes Document Character. Data Node HTMLDocument Text Comment Attribute Element HTMLElement
Manipulate a Document Find elements Modify elements Create elements
Find Elements document. get. Element. By. Id() document. get. Elements. By. Name() document. get. Elements. By. Tag. Name()
Modify Elements HTMLElement properites and methods n IE w inner. HTML w inner. Text w insert. Adjacent. HTML() w insert. Adjacent. Text() n Netscape/Mozilla w inner. HTML n Element-specific
Create Elements document n n create. Element() create. Text. Node() node n n n set. Attribute(), remove. Attribute() append. Child(), remove. Child() insert. Before(), replace. Child()
Communicate with Server The request-response model is still a limiting factor in user interactivity Solution: XMLHttp. Request n A Java. Script object w Send HTTP request w Parse XML response n Response can be handled asynchronously
XMLHttp. Request - Properties onreadystatechange ready. State n n n 0 1 2 3 4 – – – uninitialized loading loaded interactive complete status. Text response. Body response. Stream response. Text response. XML
XMLHttp. Request - Methods abort() get. All. Response. Headers() get. Response. Header( header ) open( method, url, async. Flag, username, password ) n async. Flag, username, password are optional send( message. Body ) set. Request. Header( name, value )
An XMLHttp. Request Example A client scripts sends an XMLHttp. Request A servlet responses with an XML message When the message arrives on the client, a callback function is invoked to update the document
About the Example click. Handler() new. XMLHttp. Request() update. Document() get. Ready. State. Handler()
AJAX = Java. Script + XMLHttp. Request Asynchronous Java. Script and XML Characteristics of AJAX n n Non-blocking – the server response is handled asynchronously with a callback function Partial page update using Java. Script
More About AJAX The technologies have been around for several years The recent buzz seems to be started by Google Maps n Vs. Yahoo Maps (The Old Version) Now it’s “Web 2. 0”!
AJAX Frameworks and Libraries http: //ajaxpatterns. org/Ajax_Frameworks
More Widgets, Less Java. Script Simplifies XMLHttp. Request creation and response handling n E. g. Taconite AJAX widgets libraries n E. g. Ajax JSP Tag Library Full-fledged web development frameworks n E. g. ZK, GWT AJAX widgets for existing web development frameworks n E. g. ASP, JSF
More Ajax Examples A Taconite Example n n n Simplifies request creation Response generated by JSP No Java. Script required to update page CSNS n n Toggle file public Add section
Readings AJAX: Getting Started http: //developer. mozilla. org/en/docs/AJAX: Ge tting_Started Mastering AJAX, Part 1 -3 - http: //www 128. ibm. com/developerworks/views/web/libra ryview. jsp? search_by=Mastering+Ajax Taconite Documentation http: //taconite. sourceforge. net/
- Slides: 30
