Your SlideShare is downloading. ×
AJAX Workshop Notes
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

AJAX Workshop Notes

3,267
views

Published 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/

Published in: Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,267
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
50
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>