CITS1231 Web Technologies. Ajax and Web 2.0 Turning clunky website into interactive mashups

Size: px

Start display at page:

Download "CITS1231 Web Technologies. Ajax and Web 2.0 Turning clunky website into interactive mashups"

Toby Wilkins
6 years ago
Views:

1 CITS1231 Web Technologies Ajax and Web 2.0 Turning clunky website into interactive mashups

2 What is Ajax? Shorthand for Asynchronous JavaScript and XML. Coined by Jesse James Garrett of Adaptive Path. Helps transform clunky Web interfaces into interactive applications. Made popular by Google because of Google Suggest. 2

3 Google AJAX Search API 3

4 Google AJAX Search API 4

5 Web 1.0 is Synchronous In Web 1.0, all requests are synchronous: The client sends a request to the server. The client waits for a response from the server. While waiting, user sees: An hourglass (especially on Windows). A spinning beachball (usually on Mac machines). The application essentially freezes and sometimes the cursor changes. Web 1.0 applications: Feel clunky or slow. Lack of realtime interactivity. Application essentially becomes unusable until response received. If server busy or extensive processing required, wait maybe long. 5

6 Web 2.0 and Asynchronous Requests Web 2.0 introduces asynchronous requests. The client sends a request to the server. The client does not wait for a response from the server. The user can continue to use the web page. No spinning beachball or whirling hourglass. No big application freeze. When server response finally arrives, some JavaScript function will execute in the background and updates your web page (see later). End result is a Web 2.0 application: doesn't feel clunky or slow. is responsive, interactive, and feels faster. This is just one component of Web 2.0, but it's a very important one. All the slick GUI components and Web design paradigms can't overcome a slow, synchronous request/response model. 6

7 Web 2.0 Components HTML is used to build Web forms and identify fields for use in the rest of your application. JavaScript code is the core code running Ajax applications and it helps facilitate communication with server applications. DHTML, or Dynamic HTML, helps you update your page dynamically. DOM, the Document Object Model, will be used (through JavaScript code) to work with both the structure of your HTML and (in some cases) XML returned from the server. 7

8 DHTML DHTML is an acronym for Dynamic HTML. Dynamic HTML is a combination of JavaScript and DOM Enables you to make a html page react/change to users actions. Lets the user interact with the page. Technology that makes user interfaces possible hide or show menus change one dropdown select based on what was selected in another dropdown select Integrate Gmail, or the new Yahoo mail beta. 8

9 Ajax versus DHTML DHTML: is limited to using information loaded into browser. Only way to interact with the server is to refresh the page. Ajax: Interacts with the server asynchronously. Loads new information into the current page. Good user interfaces should use DHTML and Ajax. DHTML will control what happens in the browser. Ajax will allow dynamic communication with the server. Updates can be made to a database or new information can be loaded without refreshing the page and wasting so much time recreating the page from scratch for every user action. 9

10 JavaScript XMLHttpRequest Class XMLHttpRequest class is the key to Ajax. The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7. You need to become intimately familiar with XMLHttpRequest. 10

11 XMLHttpRequest: attributes attributes readystate status responsetext responsexml onreadystatechange description the code successively changes value from 0 to is OK; 404 if the page is not found. holds loaded data as a string of characters. holds an XML loaded file, DOM's methods can be used to extract data. takes a function name as value that is invoked when the readystatechange event is dispatched. state meaning 0 The request is not initialized 1 The request has been set up 2 The request has been sent 3 The request is in process 4 The request is complete 11

12 XMLHttpRequest: methods methods description open(mode, url, boolean) mode: type of request, GET or POST url: the location of the file, with a path. boolean: true (asynchronous) / false (synchronous). optionally, a login and a password may be added to arguments. send("string") null for a GET command. 12

13 Create XMLHttpRequest Object if (window.xmlhttprequest) { // Firefox, Safari,... xhr = new XMLHttpRequest(); Object detection for Firefox, Safari Create XMLHttpRequest object else if (window.activexobject) { Object detection for IE // Internet Explorer xhr = new ActiveXObject("Microsoft.XMLHTTP"); Create XMLHttpRequest object 13

14 Aside: JavaScript try catch The try...catch statement allows one to try execute some code and to catch any errors for special handling. Syntax: try { // execute code here catch(err) { // handle errors here 14

15 Example: try catch Alternative to previous object detection: try { // Trying Internet Explorer xhr = new ActiveXObject("Microsoft.XMLHTTP"); catch(err) { // handle errors here xhr = new XMLHttpRequest() Will succeed if IE browser Failure if not IE browser Succeeds for Firefox, Safari 15

16 General Purpose createxhr Function function createxhr() { var request = false; try { request = new ActiveXObject('Msxml2.XMLHTTP'); catch (err2) { try { request = new ActiveXObject('Microsoft.XMLHTTP'); catch (err3) { try { request = new XMLHttpRequest(); catch (err1) { request = false; return request; 16 For subsequent slides, this function will be saved in ajax.js Nested try..catch IE browser, with more recent MS xml parser IE browser Firefox, Safari Browser not supported

17 Typical Steps for Ajax Code 17

18 Step 1: Collect Data <html> <head> <title>my First Ajax Code</title> </head> <body> <form name="myform"> Name: <input type="text" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> 18

19 Step 2: Create XMLHttpRequest Object <html> <head> <title>my First Ajax Code</title> <script type= text/javascript src= ajax.js ></script> <script type= text/javascript > From previous slide, ajax.js contains createxhr() function ajaxtime(){ var xhr = createxhr(); </script> </head> <body> Create XMLHttpRequest As user edits name, ajaxtime() is called. <form name="myform"> Name: <input type="text" name="username" onkeyup= "ajaxtime()" /> Time: <input type="text" name="time" /> </form> </body> </html> 19

20 Step 3: Use XMLHttpRequest <html> <head> <title>my First Ajax Code</title> <script type= text/javascript src= ajax.js ></script> <script type= text/javascript > function ajaxtime(){ Open connection to server var xhr = createxhr(); Set up callback function when server response arrives see later slide xhr.open("get","time.php",true); xhr.send(null); </script> </head> <body> <form name="myform"> Name: <input type="text" name="username" onkeyup = "ajaxtime()" /> Time: <input type="text" name="time" /> </form> </body> </html> 20 Send (GET) request to server

21 xhr.open("get","time.php",true); A connection is opened. The method of connection is indicated (GET). The URL to connect to is time.php. The final parameter: If false, code waits until a response was received (Web 1.0). If true requests asynchronous connection (Web 2.0, Ajax). users can still use the form (and even call other JavaScript methods) while the server is processing this request. 21

22 Step 3 Continued: <html> <head> <title>my First Ajax Code</title> <script type= text/javascript src= ajax.js ></script> <script type= text/javascript > function ajaxtime(){ var xhr = createxhr(); xhr.onreadystatechange = function(){ if(xhr.readystate==4){ document.myform.time.value=xhr.responsetext; ; xhr.open("get","time.php",true); xhr.send(null); </script> </head> <body> <form name="myform"> Name: <input type="text" name="username" onkeyup = "ajaxtime()" /> Time: <input type="text" name="time" /> </form> </body> </html> Set up callback function to handle server response when it arrives Wait until response is complete (readystate=4) Update time on form 22

23 On the server side: time.php <?php echo date('l js \of F Y h:i:s A');?> Prints something like: Monday 8th of August :12:46 PM This string is return as response to Browser. 23

24 An example with XML - RSS <html> <head> <script type="text/javascript" src="getrss.js"></script> </head> <body> <form> Select an RSS-Feed: <select onchange="showrss(this.value)"> <option value="google">google News</option> <option value="msnbc">msnbc News</option> </select> </form> <div id="rssoutput"> <b>rss Feed will be listed here.</b></div> </body> </html> Getrss.js contains showrss() When user changes selection showrss() is called showrss() will update this 24

25 getrss.js var xmlhttp; function showrss(str){ xmlhttp=createxhr(); if (xmlhttp==false){ 25 alert ("Browser does not support HTTP Request"); return; var url= getrss.php"; url=url+"?q="+str; url=url+"&sid="+math.random(); xmlhttp.onreadystatechange=statechanged; xmlhttp.open("get",url,true); xmlhttp.send(null); function statechanged(){ if (xmlhttp.readystate==4 xmlhttp.readystate=="complete"){ document.getelementbyid("rssoutput").innerhtml=xmlhttp.responsetext; str is name of RSS feed Create XMLHttpRequest When response complete, update the rssoutput field Form url for request Use random number in url parameter to break cache

26 getrss.php (1) <?php //get the q parameter from URL //containing the feed name $q=$_get["q"]; if ($q=="google") { Retrieve the RSS feed name from GET q parameter Retrieve Google news feed (xml) $xml=(" elseif ($q=="msnbc") { Retrieve MSN news feed (xml) $xml=(" $xmldoc = new DOMDocument(); $xmldoc->load($xml); Create DOM document object Load news feed XML data into DOM object 26

27 getrss.php (2) //get elements from "<channel>" $channel=$xmldoc->getelementsbytagname('channel')->item(0); $channel_title = $channel->getelementsbytagname('title') ->item(0)->childnodes->item(0)->nodevalue; $channel_link = $channel->getelementsbytagname('link') ->item(0)->childnodes->item(0)->nodevalue; $channel_desc = $channel->getelementsbytagname('description') ->item(0)->childnodes->item(0)->nodevalue; Extract channel title, link and description //output elements from "<channel>" echo("<p><a href='". $channel_link. "'>". $channel_title. "</a>"); echo("<br />"); echo($channel_desc. "</p>"); Output channel title, link and description. 27

28 getrss.php (3) //get and output "<item>" elements $x=$xmldoc->getelementsbytagname('item'); for ($i=0; $i<=2; $i++) { $item_title=$x->item($i)->getelementsbytagname('title') ->item(0)->childnodes->item(0)->nodevalue; $item_link=$x->item($i)->getelementsbytagname('link') ->item(0)->childnodes->item(0)->nodevalue; $item_desc=$x->item($i)->getelementsbytagname('description') ->item(0)->childnodes->item(0)->nodevalue; Get array of news items Use only first 3 news items Extract title, link and description.?> echo ("<p><a href='". $item_link. "'>". $item_title. "</a>"); echo ("<br />"); echo ($item_desc. "</p>"); Output each news item details 28

29 Typical Steps for Ajax code 29

30 Drawbacks of Ajax If JavaScript is not activated, Ajax can't work. The user must be asked to set JavaScript from within options of the browser, with the <noscript>" tag. Since data to display are loaded dynamically, they are not part of the page, and the keywords inside are not used by search engines. The asynchronous mode may change the page after some delay (when the server response comes back), this may be confusing to some users. The back button may be deactivated (this is not the case in examples provided here). This can be overcome with extra code. 30

31 Ajax Frameworks The best technology to build dynamic web pages is Ajax. JavaScript code embedded into the HTML page is used to send requests to the server. At the server side, some processing is required to handle them, find the info or store the data. Specialized frameworks exist to provide the Ajax engine and associated client and server side functions. The framework has always a JavaScript part, and sometimes a server side part in another scripting language. Ajax frameworks exist in various programming languages and in all environments. 31

32 Types of Ajax Frameworks Javascript Libraries (no server-side processing) PHP Frameworks Java Frameworks.Net Frameworks ColdFusion Frameworks Ajax and XUL Reference: 32

33 References Ajax Tutorial by Brett McLaughlin Ajax Tutorial at xul.fr Ajax Tutorial at w3schools.com 33

AJAX. Introduction. AJAX: Asynchronous JavaScript and XML

AJAX. Introduction. AJAX: Asynchronous JavaScript and XML AJAX 1 2 Introduction AJAX: Asynchronous JavaScript and XML Popular in 2005 by Google Create interactive web applications Exchange small amounts of data with the server behind the scenes No need to reload