• Like
AJAX Workshop Notes
Upcoming SlideShare
Loading in...5
×

AJAX Workshop Notes

  • 3,223 views
Uploaded on

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

Put on by USC's Upsilon Pi Epsilon as part of Wonderful World of Web2.0 Workshop Series.
http://pollux.usc.edu/~upe/

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,223
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
44
Comments
0
Likes
3

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. Sponsored by Upsilon Pi Epsilon The Computer Science Honors Society XML and AJAX
  • 2. XML : Basics
    • XML stands for E X tensible M arkup L anguage
    • XML is a markup language much like HTML
    • XML was designed to describe data
    • XML tags are not predefined. You must define your own tags
    • XML should use a Document Type Definition (DTD) or an XML Schema to describe the data
    • XML is a W3C Recommendation
    • HTML is about displaying information, while XML is about describing information.
    • XML doesn’t do anything itself- You do something with it.
    • Source: http://www.w3schools.com/xml/xml_whatis.asp
  • 3. XML : Syntax & Example
    • Tags open and close with <>
    • Attributes surrounded by quotation marks
    • A string containing special characters may be surrounded by “ <![CDATA[ ]>”
    • <note type=“urgent”>
    • <to>Tove</to>
    • <from>Jani</from>
    • <heading>Reminder</heading>
    • <body>Don't forget me this weekend!</body>
    • </note>
  • 4. AJAX : Huh?
    • Asynchronous JavaScript and XML (AJAX)
    • Allows for asynchronous interaction with a web server
    • Enables refreshes of only portions of content that the user is interacting with
    • Creates a faster, more pleasant user experience
    • Arguably the most important part of “Web 2.0”
  • 5. AJAX :
    • Cuts down on user wait time
    • Uses client to offload some work from the server
    • Asynchronous operation
  • 6. AJAX : XMLHTTPRequest
    • This object makes the whole thing possible
    • Not available in IE (in their defense, they invented the idea and implemented it first)
      • use the ActiveX object “Microsoft.XMLHTTP”
    • Sends a request to a web server complete with headers and parameters
    • Uses callback methods for status changes
  • 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. 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. 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. 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. 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. 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. XML : Useful Methods/Members
    • element.childNodes[n]
    • element.firstChild
    • element.nodeValue()
    • element.nodeName()
    • element.attributes()
    • element.getAttribute(“attributeName”);
    • document.getElementsByTagName(“tagName”)
    • More: http://developer.mozilla.org/en/docs/Gecko_DOM_Reference
  • 14. AJAX: Challenge #1
    • Using skeleton code, make an image search
    • Make an input box, have user input word, press search button, send the AJAX request
    • When AJAX request returns, update a div below the search box with the image results nicely formatted
    • Bonus #1: Show all 5 image results (for loop!) at each different size, nicely formatted
    • Bonus #2: Illustrate user-inputted name with images (search for letters on Flickr)
  • 15. AJAX : Design Considerations
    • http://ajaxian.com/archives/ajax-experience-day-3-bill-scott-on-ajax-design-patterns-and-principles
    • Users don’t always notice sections of the page have updated – consider coloring or somehow marking newly updated parts, especially if small
    • 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
      • ( http://www.ajaxload.info/ - generate a custom gif)
      • “ If you writing a user interface, make sure it responds in 1/10th of a second ”
  • 16. Google Gadgets AJAX!
    • Google Gadgets has its own asynchronous functions for getting data:
    • IG_FetchContent(url, func)
    • IG_FetchXMLContent(url, func)
    • Simplifies GET requests for Google Gadgets, eliminates ~12 lines of code
  • 17. Google Gadgets AJAX: Example
    • <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?>
    • <Module>
    • <ModulePrefs title=&quot;Music Mash&quot; height=&quot;300&quot; scaling=&quot;false&quot; />
    • <Content type=&quot;html&quot;>
    • <script language=&quot;javascript&quot; type=&quot;text/javascript&quot;>
    • function sendRequest() {
    • url = &quot;getflickrranking.php?word=dog&quot;;
    • _IG_FetchXMLContent(url,processRequest);
    • }
      • function processRequest() {     
      • if (httpRequest.readyState == 4)     {      
      • if(httpRequest.status == 200)         {  
      • //process request
      •          }         
      • else         {             
      • alert(&quot;Error loading page &quot; + httpRequest.status + &quot;:&quot; + httpRequest.statusText);        
      • }     
      • }   
      • }
      • var newDiv = Document.createElement(&quot;div&quot;);
      • newDiv.id = &quot;imgDiv&quot;;
      • document.body.onload = sendRequest;
      • </script>
      • ]]>
      • </Content>
      • </Module>