Remaining Weeks • This week (July 23) There are still spaces available in Prof. Greg Wilson’s – AJAX • Next week (July 30) CSC491: Capstone Project – guest lecture Fall 2008 • Nilton Bila on “PageTailor” Real projects! • Related to some of your final exam questions Real clients! – 2 office hours (both running 5pm-6pm) Class held in a pub! • Ali (BA3289): A2 re-marking Mail [email protected] for details • Torsten (BA5287): A4-related questions or see • Last week (Aug 6) www.cs.toronto.edu/~gvwilson/capstone.pdf – A4 due (no extension; zero tolerance) for last term’s projects (this term’s will be even cooler) – Security & course review 1
RIA (Rich Internet Application) • Bridge gap between native application and AJAX (Asynchronous normal Internet ones JavaScript And XML) • More interactive Web applications • Perform similar to native application • Enabling technologies: JavaScript, DHTML (DOM), AJAX Nan Niu ([email protected]) • Shift from page-based interaction to CSC309 -- Summer 2008 event-driven programming where event result in updates of portions of pages
4
AJAX Traditional Web vs. AJAX • 2nd communication path b/w browser and server • Traditional Web – Remove communication bottleneck b/w user and Web application – User initiated HTTP requests – Talk to server from JavaScript • Typing on navigation window, or clicking on form – Skip page reload – Response from server overrides existing page • Changes the typical page flow – Low request rate, and random amount of time between requests – More frequent requests – Smaller responses of non-HTML data • AJAX application • Defined by Jesse James Garret in Feb. of 2005 – New type of request that does not trigger page – Underlying technology in place since 2001 reload – Google releases Gmail in March of 2004 – Not initiated by user • One of first mainstream app.s to use AJAX – Requests are typically small, but more frequent • Examples: read/tag/spell check messages without a page reload, auto save drafts 5 6
1 Request Flow Classic vs. AJAX
Web Application AJAX Application
7 8
Synchronous vs. Asynchronous Taxonomy • Core AJAX – Asynchronous communication (XMLHttpRequest) – Data encoding (XML) • Closely related to AJAX – Interactive part of UI – Visual effects libraries (fades, swipes) – Drag and drop – Dynamic positioning • Part of the rest of RIA – Scalable Vector Graphics (SVG) 9 10
XMLHttpRequest XMLHttpRequest Methods • JavaScript HTTP client – Can load content other than XML
• Issue GET and POST requests
• Security limitations apply – Same point of origin: Can only connect to same domain as currently loaded page – Only load HTTP requests • File URLs don’t work
11 12
2 XMLHttpRequest Properties onreadystatechange Property • Defines a function to retrieve data returned by the server after a request is sent • Must be set before sending request • The following code defines a function for this purpose (with an empty body for now): var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { // code for receiving response data }
13 14
readyState Property Update the Function (Event Handler) • This property holds the status of the server’s xmlhttp.onreadystatechange = function() response • Each time the readyState changes, the { onreadystatechange function will be executed if(xmlhttp.readyState==4) • State description { – 0 The request is not initialized // Get the data from the server’s response – 1 The request has been set up } – 2 The request has been sent – 3 The request is in process } – 4 The request is complete
15 16
responseText Property responseXML Property • This property retrieves the response body • Retrieve document data returned by the returned by the server as a string server as an XML DOM object • Type: DOMString (read-only) • Type: Document (read-only) xmlhttp.onreadystatechange = function() var xmldoc = xmlhttp.responseXML.documentElement; { • You can access it as a DOM document if(xmlhttp.readyState==4) { document.getElementById(“formentry”).value = xmlhttp.responseText; } }
17 18
3 XMLHttpRequest Methods Methods (Verbs) • Asking for data (send request) • GET – open() – Retrieve a representation of a resource • Two required arguments • POST – method (GET, POST, PUT, DELETE, HEAD, OPTION) – Create a new resource – server-side URI • HEAD – send() – Request a resource without body • One argument • PUT – data to be sent (DOMString or Document) – null for GET – Update a resource – can be omitted • DELETE – Delete a resource
19 20
Execute the AJAX Function The Basic AJAX Process • Want it to run “behind the scenes” • JavaScript • Designate a request handler function – Supply as onreadystatechange attribute of request
• Extract return text with responseText or responseXML • Do something with the result21 22
The Basic AJAX Process (Cont’d) XMLHttpRequest Events • HTML – Loads JavaScript – Designates control that initiates request – Gives ids to input elements that will be read by script Firefox Specific
• Firefox resets handlers after request completes
23 24
4 send(payload) Asynchronous Request • Happens in the background • Makes connection to the URL specified in open – Does not block browser • Blocks for synchronous requests, and returns – Browser can continue running JavaScript code immediately otherwise. – User can continue interaction with page • Sends cookies and other default headers – Can mask long latency/low bandwidth connections • POST request: – payload is send as body of HTTP message var req=XMLHttpRequest(); req.onreadystatechange = function () { – Need to set Content-type header if (req.readyState == 4) { • Example: Mimic sending a form if(req.status == 200) { var req = new XMLHttpRequest(); alert(req.responseText); } req.open(‘POST’,’index.php’, false); else { req.setRequestHeader(‘Content-type’, alert(‘Loading Error: [‘ + req.status + ‘]’ + req.statusText); ‘application/x-www-form-urlencoded’) } req.send(‘one=firstArg&two=secondArg’); } if (req.status==200) } req.open(‘GET’’, ’/csc309/servlet/ajaxserver’,true); alert(req.responseText); req.send(null); 25 26
Add HTML to a Page Adding Dynamically Generated HTML to a Page
27 28
IE AJAX Cross-Browser XMLHttpRequest function XMLHttpClient () { try { • XMLHttpRequest is an ActiveX object // Mozilla / Safari / Firefox xmlhttp = new XMLHttpRequest(); } catch (e) { // IE var XMLHTTP_IDS = new Array('MSXML2.XMLHTTP.7.0‘ var xmlhttp = new 'MSXML2.XMLHTTP.6.0' 'MSXML2.XMLHTTP.5.0', ActiveXObject(‘MSXML2.XMLHTTP.5.0’); 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP' ); • Multiple versions var success = false; for (var i=0;i < XMLHTTP_IDS.length && !success; i++) { – Microsoft.XMLHTTP try { this.xmlhttp = new ActiveXObject(XMLHTTP_IDS[i]); – MSXML2.XMLHTTP success = true; } catch (e) {} – MSXML2.XMLHTTP.3.0 } if (!success) { – MSXML2.XMLHTTP.4.0 throw new Error('Unable to create XMLHttpRequest.'); } – MSXML2.XMLHTTP.5.0 } return xmlhttp; 229 } 330
5