AJAX Workshop Notes


Published on

Put on by USC's Upsilon Pi Epsilon as part of Wonderful World of Web2.0 Workshop Series.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

AJAX Workshop Notes

  1. 1. Sponsored by Upsilon Pi Epsilon The Computer Science Honors Society XML and AJAX
  2. 2. XML : Basics <ul><li>XML stands for E X tensible M arkup L anguage </li></ul><ul><li>XML is a markup language much like HTML </li></ul><ul><li>XML was designed to describe data </li></ul><ul><li>XML tags are not predefined. You must define your own tags </li></ul><ul><li>XML should use a Document Type Definition (DTD) or an XML Schema to describe the data </li></ul><ul><li>XML is a W3C Recommendation </li></ul><ul><li>HTML is about displaying information, while XML is about describing information. </li></ul><ul><li>XML doesn’t do anything itself- You do something with it. </li></ul><ul><li>Source: http://www.w3schools.com/xml/xml_whatis.asp </li></ul>
  3. 3. XML : Syntax & Example <ul><li>Tags open and close with <> </li></ul><ul><li>Attributes surrounded by quotation marks </li></ul><ul><li>A string containing special characters may be surrounded by “ <![CDATA[ ]>” </li></ul><ul><li><note type=“urgent”> </li></ul><ul><li><to>Tove</to> </li></ul><ul><li><from>Jani</from> </li></ul><ul><li><heading>Reminder</heading> </li></ul><ul><li><body>Don't forget me this weekend!</body> </li></ul><ul><li></note> </li></ul>
  4. 4. AJAX : Huh? <ul><li>Asynchronous JavaScript and XML (AJAX) </li></ul><ul><li>Allows for asynchronous interaction with a web server </li></ul><ul><li>Enables refreshes of only portions of content that the user is interacting with </li></ul><ul><li>Creates a faster, more pleasant user experience </li></ul><ul><li>Arguably the most important part of “Web 2.0” </li></ul>
  5. 5. AJAX : <ul><li>Cuts down on user wait time </li></ul><ul><li>Uses client to offload some work from the server </li></ul><ul><li>Asynchronous operation </li></ul>
  6. 6. AJAX : XMLHTTPRequest <ul><li>This object makes the whole thing possible </li></ul><ul><li>Not available in IE (in their defense, they invented the idea and implemented it first) </li></ul><ul><ul><li>use the ActiveX object “Microsoft.XMLHTTP” </li></ul></ul><ul><li>Sends a request to a web server complete with headers and parameters </li></ul><ul><li>Uses callback methods for status changes </li></ul>
  7. 7. Step 1) Creating Request var httpRequest; try { httpRequest = new XMLHttpRequest(); } catch (trymicrosoft) { try { httpRequest = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); } catch (othermicrosoft) { try { httpRequest = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } catch (failed) { httpRequest = false; } } } if (!httpRequest ) alert(&quot;Error initializing XMLHttpRequest!&quot;);
  8. 8. Step 2) Sending Request function sendRequest() { url=&quot;getflickrranking.php?word=dog&quot;; httpRequest.open(&quot;GET&quot;, url, true); httpRequest.onreadystatechange = processRequest; httpRequest.send(null); }
  9. 9. XMLHTTP : Methods Method Description abort() Stops the current request getAllResponseHeaders() Returns complete set of headers (labels and values) as a string getResponseHeader(&quot;headerLabel&quot;) Returns the string value of a single header label open(&quot;method&quot;, &quot;URL&quot;[, asyncFlag[, &quot;userName&quot;[, &quot;password&quot;]]]) Assigns destination URL, method, and other optional attributes of a pending request send(content) Transmits the request, optionally with postable string or DOM object data setRequestHeader(&quot;label&quot;, &quot;value&quot;) Assigns a label/value pair to the header to be sent with a request
  10. 10. XMLHTTP : Properties Property Description onreadystatechange Event handler for an event that fires at every state change readyState Object status integer: 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete responseText String version of data returned from server process responseXML DOM-compatible document object of data returned from server process status Numeric code returned by server, such as 404 for &quot;Not Found&quot; or 200 for &quot;OK&quot; statusText String message accompanying the status code
  11. 11. Step 3) Handling Response function processRequest() {     if (httpRequest.readyState == 4)     {         if(httpRequest.status == 200)         { //process request here          }          else         {              alert(&quot;Error loading page &quot; + httpRequest.status + &quot;:&quot; + httpRequest.statusText);         }      }    }
  12. 12. Step 4) Processing Response // in process request function var photo = httpRequest.responseXML.getElementsByTagName(&quot;photo&quot;)[1]; var id = photo.getAttribute(&quot;id&quot;); var owner = photo.getAttribute(&quot;owner&quot;); var secret = photo.getAttribute(&quot;secret&quot;); var server = photo.getAttribute(&quot;server&quot;); var title = photo.getAttribute(&quot;title&quot;); document.getElementById(&quot;imgDIV&quot;).innerHTML = '<strong>' + title + '</strong>'; var img = document.createElement('img'); img.setAttribute('src', 'http://static.flickr.com/'+server+'/'+id+'_'+secret+'_m.jpg'); document.getElementById(&quot;imgDIV&quot;).appendChild(img);
  13. 13. XML : Useful Methods/Members <ul><li>element.childNodes[n] </li></ul><ul><li>element.firstChild </li></ul><ul><li>element.nodeValue() </li></ul><ul><li>element.nodeName() </li></ul><ul><li>element.attributes() </li></ul><ul><li>element.getAttribute(“attributeName”); </li></ul><ul><li>document.getElementsByTagName(“tagName”) </li></ul><ul><li>More: http://developer.mozilla.org/en/docs/Gecko_DOM_Reference </li></ul>
  14. 14. AJAX: Challenge #1 <ul><li>Using skeleton code, make an image search </li></ul><ul><li>Make an input box, have user input word, press search button, send the AJAX request </li></ul><ul><li>When AJAX request returns, update a div below the search box with the image results nicely formatted </li></ul><ul><li>Bonus #1: Show all 5 image results (for loop!) at each different size, nicely formatted </li></ul><ul><li>Bonus #2: Illustrate user-inputted name with images (search for letters on Flickr) </li></ul>
  15. 15. AJAX : Design Considerations <ul><li>http://ajaxian.com/archives/ajax-experience-day-3-bill-scott-on-ajax-design-patterns-and-principles </li></ul><ul><li>Users don’t always notice sections of the page have updated – consider coloring or somehow marking newly updated parts, especially if small </li></ul><ul><li>Users aren’t used to clicking on a button and having nothing happen – show a loading indicator when the request has been sent, when its done processing, remove it </li></ul><ul><ul><li>( http://www.ajaxload.info/ - generate a custom gif) </li></ul></ul><ul><ul><li>“ If you writing a user interface, make sure it responds in 1/10th of a second ” </li></ul></ul>
  16. 16. Google Gadgets AJAX! <ul><li>Google Gadgets has its own asynchronous functions for getting data: </li></ul><ul><li>IG_FetchContent(url, func) </li></ul><ul><li>IG_FetchXMLContent(url, func) </li></ul><ul><li>Simplifies GET requests for Google Gadgets, eliminates ~12 lines of code </li></ul>
  17. 17. Google Gadgets AJAX: Example <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> </li></ul><ul><li><Module> </li></ul><ul><li><ModulePrefs title=&quot;Music Mash&quot; height=&quot;300&quot; scaling=&quot;false&quot; /> </li></ul><ul><li><Content type=&quot;html&quot;> </li></ul><ul><li><script language=&quot;javascript&quot; type=&quot;text/javascript&quot;> </li></ul><ul><li>function sendRequest() { </li></ul><ul><li>url = &quot;getflickrranking.php?word=dog&quot;; </li></ul><ul><li>_IG_FetchXMLContent(url,processRequest); </li></ul><ul><li>} </li></ul><ul><ul><li>function processRequest() {      </li></ul></ul><ul><ul><li>if (httpRequest.readyState == 4)     {       </li></ul></ul><ul><ul><li>if(httpRequest.status == 200)         {   </li></ul></ul><ul><ul><li>//process request </li></ul></ul><ul><ul><li>         }          </li></ul></ul><ul><ul><li>else         {              </li></ul></ul><ul><ul><li>alert(&quot;Error loading page &quot; + httpRequest.status + &quot;:&quot; + httpRequest.statusText);         </li></ul></ul><ul><ul><li>}      </li></ul></ul><ul><ul><li>}    </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>var newDiv = Document.createElement(&quot;div&quot;); </li></ul></ul><ul><ul><li>newDiv.id = &quot;imgDiv&quot;; </li></ul></ul><ul><ul><li>document.body.onload = sendRequest; </li></ul></ul><ul><ul><li></script> </li></ul></ul><ul><ul><li>]]> </li></ul></ul><ul><ul><li></Content> </li></ul></ul><ul><ul><li></Module> </li></ul></ul>