Developing Ajax Applications

1
Developing Ajax Applications

• Web Design World 2006
• Joe Marini

2
Overview

• What is AJAX?
• The History of AJAX
• AJAX Examples
• AJAX Principles
• Tools and Technologies
• Where to Get More Information

3
What is AJAX?

• AJAX stands for Asynchronous JavaScript And XML
• AJAX is not a product
• AJAX is not a technology
• AJAX is not whizzy-bang graphics
• Its a set of development techniques
• Combining XML and JavaScript with Asynchronous
  programming techniques

4
The History of AJAX

• Technology invented by Microsoft in 1997
• First Appeared in IE5, circa 1998
• Later supported by Safari Mozilla in 2003
• Called the XMLHttpRequest Object (well, of
  course!)
• Outlook Web Access was first widely-used AJAX
  application
• Google Maps put AJAX on the map

5
AJAX in the Real World

• Windows Live
• Virtual Earth
• Google Maps
• Google Suggest
• Yahoo Related Information
• CBS MarketWatch
• Outlook Web Access

6
How AJAX Works

• Ajax uses the XMLHttpRequest object
• But, the data does not have to be XML
• Data is sent to and from the browser from within
  the same page
• Data can be anything simple text, HTML, XML,
  etc.
• Responses from server are handled by a designated
  function

7
How Ajax Works

• The XMLHttpRequest Object Methods

8
How Ajax Works

• The XMLHttpRequest Object Properties

9
How Ajax Works

• The XMLHttpRequest readyState Values

10
How AJAX Works

• Ajax in Three Easy Steps!
• Create the XMLHttpRequest object.
• Write the function that will be called to process
  the request as it is handled by the browser.
• Fill out the XMLHttpRequest objects fields and
  then send the request either synchronously or
  asynchronously.

11
How AJAX Works

• // Step 1 Create the XMLHttpRequest Object.
• function createRequest()
• var reqObj null
• try
• reqObj new ActiveXObject("Msxml2.XMLHTTP")
• catch (err)
• try
• reqObj new ActiveXObject("Microsoft.XMLHTTP")
  
• catch (err2)
• try
• reqObj new XMLHttpRequest()
• catch (err3)
• reqObj null

12
How AJAX Works

• // Step 2 write the function that will be
  called when the request
• // is complete. Remember to check the returned
  status code!
• function callback()
• if (xmlhttp.readyState 4)
• if (xmlhttp.statusCode 200)
• // everything is OK, use the content
• //
• // xmlhttp.responseText contains the data. If
  the data
• // was returned as XML, then it is available
  also as a DOM
• // object in xmlhttp.responseXML
• else
• // an error occurred, handle it
  appropriately

13
How AJAX Works

• // Step 3- Finally, issue the request using the
  open() and send()
• // functions on the XMLHttpRequest object.
• xmlhttp createRequest()
• if (xmlhttp ! null)
• // call open with GET or POST, the URL, and true
  for asynchronous
• xmlhttp.open("GET","myrequesthandler.asp",
  true)
• xmlhttp.onreadystatechange callback
• xmlhttp.send(null)

14
Synchronous vs. Asynchronous

• With Synchronous communication, each side must
  wait for the other to finish processing.
• With Asynchronous communication, the two sides
  can continue working without waiting for each
  other.
• Synchronous is easier to implement
• Asynchronous results in a better user experience.

15
Synchronous vs. Asynchronous
Processing
Synchronous Communication
Waiting
Browser Client
Browser Initiates Request
Browser Posts New Request
Server Sends Response
Server Sends Response
Web Server
Server Receives Request and Processes it
16
Synchronous vs. Asynchronous
Processing
Asynchronous Communication
Waiting
Browser Client
Browser Initiates Request
Browser Gets Response
Processing Continues
Server Sends Response
Web Server
Server Receives Request
17
AJAX Example Walkthroughs

• Retrieving data from a site
• Posting data to a site
• Working with XML
• Having an ongoing dialogue with a site
• Building a simple message board
• Reporting site errors

18
AJAX Guidelines

• Optimize network traffic between the browser and
  the server
• Maintain a local cache of data
• Dont perform a request on every event
• Remember the non-Ajax user
• Fall back to regular form posts and links
• Take advantage of the client
• Handle events locally
• Use the browser to do validation when possible

19
Ajax Development Tools

• Microsofts Project Atlas for ASP.NET
  (atlas.asp.net)
• Backbase (backbase.com)
• Dart Communications (dart.com)
• XOAD (xoad.org)
• Bindows (bindows.net)
• Innoscript.orgs Porcupine Server

20
Further Reading and Resources

• Adaptive Paths site (adaptivepath.com)
• ASP.NET site (atlas.asp.net)
• Microsofts XMLHttpRequest documentation
  (msdn.microsoft.com)
• Ajax Matters (ajaxmatters.com)
• My Site (www.joemarini.com)