Objectives Objectives
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
490
On Slideshare
490
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Objectives Review: Security • Review Security • Why has the Web become such a huge • Ajax target? • What are some security vulnerabilities for Web applications?  How can you protect against them? May 28, 2008 Sprenkle - CS297 1 May 28, 2008 Sprenkle - CS297 2 Ajax: Asynchronous JavaScript + XML Ajax Difference • Not a programming language • In normal request/response HTTP cycles, the • A way of using JavaScript browser locks waiting for the response and • Way to provide more responsive Web pages an entire page must be displayed  Get data from a server without reloading your page • With Ajax, asynchronous requests may be • Allows dynamically displaying data or updating the made and responses are used to update part page without disturbing the user experience of a page • Aids in the creation of rich, user-friendly web sites  User can continue to interact with a page while the request is in progress  Examples: Google maps, Facebook, Flickr, A9  Less data needs to be transmitted  Page update is quicker because only a part of a page is modified May 28, 2008 Sprenkle - CS297 3 May 28, 2008 Sprenkle - CS297 4 Core Ajax Concepts Ajax Request Overview • JavaScript's XMLHttpRequest object can fetch files from a web server Could be a Servlet, JSP, PHP, ASP, …  Supported in IE5+, Safari, Firefox, Opera (with minor incompatibilities) • JavaScript can execute XMLHttpRequest asynchronously HTML Page Server  In the background, transparent to user URL • Contents of fetched file can be put into current web page using DOM Replace  Reminder: Document Object Model This • Result: user's web page updates dynamically Piece: Identified without a page reload using DOM May 28, 2008 Sprenkle - CS297 5 May 28, 2008 Sprenkle - CS297 6 1
  • 2. Typical Ajax Request Typical Ajax Request 1. User clicks, invokes event handler 4. Server retrieves appropriate data, sends it back 2. Handler's JS code creates an XMLHttpRequest 5. XMLHttpRequest fires event when data arrives object  Called a callback 3. XMLHttpRequest object requests a document 6. Can attach a handler to be notified when data arrives to from a web server parse data, update web page May 28, 2008 Sprenkle - CS297 7 May 28, 2008 Sprenkle - CS297 8 How Does This Change Typical Ajax Request Communication Patterns? • Leads to smaller, more frequent communication with server • Data can be any text format: HTML, XML, Text, … May 28, 2008 Sprenkle - CS297 9 May 28, 2008 Sprenkle - CS297 10 XMLHttpRequest Object Using XMLHttpRequest • Methods • Attach an event handler to the onreadystatechange event  abort, getAllResponseHeaders,  Handler will be called when request state changes, e.g., getResponseHeader, open, send, finishes setRequestHeader  function contains code to run when request is • Properties complete  onreadystatechange, readyState, • Replace url with the file you want to download responseText, responseXML, status, • Send the request statusText In an onscreen control's event var ajax = new XMLHttpRequest(); ajax.onreadystatechange = function; handler: ajax.open("GET", url, true); ajax.send(null); May 28, 2008 Sprenkle - CS297 11 May 28, 2008 Sprenkle - CS297 12 2
  • 3. XMLHttpRequest’s readyState XMLHttpRequest’ Callback Function Example Property Only do something • Holds the status of the XMLHttpRequest when readyState is 4 function processChange() { • Changes value from 0 to 4 during a request cycle: // 4 means the response has been returned, ready to be processed if (obj.readyState == 4) {  0: not initialized // 200 means "OK" Http Status Code if (obj.status == 200) {  1: connection established // process whatever has been sent back here …  2: request sent // any other status means a problem  3: processing } else { alert("There was a problem in the returned data:");  4: finished and response is ready } } • readyState changes  onreadystatechange } handler (callback function) runs • Usually we are only interested in readyState of 4 May 28, 2008 Sprenkle - CS297 13 May 28, 2008 Sprenkle - CS297 14 If a native object Ajax XMLHttpRequest template Browser Compatibility (Firefox, Opera, Safari) function ProcessXML(url) { • Most Ajax code uses an anonymous if (typeof(XMLHttpRequest) != "undefined") { // obtain new object function as the event handler obj = new XMLHttpRequest(); callback // set the callback function function  A function declared inside another and not given obj.onreadystatechange = processChange; // do a GET with the url; "true" for asynch a name Needs to obj.open("GET", url, true);  Useful because it can access the surrounding be visible // null for GET with native object obj.send(null); // IE/Windows ActiveX object local variable } else if (window.ActiveXObject) { var ajax = new XMLHttpRequest(); obj = new ActiveXObject("Microsoft.XMLHTTP"); if (obj) { ajax.onreadystatechange = function() { obj.onreadystatechange = processChange; if (ajax.readyState == 4) { obj.open("GET", url, true); do something with ajax.responseText; // don't send null for ActiveX } obj.send(); } }; } // else browser does not support Ajax ajax.open("GET", url, true); return obj; ajax.send(null); } May 28, 2008 Sprenkle - CS297 15 May 28, 2008 Sprenkle - CS297 16 Pet Survey Example Project Questions • What happens if a student’s session times out?  Will they be able to restart their quiz? • Ready to apply AuthenticationFilter?  Need well-known URLs, Roles May 28, 2008 Sprenkle - CS297 17 May 28, 2008 Sprenkle - CS297 18 3
  • 4. TODO Evaluations • Project  Implementation deadline Friday  Documentation, Demo on Monday • Evaluations May 28, 2008 Sprenkle - CS297 19 May 28, 2008 Sprenkle - CS297 20 4