Asynchronous JavaScript and XML (Ajax)

Web Architecture (INFO 290-03)

Erik Wilde, UC Berkeley School of Information
2007-10-18
Creative Commons License

This work is licensed under a CC
Attribution 3.0 Unported License

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.

Outline (Ajax Basics)

  1. Ajax Basics [2]
  2. JavaScript Object Notation (JSON) [3]
  3. Conclusions [1]

Ajax = DHTML + HTTP

Ajax and DHTML

Comparison of Ajax and DHTML

Outline (JavaScript Object Notation (JSON))

  1. Ajax Basics [2]
  2. JavaScript Object Notation (JSON) [3]
  3. Conclusions [1]

JavaScript and XML

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

Outline (Conclusions)

  1. Ajax Basics [2]
  2. JavaScript Object Notation (JSON) [3]
  3. Conclusions [1]

Client/Server Recreated