AJAX

1
AJAX

• asynchronous server-client communication

2
Ajax / AJAX / Web 2.0

• Ajax (the word) asynchronous web technology
• AJAX (the acronym) Asynchronous Javascript
  and Xml
• Web 2.0 nonsense word (Tim Berners-Lee, 2006)
  well refrain from using in this class

3
HTTP GET POST

• Get
• Used by client to request data from the server
• Post
• Used by client to send data to server

4
Methods of Asynchronous Communcation

• IFRAME (GET, POST)
• Pass data between parent and child windows with
  JS
• Dynamically Created ltScriptgt tags (GET)
• XMLHttpRequest (GET, POST)
• Open connection to web resources with JS

5
Dynamically Created ltScriptgt Tags

• lthtmlgt
• ltheadgt
• ltmeta http-equiv"Content-Type"
  content"text/html charsetISO-8859-1"gt
• lt/headgt
• ltbody onload"init()"gt
• ltdiv id"info"gt
• Loading....
• lt/divgt
• ltspan onclick"left()"gtBacklt/spangt ltspan
  onclick"right()"gtForwardlt/agt
• lt/bodygt
• lt/htmlgt

6
Init()

• A function that calls multiple functions at page
  load.
• function init()
• offset 0
• loadscript(offset)

7
Loadscript()

• Dynamically creates a script tag pointing to
  remote data
• Populates src attribute
• Populates onload attribute

8

• function loadscript(offset)
• if(!offset)
• offset 0
• var now new Date()
• now.setMonth(now.getMonth() offset)
• var m now.getMonth()
• var y now.getFullYear()
• var url "http//events.rpi.edu/main/list
  Events.do?start" y "-" m
  "-01setappvarobjName(today)skinNamejson-list-s
  rc"
• var s document.createElement("script")
• s.src url
• s.setAttribute('id','bw')
• s.setAttribute('onload','disp()')
• var head document.getElementsByTagName('h
  ead')0
• head.appendChild(s)

9
Disp()

• Loops over dynamically added script tag, prints
  data
• function disp()
• var j
• var disp ""
• for (i 0 i lttoday.bwEventList.ev
  ents.length i)
• disp "ltligtlta href"today.bwEven
  tList.eventsi.eventlink"gt"
• disp today.bwEventList.eventsi
  .summary
• disp "lt/agtlt/ligt"
• document.getElementById('info').inn
  erHTML disp

10
Left() Right()

• Gets the next or previous months data
• function left()
• document.getElementById('info').innerHTML
  "Loading ... "
• offset offset - 1
• var head document.getElementsByTagName('
  head')0
• var olds document.getElementById('bw')
  
• head.removeChild(olds)
• loadscript(offset)

11
The XMLHttpRequest object

• Makes asynchronous http requests using JS
• The backbone of AJAX
• You can receive plain XML, HTML, JSONwhat ever
  you want

12
XMLHttpRequest Attributes

• readyState
• 0 not initialized
• 1 connection established
• 2 request received
• 3 answer in process
• 4 done
• Status
• http status200 OK, 404 file not found, c

13
XMLHttpRequest Attributes

• responseText
• Response as plain text
• responseXml
• Response as an object (on which you may use DOM
  methods)
• Onreadystatechange
• Function to call when ready state changes

14
XMLHttpRequest Methods

• Open(mode, url, async)
• Mode GET or POST
• Url Http//.....
• Async (true for async, false for sync.)
• Send(str)
• In GET mode, strNULL
• In POST mode, str is name/value pairs that you
  are posting to the service

15
Testing Browser Type.

• if (window.XMLHttpRequest)    
• ajax new XMLHttpRequest() 
• else if (window.ActiveXObject)   
• ajax new ActiveXObject("Microsoft.XMLHTTP")

16
POST with XMLHttpRequest

• var mypost var1blahvar2blahblah
• ajax.onreadystatechangefunction()
• if(ajax.readyState 4)
• alert(done)
• ajax.open("POST", url, true)
• ajax.setRequestHeader("Content-Type",
  "application/x-www-form-urlencoded")
• ajax.send(mypost)