1 / 22

Event Handling & AJAX

Event Handling & AJAX. IT210 Web Systems. Question. How do we enable users to dynamically interact with a website? Answer: Use mouse and keyboard to trigger Events (e.g., “click”, “hover”, press ctrl key) that call functions (Event Handlers)

jasper
Download Presentation

Event Handling & 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. Event Handling & AJAX IT210 Web Systems

  2. Question • How do we enable users to dynamically interact with a website? • Answer: • Use mouse and keyboard to trigger Events (e.g., “click”, “hover”, press ctrl key) that call functions (Event Handlers) • Use AJAX asynchronous requests to update portions of a webpage in parallel (based on Events)

  3. Event Handling in JavaScript

  4. Event Handling Event Registration Connects DOM element, Event, and Event Handler together <button onclick = “PlayMusic()” DOM Element HTML element tied to an Event <button>Play</button> Event Handler Code that executes when an event occurs; typically a function PlayMusic() Event Something that a user or the page does Click

  5. Event Registration Techniques • Inline HTML EventHandlers: • <button onclick=“PlayMusic()"> • Javascript event property assignment • object.onclick=“PlayMusic()“; • addEventListener method (recommended) • object.addEventListener( “click”, PlayMusic, false); • object.addEventListener(“click”, function() {JS code}, false)

  6. Events • load • click • dblclick • focus • keydown • keyup • mouseover • reset • submit • …

  7. Events are also Objects! • Event Properties include: • button (which mouse button was clicked?) • altKey (was the Alt key pressed?) • target (the DOM element that triggered the event) • timeStamp (when was the event triggered?) • type (name of event) • Event Methods also exist

  8. AJAX

  9. What is AJAX? • AJAX = Asynchronous JavaScript + XML • Not a new technology! A way of using old technologies • HTML, CSS, DOM, Javascript, & XMLHttpRequest • Downloads data without reloading entire page • Allows dynamic user experience • Aids in creation of Rich Internet Applications (RIAs) • Gmail, google Maps, Flickr…

  10. Fig. 15.1 | Classic web application reloading the page for every user interaction.

  11. Fig. 15.2 | Ajax-enabled web application interacting with the server asynchronously.

  12. AJAX Demo from textbook

  13. XMLHttpRequest in action

  14. XMLHttpRequest Template

  15. Server Side • Could be a simple file request (as above) • Or pass a php file name • Or other script (.asp etc) asyncRequest.open('GET',“myScript.php?q="+str, true ); • The php file could query a database

  16. * * Fig. 15.6 | XMLHttpRequest object properties.

  17. * * Fig. 15.7 | XMLHttpRequest object methods. (Part 1 of 2.)

  18. Fig. 15.7 | XMLHttpRequest object methods. (Part 2 of 2.)

  19. XMLHttpRequest Security • can only be run on a web page stored on a web server (e.g. not your C: drive) • can only fetch files from the same site that the page is on • www.foo.com/a/b/c.html can only fetch from www.foo.com

  20. Review • What are the main benefits of using AJAX? • (T/F) AJAX is a language specifically designed for asynchronous communications client  server • What is the name of the Class/Object that allows for asynch communication between the client and server? • Are responses always XML documents?

  21. How it works—another view http://code.google.com/edu/client/ajax-tutorial.html

  22. Swim lane representation

More Related