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

AJAX Workshop Notes

on

  • 6,594 views

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/

Statistics

Views

Total Views
6,594
Slideshare-icon Views on SlideShare
6,584
Embed Views
10

Actions

Likes
3
Downloads
44
Comments
0

2 Embeds 10

http://www.ajaxlines.com 7
http://www.slideshare.net 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    AJAX Workshop Notes AJAX Workshop Notes Presentation Transcript

    • Sponsored by Upsilon Pi Epsilon The Computer Science Honors Society XML and AJAX
    • 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
    • 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>
    • 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”
    • AJAX :
      • Cuts down on user wait time
      • Uses client to offload some work from the server
      • Asynchronous operation
    • 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
    • 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;);
    • 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); }
    • 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
    • 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
    • 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);         }      }    }
    • 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);
    • 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
    • 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)
    • 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 ”
    • 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
    • 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>