AJAX Programming Chris Seddon

Size: px

Start display at page:

Download "AJAX Programming Chris Seddon"

Janis Goodwin
6 years ago
Views:

1 AJAX Programming Chris Seddon CRS Enterprises Ltd 1

2 CRS Enterprises Ltd 2

3 What is Ajax? "Asynchronous JavaScript and XML" Originally described in 2005 by Jesse James Garrett of Adaptive Path Essentially distills existing technologies Asynchronous communication between client and server Partial screen updates Replaces traditional click-wait-redraw model Faster responses Remaining page context available during refresh Updates can be triggered on different events No longer necessary to click on link or button CRS Enterprises Ltd 3

4 Key Ajax Technologies AJAX is not itself a language! Uses JavaScript on the client and any Language on the Server Client Technologies used: HTML (or (or XHTML) and CSS Presenting Presenting information information Document Object Model Dynamic Dynamic display display and and interaction interaction with with the the information information XMLHttpRequest object Retrieving Retrieving data data ASYNCHRONOUSLY from from the the web web server. server. Javascript Binding Binding everything everything together together CRS Enterprises Ltd 4

5 Who is using AJAX? Who Isn't? AJAX is now widespread BBC Home page using portals Google Office Applications Creation of thick client look and feel Google Maps Background fetch of map data Flickr Background fetch of photos for display CRS Enterprises Ltd 5

6 Portals Portals are often built using portlet components Parts of other web sites Users can select from available portlets... and customize their layouts. Multiple views of the same Web application Consider del.icio.us: Browser, JSON, REST/XML, JavaScript Widget interfaces all to the same application. You don t have to go to to use it. Simple programming interfaces encourage do it yourself mash-ups JSON, AJAX compatible REST APIs CRS Enterprises Ltd 6

7 The Ajax Web Application Model Without Ajax User Interface HTTP(S) HTML + CSS Web Server Data Store, Backend processing JavaScript With Ajax User Interface HTML + CSS Ajax Engine HTTP(S) XML / text data Web Server Data Store, Backend processing CRS Enterprises Ltd 7

8 The Ajax Web Application Model - 2 Client Server data data data data time Client Browser UI input display Ajax Engine Server data data data data time CRS Enterprises Ltd 8

9 Steps in an Ajax Interaction <script> 2 </script> 1 XMLHttpRequest XMLHttpRequest chris 6 function function callback() callback() {{ // // Update Update HTML HTML DOM DOM // // with with result result }} onkeyup event submit NOT clicked Submit Submit 3 validate?id=chris 5 <response>... </ response > Server-side processing (not (not AJAX AJAX aware) aware) 4 Database CRS Enterprises Ltd 9

10 Introducing XMLHttpRequest XMLHttpRequest JavaScript object encapsulates making HTTP request from browser to server Scripting HTTP with XMLHttpRequest is a three-part process: Creating an an XMLHttpRequest object Submitting your HTTP request to to a web server Synchronously or or asynchronously retrieving the server s response CRS Enterprises Ltd 10

11 XMLHttpRequest Methods Methods open(http-method, url, synch-or-asynch) initialisation, with URL, HTTP method to use and synchronous or asynchronous flag setrequestheader(label, value) before sending send(content) make the call, including text or XML content abort( ) abort current call CRS Enterprises Ltd 11

12 XMLHttpRequest Properties onreadystatechange event handler called whenever readystate changes readystate current status of request status HTTP status responsetext response as text responsexml response as XML statustext status as text CRS Enterprises Ltd 12

13 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 can only fetch from CRS Enterprises Ltd 13

14 The readystate Property For asynchronous operation Value is integer between 0 and 4 0 not not initialised --open() not not yet yet called 1 initialised but but send() not not called 2 send() called but but no no response from from server 3 data data being received from from server 4 request is is complete Use event handler to be notified of changes to value Some browser inconsistencies with state CRS Enterprises Ltd 14

15 Creating the XMLHttpRequest Object Beware browser incompatibility different object name in IE Use initialisation function to hide differences var varreq; req; function initrequest() {{ if if (( window.xmlhttprequest )){{ req req = new new XMLHttpRequest(); }} else else if if (( window.activexobject )){{ isie isie = true; true; req req = new new ActiveXObject("Microsoft.XMLHTTP"); }} }} // // req reqnow available for for use, use, browsers now now support // // the the same same properties and and methods CRS Enterprises Ltd 15

16 Preparing and Sending The Request Set event handler <input type="text" size="20" id="userid" name="id" onchange="checkuserid();" /> Initialise XMLHttpRequest object for call function checkuserid( useridelem ) { initrequest(); // from before req.onreadystatechange = handleresponse; if (!target ) { target = document.getelementbyid("userid" ); } var url = "validate?id=" + encode(target.value); req.open( "GET", url, true ); req.send( null ); // Make the call } CRS Enterprises Ltd 16

17 At The Server (Java Servlets) doget() method checks the userid Sends back appropriate XML with result public public void void doget(httpservletrequest req, req, HttpServletResponse res) res) throws throws IOException, ServletException {{ String String result; result; String StringtargetId = req.getparameter("id"); res.setcontenttype("text/xml"); if if ((targetid!=!= null) null) && &&(isvalidid(targetid))) result result = "<valid>true</valid>"; else else result result = "<valid>false</valid>"; res.getwriter().write(result); }} CRS Enterprises Ltd 17

18 Processing The Result Callback function registered as onreadystatechange event handler function handleresponse () (){{ if if (( req.readystate == == 4 )){{ // // Request completed if if (( req.status == == )){{ // // All All OK OK if if (( req.getresponseheader() == == "text/xml" )){{ // // We We have have XML, XML, retrieve it it as as a DOM DOM document var vardoc = req.responsexml; // // Now Now process the the response }} }} }} }} CRS Enterprises Ltd 18

19 Using The Result To display a message on the validity of the user id called from response handler, using DOM functions to alter document content function setuidmsg(msg){ var var el el = document.getelementbyid("useridmsg"); var var text text = (msg (msg == == "false") "false")? "Invalid ID" ID" ::"Valid "Valid ID"; ID"; }} var var body body = document.createtextnode(text); if if (el.childnodes[0] )){{ el.replacechild(body, el.childnodes[0]); // // replace replace existing }} else else {{ el.appendchild(body); <body> } } <div } <div id="useridmsg"></div> } </body> CRS Enterprises Ltd 19

20 Request Timeouts What if the server does not respond? Synchronous requests block entire browser Asynchronous requests can be timed out Use Window.setTimeout() with XMLHttpRequest.abort() If response arrives before timeout, use Window.clearTimeout() CRS Enterprises Ltd 20

21 Response Encodings - XML For structured data, XML is often used // // Server Server side side code, code, generating response resp.setcontenttype("text/xml"); resp.setheader("cache-control", "no-cache"); resp.getwriter().write("<book> <author>john Doe</author> <title>all About About Ajax</title> </book>"); if if (( req.getresponseheader() == == "text/xml" )){{ // // We We have have XML, XML, retrieve it it as as a DOM DOM document var var doc doc = req.responsexml; // // Now Now pull pull out out data data using using JavaScript DOM DOM functions var var author author = doc.childnodes[0].text }} CRS Enterprises Ltd 21

22 Response Encodings - JSON... JavaScript Object Notation (JSON) easy to convert to JavaScript object use eval or a parser (for more security) // // Server Server side side code, code, generating response resp.setcontenttype("text/javascript"); resp.setheader("cache-control", "no-cache"); resp.getwriter().write("[ "author": "John "John Doe", Doe", "title": "title":"all "All About About Ajax" Ajax" ]]"); "); [[ "author": "John "John Doe", Doe", "title": "title":"all "All About About Ajax" Ajax" ]] CRS Enterprises Ltd 22

23 ... JSON Can make cross-domain requests unlike AJAX which uses XMLHttpRequest yo make cross-domain requests, just dynamically create your <script> tags using the DOM and add a src attribute to point to the desired JSON URL CSS can also be expressed in JSON JavaScript's eval() method to convert the string into a real JavaScript object var data = eval('(' + req.responsetext + ')'); CRS Enterprises Ltd 23

24 JavaScript/AJAX Toolkits CRS Enterprises Ltd 24

25 JavaScript/AJAX/JSON Toolkits jquery GWT (Google Web Toolkit) Dojo YUI (Yahoo! User Interface Library) DWR script.aculo.us Prototype CRS Enterprises Ltd 25

26 Other Tools Firefox Extensions Firebug view the XMLHttpRequests Selenium Record scripts and replay them! JSView See All JavaScript/CSS with a click Modify Headers (what the name implies!) NoScript Turn off or limit scripts Fiddler and other Proxys watch all client-server traffic CRS Enterprises Ltd 26

27 jquery jquery wrapper wraps a set of DOM elements jquery is also an object <html> <html> <head> <script <script type="text/javascript" src="jquery.js"></script> <script <script type="text/javascript"> $(document).ready(function() {{ $("h1").css("color", "blue"); }) }) </script> need to know the CSS </head> selector syntax <body> <h1>test Page</h1> </body> </html> CRS Enterprises Ltd 27

28 GWT (Google Web Toolkit) Open source Java software development framework Develop Web applications as if they were Swing-like GUIs Easier AJAX application development You write your front end in Java using any Java IDE available (e.g. Eclipse, JProfiler, JUnit, IntelliJ ) GWT complier will automatically convert it into browser-complaint JavaScript and HTML Confirm that the Web App. Runs successfully in each browser GWT Architecture GWT Java-to-JavaScript Compiler: Java-to-JavaScript compiler GWT Hosted Web Browser: run and execute your GWT applications JRE emulation library: contains JavaScript implementations of the most widely used classes in the Java standard class library. GWT Web UI class library: set of custom interfaces and classes that let your create web browser "widgets with use of CSS CRS Enterprises Ltd 28

29 Dojo Dojo is an open-source JavaScript toolkit Widely used Large range of functionality Basic layout Fonts, images etc Animations Ajax Supports all major browsers Preferred toolkit in Fidelity CRS Enterprises Ltd 29

30 Dojo - Getting Started Basic capabilities implemented in file dojo.js Dojo provides hook to ensure that document is completely loaded before functionality is applied Hides cross-browser differences <html> <html> <head> <title>dojo Toolkit Toolkit Test Test Page</title>  --> <script <script type="text/javascript" src="js/dojo/dojo.js" djconfig="parseonload:true, isdebug:false"></script> <script <script type="text/javascript"> var var init init = function() {{ alert("page is is ready..."); }; }; dojo.addonload(init); </script> </head> CRS Enterprises Ltd 30

31 YUI (Yahoo! User Interface Library) Collection of JavaScript and CSS resources Makes RIA (Rich Internet Applications) easier to build Open source Yahoo! User Interface Library components Utilities UI Controls CSS resources Yahoo! Design Patterns Library easily implement design patterns CRS Enterprises Ltd 31

32 DWR (Direct Web Remoting) Java open source library facilitates writing AJAX web sites Two components: Java Servlet running on the server to process requests and sends responses back to the browser. JavaScript running in the browser to send requests and can dynamically update the webpage. Dynamically generates JavaScript feels like the execution is happening in the browser, but... server is executing the code DWR converts data back and forth using a callback function CRS Enterprises Ltd 32

Introduction to Ajax. Sang Shin Java Technology Architect Sun Microsystems, Inc.

Introduction to Ajax. Sang Shin Java Technology Architect Sun Microsystems, Inc. Introduction to Ajax Sang Shin Java Technology Architect Sun Microsystems, Inc. sang.shin@sun.com www.javapassion.com Agenda 1.What is Rich User Experience? 2.Rich Internet Application (RIA) Technologies