Event handling ajax
This presentation is the property of its rightful owner.
Sponsored Links
1 / 22

Event Handling & AJAX PowerPoint PPT Presentation


  • 92 Views
  • Uploaded on
  • Presentation posted in: General

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)

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.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 in javascript

Event Handling in JavaScript


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


Event handling ajax

AJAX


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.


Ajax demo from textbook

AJAX Demo from textbook


Xmlhttprequest in action

XMLHttpRequest in action


Xmlhttprequest template

XMLHttpRequest Template


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


Event handling ajax

*

*

Fig. 15.6 | XMLHttpRequest object properties.


Event handling ajax

*

*

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


Event handling ajax

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


Swim lane representation

Swim lane representation


  • Login