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 " + 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