Abstract

Asynchronous JavaScript and XML (Ajax) takes DHTML to the next level by allowing server access from within scripting code. This is accomplished by using a standardized API for client/server communications, the XMLHttpRequest object. This objects allows using HTTP connections from within scripting code, and thereby allows scripting code to dynamically reload data from a server in response to user interactions.

Ajax = DHTML + HTTP

• Dynamic HTML (DHTML) uses JavaScript locally
  • the scripting code reacts to user events and accesses the DOM structure
  • changes are either hardcoded or derived from user events
• Ajax adds an HTTP request method to JavaScript
  • scripting code can now request additional data from an HTTP server
  • changes can thus be made based on any data received from the server
• Ajax dramatically reduces the number of page reloads
  • any change of the page can be done without a complete reload
  • based on user interactions, parts of the page can be reloaded
• Ajax has the same interoperability problems as DHTML

Ajax and DHTML

JavaScript and XML

• The XMLHttpRequest API has been built for requesting XML via HTTP
  • this is useful because XML is the most popular data format
  • all requested data has to be processed by using XML access methods in JavaScript
• JavaScript does not have XML as its internal data model
  • the XML received via XMLHttpRequest has to be parsed into a DOM tree
  • DOM access in JavaScript is inconvenient for complex operations
  • alternatively, the XML can be mapped to JavaScript objects (also requires parsing)
• JavaScript Object Notation (JSON) encodes data as JavaScript objects
  • because the consumer is written in JavaScript, this is more efficient for the consumer
  • this turn the generally usable XML service into a JavaScript-oriented service
  • for large-scale applications, it might make sense to provide XML and JSON
  • using Content Negotiation, this can be negotiated on the HTTP protocol level

JSON Example

<?xml version="1.0"?>
<menu id="file" value="File">
 <popup>
  <menuitem value="New" onclick="CreateNewDoc()"/>
  <menuitem value="Open" onclick="OpenDoc()"/>
  <menuitem value="Close" onclick="CloseDoc()"/>
 </popup>
</menu>

{ "menu" : {
 "id" : "file",
 "value" : "File",
 "popup" : {
  "menuitem" : [
   { "value" : "New", "onclick" : "CreateNewDoc()" },
   { "value" : "Open", "onclick" : "OpenDoc()" },
   { "value" : "Close", "onclick" : "CloseDoc()" }
  ]
 }
}}

JSON via Content Negotiation

• XML or JSON are just different representations
  • they represent the same underlying resource (as identified by the URI)
• Content Negotiation allows to specify preferences
  • clients specify preferences and server respond with the best match
• HTTP Accept specifies the accepted media types
  • resources may be available in HTML, XML, or JSON
  • depending on the HTTP request, the server responds with the best representation
  • reduces processing time on the client and can be cached
• Really smart Ajax frameworks could even hide the content negotiation
  • request JSON or XML with XML being the lower priority
  • if XML is sent by the server, it has to be parsed into a JavaScript object
  • the end result is always a JavaScript object for the framework user

Client/Server Recreated

• Ajax implements a lightweight client/server model
• Ajax can range from helper functions to complete local applications
• Ajax can help in RESTful architectures (less server state)
• Ajax seriously challenges the basic navigation model of the Web
• Creating better interfaces for Ajax applications is a research issue