event handling ajax
Download
Skip this Video
Download Presentation
Event Handling & AJAX

Loading in 2 Seconds...

play fullscreen
1 / 22

Event Handling & AJAX - PowerPoint PPT Presentation


  • 145 Views
  • Uploaded on

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)

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Event Handling & AJAX' - jasper


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
event handling ajax

Event Handling & AJAX

IT210 Web Systems

question
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)
event handling
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

event registration techniques
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)
events
Events
  • load
  • click
  • dblclick
  • focus
  • keydown
  • keyup
  • mouseover
  • reset
  • submit
events are also objects
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
what is ajax
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…
server side
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
slide16

*

*

Fig. 15.6 | XMLHttpRequest object properties.

slide17

*

*

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

xmlhttprequest security
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
review
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?
how it works another view
How it works—another view

http://code.google.com/edu/client/ajax-tutorial.html

ad