Event handling ajax
Download
1 / 22

Event Handling & AJAX - PowerPoint PPT Presentation


  • 142 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…


Fig 15 1 classic web application reloading the page for every user interaction
Fig. 15.1 | Classic web application reloading the page for every user interaction.


Fig 15 2 ajax enabled web application interacting with the server asynchronously
Fig. 15.2 | Ajax-enabled web application interacting with the server asynchronously.





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


*

*

Fig. 15.6 | XMLHttpRequest object properties.


*

*

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


Fig. 15.7 | XMLHttpRequest object methods. (Part 2 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