event handling & ajax
DESCRIPTION
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) - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/1.jpg)
Event Handling & AJAX
IT210 Web Systems
![Page 2: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/2.jpg)
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)
![Page 3: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/3.jpg)
Event Handling in JavaScript
![Page 4: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/4.jpg)
Event Handling
EventSomething that a user or the page doesClick
Event HandlerCode that executes when an eventoccurs; typically a functionPlayMusic()
Event RegistrationConnects DOM element, Event, and Event Handler together<button onclick = “PlayMusic()”
DOM ElementHTML element tied to anEvent <button>Play</button>
![Page 5: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/5.jpg)
Event Registration Techniques
1. Inline HTML EventHandlers: <button onclick=“PlayMusic()">
2. Javascript event property assignment object.onclick=“PlayMusic()“;
3. addEventListener method (recommended) object.addEventListener( “click”, PlayMusic,
false); object.addEventListener(“click”, function() {JS
code}, false)
![Page 6: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/6.jpg)
Events
loadclickdblclickfocuskeydownkeyupmouseoverresetsubmit…
![Page 7: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/7.jpg)
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
![Page 8: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/8.jpg)
AJAX
![Page 9: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/9.jpg)
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…
![Page 10: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/10.jpg)
2008 Pearson Education, Inc. All rights reserved.
10
Fig. 15.1 | Classic web application reloading the page for every user interaction.
![Page 11: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/11.jpg)
2008 Pearson Education, Inc. All rights reserved.
11
Fig. 15.2 | Ajax-enabled web application interacting with the server asynchronously.
![Page 12: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/12.jpg)
AJAX Demo from textbook
![Page 13: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/13.jpg)
XMLHttpRequest in action
![Page 14: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/14.jpg)
XMLHttpRequest Template
![Page 15: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/15.jpg)
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
![Page 16: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/16.jpg)
2008 Pearson Education, Inc. All rights reserved.
16
Property Description
onreadystatechange Stores the callback function—the event handler that gets called when the server responds.
readyState Keeps track of the request’s progress. It is usually used in the callback function to determine when the code that processes the response should be launched. The readyState value 0 signifies that the request is uninitialized; 1 signifies that the request is loading; 2 signifies that the request has been loaded; 3 signifies that data is actively being sent from the server; and 4 signifies that the request has been completed.
responseText Text that is returned to the client by the server.
responseXML If the server’s response is in XML format, this property contains the XML document; otherwise, it is empty. It can be used like a document object in JavaScript, which makes it useful for receiving complex data (e.g. populating a table).
status HTTP status code of the request. A status of 200 means that request was successful. A status of 404 means that the requested resource was not found. A status of 500 denotes that there was an error while the server was proccessing the request.
statusText Additional information on the request’s status. It is often used to display the error to the user when the request fails.
Fig. 15.6 | XMLHttpRequest object properties.
*
*
![Page 17: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/17.jpg)
2008 Pearson Education, Inc. All rights reserved.
17
Method Description
open Initializes the request and has two mandatory parameters—method and URL. The method parameter specifies the purpose of the request—typically GET if the request is to take data from the server or POST if the request will contain a body in addition to the headers. The URL parameter specifies the address of the file on the server that will generate the response. A third optional boolean parameter specifies whether the request is asynchronous—it’s set to true by default.
send Sends the request to the sever. It has one optional parameter, data, which specifies the data to be POSTed to the server—it’s set to null by default.
Fig. 15.7 | XMLHttpRequest object methods. (Part 1 of 2.)
*
*
![Page 18: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/18.jpg)
2008 Pearson Education, Inc. All rights reserved.
18
Method Description
setRequestHeader Alters the header of the request. The two parameters specify the header and its new value. It is often used to set the content-type field.
getResponseHeader Returns the header data that precedes the response body. It takes one parameter, the name of the header to retrieve. This call is often used to determine the response’s type, to parse the response correctly.
getAllResponseHeaders Returns an array that contains all the headers that precede the response body.
abort Cancels the current request.
Fig. 15.7 | XMLHttpRequest object methods. (Part 2 of 2.)
![Page 19: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/19.jpg)
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
![Page 20: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/20.jpg)
ReviewWhat are the main benefits of using AJAX? (T/F) AJAX is a language specifically designed for asynchronous communications client serverWhat is the name of the Class/Object that allows for asynch communication between the client and server?Are responses always XML documents?
![Page 21: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/21.jpg)
How it works—another view
http://code.google.com/edu/client/ajax-tutorial.html
![Page 22: Event Handling & AJAX](https://reader036.vdocuments.mx/reader036/viewer/2022062315/56814f83550346895dbd36fb/html5/thumbnails/22.jpg)
Swim lane representation