AJAX

1
AJAX

• (also known as XMLHTTP, Remote Scripting,
  XMLHttpRequest, etc.)

Matt Warden
2
What is AJAX?

• Asynchronous JavaScript and XML (or, Asynchronous
  JavaScript and XML)
• So, like LAMP, AJAX is not a technology or
  language but rather a group of technologies
• Allows for the creation of fat-client web
  applications
• Sound familiar to anyone?

3
Reinventing the Wheel

• Jesse James Garrett

• A Wheel

4
AJAX is Not New

• Active use for at least six years
• Was only available in IE (since IE5 public
  preview in 1999) until about three years ago, in
  Mozilla (versions just before 1.0)
• Primarily referred to as XMLHTTP
• This fact has brought Garrett criticism

5
Garretts Response

• Whats new is the prominent use of these
  techniques in real-world applications to change
  the fundamental interaction model of the Web.
  Ajax is taking hold now because these
  technologies and the industrys understanding of
  how to deploy them most effectively have taken
  time to develop.
• Buzzword Count 10 ? Nothing new
• Back to AJAX

6
Traditional vs. AJAX

• Interface construction is mainly the
  responsibility of the server
• User interaction via form submissions
• An entire page is required for each interaction
  (bandwidth)
• Application is unavailable while an interaction
  is processing (application speed)

• Interface is manipulated by client-side
  JavaScript manipulations of the Document Object
  Model (DOM)
• User interaction via HTTP requests behind the
  scenes
• Communication can be restricted to data only
• Application is always responsive

7
AJAX Example

• Tom Riddle's Magical Diary Come to Life

8
Other AJAX Examples

• Googles GMail
• Google Suggest
• Google Maps (sort of)
• Flickr

9
AJAX Details XMLHTTP

• An interface allows for the HTTP communication
  without a page refresh
• In IE, it is named XMLHTTP and available as an
  ActiveX Object
• Mozilla and others then modeled a native object
  called XMLHttpRequest after IEs ActiveX Object
• (The others are Safari 1.2, Opera 8, and
  Konqueror)

10
XMLHTTP Methods
11
XMLHTTP Properties
12
Instantiating XMLHTTP

• function getXMLHTTP()
• var req false
• if(window.XMLHttpRequest)
• try
• req new XMLHttpRequest()
• catch(e)
• else if(window.ActiveXObject)
• try
• req new ActiveXObject("Msxml2.XMLHTTP")
  
• catch(e)
• try
• req new ActiveXObject("Microsoft.XML
  HTTP")
• catch(e)
• // end if

13
Instantiating XMLHTTP

• var request getXMLHTTP()
• request.onreadystatechange handleReadyStateChang
  e
• request.open(get,/bar/checkuname.php?ujessica
  )
• request.send(null)

14
Handling Responses

• function handleReadyStateChange()
• if (!request) return
• // ignore unless complete readyState
• if (request.readyState 4)
• // Ignore unless successful.
• if (request.status 200)
• // act on the response
• var xmlbody request.responseXML
• // the line below is important!
• request false
• processResponse(xmlbody)
• // end function

15
Example Response XML

• lt?xml version"1.0" encoding"UTF-8"
  standalone"yes"?gt
• ltusernameresultgt
• ltusername value"jessica" available"false" /gt
• ltusernamealtsgt
• ltusername value"jess" available"true" /gt
• ltusername value"jessica2005"
  available"true" /gt
• ltusername value"jessie" available"true"
  /gt
• lt/usernamealtsgt
• lt/usernameresultgt
• Requested username is unavailable, but the script
  has determined some alternatives.

16
Acting on a Response

• JavaScripts alert() function? You could use
  this, but its annoying and quite defeats one of
  the reasons to use AJAX allowing the application
  to always remain responsive.
• A better choice is to manipulate the DOM with
  JavaScript.

17
Manipulating the DOM

• function processResponse(oXML)
• if (!oXML) return
• if (!oXML.documentElement) return
• var doc oXML.documentElement
• // return a nodeList of all username elements
• var unames doc.getElementsByTagName('username
  ')
• var msgs new Array()
• // iterate through the username nodeList
• for (var i0 iltunames.length i)
• var u unames.item(i)
• var username u.getAttribute('value')
• var availability u.getAttribute('available
  ')
• // make the available attribute more
  user-friendly
• if (availability 'true')
• availability 'available'
• else
• availability 'not available'

18
processResponse Contd

• // create an unordered list element
• ul document.createElement('ul')
• ul.id 'msg'
• // for each message, create a list item
• // element and a text node containing
• // the message. The text node is a child
• // node of the list item element, and the
• // the list item is a child node of the
• // unordered list element.
• for (var k0 kltmsgs.length k)
• var li document.createElement('li')
• var txt document.createTextNode(msgsk)
• li.appendChild(txt)
• ul.appendChild(li)
• // obtain a reference to the maindiv element
• // and insert our new unordered list just
  before it
• var maindiv document.getElementById('maindiv'
  )
• maindiv.parentNode.insertBefore(ul,maindiv)

19
Altered DOM After Manipulation

• parentNode
• ul
• li
• Username jessica is not available
• Username jess is available
• Username jessica2005 is available
• Username jessie is available
• maindiv

20

• This is a working example
• You can see it in action and view all source at
  http//mwarden.f2o.org/sandbox/...
• (Note that the server portion of the code is
  static, so it is only a demonstration of how AJAX
  works, not a working application.)

21
AJAX Libraries

• SAJAX
• Makes things marginally easier
• Doesnt support XML responses
• uses innerHTML, so cant even use DOM
• CPAINT
• Supports XML and text responses
• Actively developed and mature
• Documentation a little immature
• JPSPAN
• Excellent abstraction
• Seamlessly imports server-side objects into
  JavaScript
• Clear documentation
• Doesnt support Opera
• Limited usefulness

22
When Not to Use AJAX

• Jesse James Garrett says
• We dont know yet for what types of
  applications AJAX is best suited. Because this
  is a relatively new approach, our understanding
  of where Ajax can best be applied is still in its
  infancy. Sometimes the traditional web
  application model is the most appropriate
  solution to a problem.

23
When Not to Use AJAX

• We dont know, but I might.
• In my opinion, its quite clear when AJAX is not
  appropriate.
• Importance Application state
• Back button
• Bookmarking
• Sounds a lot like well-known misuses of Flash!

24
A Rule of Thumb

• AJAX is good for making web-based versions of
  traditionally desktop applications
• AJAX opens up new possibilities for web apps, but
  does not necessarily benefit traditional
  possibilities
• If you need serious workarounds to bring
  usability up to expected levels, youre probably
  misusing AJAX.

25
Further Information

• http//developer.apple.com/internet/webcontent/xml
  httpreq.html
• http//en.wikipedia.org/wiki/XMLHttpRequest
• http//en.wikipedia.org/wiki/AJAX
• http//xulplanet.com/references/objref/XMLHttpRequ
  est.html
• http//www.mozilla.org/xmlextras/
• http//www.ajaxpatterns.org/
• http//www.ajaxmatters.com/
• Questions?