1 / 25

CS520 Web Programming Introduction to AJAX

Exploring AJAX technology for enhanced web interactivity, simplified distribution, and event handling, and delving into HTML event models, JavaScript fundamentals, and AJAX frameworks.

cathyperkins
Download Presentation

CS520 Web Programming Introduction to AJAX

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS520 Web ProgrammingIntroduction to AJAX Chengyu Sun California State University, Los Angeles

  2. Browser As The New OS • Easy application distribution and deployment • Greatly simplifies system administration • No software to download, install, and update • Centralized data management • Application can be used from anywhere • So why it didn’t happen??

  3. Interactivity Issue • Conventional GUI application • Rich event model • Responsive • No network delay • Partial redraw • Web application • Simple request-response model • Not so responsive • Send request, wait for response • Full page refresh

  4. HTML Event Models • HTML 4 Event Model • HTML 4.01 Specification - http://www.w3.org/TR/REC-html40/ • Limited features but portable • Standard Event Model • DOM Level 2 HTML Specification - http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/ • Fully featured but less portable • Vender specific event models

  5. Events and Event Handler • Events • onfocus, onblur, onkeypress, onkeydown, onkeyup, onclick, ondbclick, onmousedown, onmouseup, onmousemove, onmouseover … • Specify event handler • <element event=“code”> • For example: <button onclick="clickHandler();">click</button>

  6. Example: Event Handling with JavaScription • j1.html in jex • Disclaimer: all my JavsScript code is only tested under Firefox 1.07

  7. JavaScript • Interpreted language • Originally developed by Netscape • Syntax is similar to Java Web Server Client-side Core Server-side Browser

  8. Core JavaScript • Mainly covers language syntax, which is kind of similar to Java • Global Object • Created by a JavaScript interpreter • Global variables and global methods are simply variables and methods of this object

  9. Client-Side JavaScript • Embed JavsScript in HTML • <script> • type=“text/javascript” • lanague=“JavaScript” • src=“path_to_script_file” • Run inside a browser • Window is the global object

  10. Window self, window, parent, top navigator forms[] • elements[] • buttons • checkboxes • text fields • … frames anchors[] Current window location links[] history images[] document applets[] screen embeds[]

  11. Document Object Model (DOM) • Representing documents as objects so they can be manipulated in a programming language.

  12. DOM HTML Representation - HTML <html><head><title>JavaScript Example</title></head> <body> <h1>JavaScript Example</h1> <p>Some content.</p> </body> </html>

  13. DOM HTML Representation - DOM document <html> <head> <body> <title> <h1> <p> “JavaScript Example” “JavaScript Example” “Some content.”

  14. Nodes Document HTMLDocument Text CharacterData Comment Node Attribute Element HTMLElement

  15. Find Element • document.getElementsByTagName() • document.getElementById()

  16. Modify Element • HTMLElement properites and methods • IE • innerHTML • innerText • insertAdjacentHTML() • insertAdjacentText() • Netscape/Mozilla • innerHTML • Element-specific

  17. Communicate with Server • The request-response model is still a limiting factor in user interactivity • Solution: XMLHttpRequest • A JavaScript object • Send HTTP request • Parse XML response • Response can be handled asynchronously

  18. XMLHttpRequest Example • A1 in jex • A client that sends XMLHttpRequest • A servlet that replies with XML response • Non-blocking - the server response is handled asynchronously with a callback function • Partial page update

  19. About the Example • getReadyStateHandler() • Function parameter • Function return type

  20. XMLHttpRequest - Methods • abort() • getAllResponseHeaders() • getResponseHeader( header ) • open( method, url, asyncFlag, username, password ) • asyncFlag, username, password are optional • send( messageBody ) • setRequestHeader( name, value )

  21. onreadystatechange readyState 0 – uninitialized 1 – loading 2 – loaded 3 – interactive 4 – complete status statusText responseBody responseStream responseText responseXML XMLHttpRequest - Properties

  22. AJAX • AJAX = JavaScript + XMLHttpRequest • Asynchronous JavaScript and XML • The technologies have been around for several years • The recent buzz seems to be started by Google Maps • Vs. Yahoo Maps • Now it’s “Web 2.0”!

  23. AJAX Frameworks and Libraries • http://ajaxpatterns.org/Ajax_Frameworks • Some interesting ones (*) • Ajax JSP Tag Library - http://ajaxtags.sourceforge.net/ • Ajax Faces - http://myfaces.apache.org/ • OpenRico - http://openrico.org • Progamatic Objects - http://pragmaticobjects.com • Prototype - http://prototype.conio.net • Scriptaculous - http://script.aculo.us • Taconite - http://taconite.sourceforge.net (*) I bias toward Java related ones and the ones with online demos.

  24. Using Google Maps API • http://www.google.com/apis/maps • A JavaScript API • Host restriction • Some missing functions • Geocoding • Routing

  25. Google Maps in Evelyn • Longitude-latitude lookup using http://geocoder.us • Distance calculation and other spatial operations • PostGIS - http://postgis.refractions.net • Mixing JSP and JavaScript

More Related