AJAX Workshop Notes

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("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { httpRequest = false; } } } if (!httpRequest ) alert("Error initializing XMLHttpRequest!");

Step 2) Sending Request function sendRequest() { url="getflickrranking.php?word=dog"; httpRequest.open("GET", 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("headerLabel") Returns the string value of a single header label open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]) 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("label", "value") 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 "Not Found" or 200 for "OK" 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("Error loading page\n" + httpRequest.status + ":" + httpRequest.statusText); } } }

Step 4) Processing Response // in process request function var photo = httpRequest.responseXML.getElementsByTagName("photo")[1]; var id = photo.getAttribute("id"); var owner = photo.getAttribute("owner"); var secret = photo.getAttribute("secret"); var server = photo.getAttribute("server"); var title = photo.getAttribute("title"); document.getElementById("imgDIV").innerHTML = '<strong>' + title + '</strong>'; var img = document.createElement('img'); img.setAttribute('src', 'http://static.flickr.com/'+server+'/'+id+'_'+secret+'_m.jpg'); document.getElementById("imgDIV").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="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Music Mash" height="300" scaling="false" /> <Content type="html"> <script language="javascript" type="text/javascript"> function sendRequest() { url = "getflickrranking.php?word=dog"; _IG_FetchXMLContent(url,processRequest); } function processRequest() { if (httpRequest.readyState == 4) { if(httpRequest.status == 200) { //process request } else { alert("Error loading page\n" + httpRequest.status + ":" + httpRequest.statusText); } } } var newDiv = Document.createElement("div"); newDiv.id = "imgDiv"; document.body.onload = sendRequest; </script> ]]> </Content> </Module>

AJAX Workshop Notes

More Related Content

What's hot (20)

Similar to AJAX Workshop Notes (20)

More from Pamela Fox (20)

Recently uploaded (20)

AJAX Workshop Notes