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

5. Event Registration Techniques 1. Inline HTML EventHandlers: 2. Javascript event property assignment object.onclick=“PlayMusic()“; 3. 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.  2008 Pearson Education, Inc. All rights reserved. 10 Fig. 15.1 | Classic web application reloading the page for every user interaction.

11.  2008 Pearson Education, Inc. All rights reserved. 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.  2008 Pearson Education, Inc. All rights reserved. 16 Fig. 15.6 | XMLHttpRequest object properties. * *

17.  2008 Pearson Education, Inc. All rights reserved. 17 Fig. 15.7 | XMLHttpRequest object methods. (Part 1 of 2.) * *

18.  2008 Pearson Education, Inc. All rights reserved. 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