1 / 30

Introduction to AJAX in Web Programming | Benefits, Challenges & Implementation

Learn about AJAX, its advantages, disadvantages, interactivity issues, HTML event models, JavaScript basics, DOM manipulation, event handling, and AJAX implementation for enhanced web interactivity.

scollin
Download Presentation

Introduction to AJAX in Web Programming | Benefits, Challenges & Implementation

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 • Application can be used from anywhere • Easy application distribution and deployment • Greatly simplifies system administration • No software to download, install, and update • Centralized data management So why it didn’t happen??

  3. Disadvantages of Web Applications • Usually requires high bandwidth • Storing data remotely • Privacy • Reliability • Limited number of GUI components • Compared to, e.g. http://java.sun.com/docs/books/tutorial/ui/features/compWin.html • Interactivity issues

  4. Interactivity Issues • 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

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

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

  7. Example: Event Handling with JavaScript • j1.html • Disclaimer: all my JavsScript code is only tested under Firefox

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

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

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

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

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

  13. An HTML Document <html><head><title>JavaScript Example</title></head> <body> <h1>JavaScript Example</h1> <p>Some content.</p> </body> </html>

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

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

  16. Manipulate a Document • Find elements • Modify elements • Create elements

  17. Find Elements • document.getElementById() • document.getElementsByName() • document.getElementsByTagName()

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

  19. Create Elements • document • createElement() • createTextNode() • node • setAttribute(), removeAttribute() • appendChild(), removeChild() • insertBefore(), replaceChild()

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

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

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

  23. An XMLHttpRequest Example • A client scripts sends an XMLHttpRequest • A servlet responses with an XML message • When the message arrives on the client, a callback function is invoked to update the document

  24. About the Example • clickHandler() • newXMLHttpRequest() • updateDocument() • getReadyStateHandler()

  25. AJAX • AJAX = JavaScript + XMLHttpRequest • Asynchronous JavaScript and XML • Characteristics of AJAX • Non-blocking – the server response is handled asynchronously with a callback function • Partial page update using JavaScript

  26. More About AJAX • The technologies have been around for several years • The recent buzz seems to be started by Google Maps • Vs. Yahoo Maps (The Old Version) • Now it’s “Web 2.0”!

  27. AJAX Frameworks and Libraries • http://ajaxpatterns.org/Ajax_Frameworks

  28. More Widgets, Less JavaScript • Simplifies XMLHttpRequest creation and response handling • E.g. Taconite • AJAX widgets libraries • E.g. Ajax JSP Tag Library • Full-fledged web development frameworks • E.g. ZK, GWT • AJAX widgets for existing web development frameworks • E.g. ASP, JSF

  29. More Ajax Examples • A Taconite Example • Simplifies request creation • Response generated by JSP • No JavaScript required to update page • CSNS • Toggle file public • Add section

  30. Readings • AJAX:Getting Started - http://developer.mozilla.org/en/docs/AJAX:Getting_Started • Mastering AJAX, Part 1-3 - http://www-128.ibm.com/developerworks/views/web/libraryview.jsp?search_by=Mastering+Ajax • Taconite Documentation - http://taconite.sourceforge.net/

More Related