AJAX

1
AJAX

• Quick Introduction

2
AJAX AsynchronousJavaScriptAndXML
3
What is AJAX, actually?

• Ajax isnt a technology. Its really several
  technologies, each flourishing in its own right,
  coming together in powerful new ways. Ajax
  incorporates
• standards-based presentation using XHTML and CSS
  
• dynamic display and interaction using the
  Document Object Model
• data interchange and manipulation using XML and
  XSLT
• asynchronous data retrieval using XMLHttpRequest
  
• and JavaScript binding everything together.

4
(No Transcript)
5
How Ajax is Different

• An Ajax application eliminates the
  start-stop-start-stop nature of interaction on
  the Web by introducing an intermediary an Ajax
  engine between the user and the server. It
  seems like adding a layer to the application
  would make it less responsive, but the opposite
  is true.
• Instead of loading a webpage, at the start of the
  session, the browser loads an Ajax engine
  written in JavaScript and usually tucked away in
  a hidden frame. This engine is responsible for
  both rendering the interface the user sees and
  communicating with the server on the users
  behalf.
• The Ajax engine allows the users interaction
  with the application to happen asynchronously
  independent of communication with the server. So
  the user is never staring at a blank browser
  window and an hourglass icon, waiting around for
  the server to do something.

6
(No Transcript)
7
Is AJAX production-ready?

• The biggest challenges in creating Ajax
  applications are not technical. The core Ajax
  technologies are mature, stable, and well
  understood. Instead, the challenges are for the
  designers of these applications to forget what
  we think we know about the limitations of the
  Web, and begin to imagine a wider, richer range
  of possibilities.

8
How does it look in code?

• Step 1 How to Make an HTTP Request
• var httpRequest
• if (window.XMLHttpRequest) // Mozilla, Safari,
  ... httpRequest new XMLHttpRequest()
• else if (window.ActiveXObject) // IE
  httpRequest new ActiveXObject("Microsoft.XMLHTTP
  ")

9
How does it look in code?

• Step 2 Handling server response
• if (httpRequest.readyState 4) // everything
  is good, the response is received
• else // still not ready

10
How does it look in code?

• A simple example
• The user clicks the link "Make a request" in the
  browser
• This calls the makeRequest() function with a
  parameter the name test.html of an HTML file in
  the same directory
• The request is made and then (onreadystatechange)
  the execution is passed to alertContents()
• alertContents() checks if the response was
  received and it's an OK and then alert()s the
  contents of the test.html file.

11
(No Transcript)