AJAX

1
AJAX

• Asynchronous JavaScript XML
• A short introduction

2
AJAX intro

• AJAX uses asynchronous data transfer (based on
  XMLHttpRequest ) between the browser and the
  web-server, allowing to
• request smaller bits of information from the
  server than the full-reload
• request additional information from other pages
  where the result should be embedded into the
  current page
• execute an action on the server without moving to
  the next page (so if fail then you dont have to
  go back consider for example submitting data).

3
AJAX shift of client-server communication

• Standard method
• Client (Web broswer)
• Server

We could say that pages are not connected
4
AJAX shift of client-server communication

• AJAX method
• Client (Web broswer)
• Server

The page stays the same
5

• ltscript type"text/javascript"gtfunction
  ajaxFunction()
• var xmlHttp
• try // Firefox, Opera 8.0,
  Safari xmlHttpnew XMLHttpRequest()
• catch (e) // Internet Explorer try
  xmlHttpnew ActiveXObject("Msxml2.XMLHTTP")
  
• catch (e) try xmlHttpnew
  ActiveXObject("Microsoft.XMLHTTP")
• catch (e) alert("Your browser does not
  support AJAX!") return false
• xmlHttp.onreadystatechange function()
• if(xmlHttp.readyState4)
• document.FormA.timeCtrl.valuexmlHttp.respons
  eText
• xmlHttp.open("GET",a.php",true)
• xmlHttp.send(null)lt/scriptgt

A function to be executed on call-back.
Call asyncronously
6
Readystate
function() if(xmlHttp.readyState4)
...

• 0 - the request is not initialized
• 1 - the request has been set up
• 2 - the request has been sent
• 3 - the request is in process
• 4 - the request is complete

7
Status

• There is also a status that can be controlled
  after a result is returned. It will contain
  either
• 200 - everything worked (returned) fine
• or the error code, for example
• 404 - the page is not found....
• 500 (Internal Server Error)
• if(xmlHttp.readyState 4)
• if(xmlHttp.status 200)
• alert(xmlHttp.responseText)
• else
• alert("Error code " xmlHttp.status)

8
Response text

• function()
• if(xmlHttp.readyState4)
• ....valuexmlHttp.responseText
• responseText is data which is send back from the
  server. Usually it is processes somehow or
  appears in a certain place, therefore (usually)
  it doesnt contain lthtmlgtltbodygt tags.

9
On ready state change

• Here a function that should be called defined.
  Notice that the function can be defined in
  differently ways accordingly to JavaSript
  standards
• An inline definition
• xmlHttp.onreadystatechange function()
• if(xmlHttp.readyState4)
• ...
• Outside definition
• xmlHttp.onreadystatechange functionA
• The function is declared somewhere else

10
Calling server

• xmlHttp.open("GET",a.php",true)
• xmlHttp.send(null)
• Here we have a simple example, where the first
  parameter defines method (as in forms), the
  second sets an address to be called (as an action
  in forms) and the third one specifies that the
  call should be asynchronous.
• Calling a server with parameters
• var acta.php
• actact ? arg1name arg1value
• actact arg2name arg2value
• xmlHttp.open("GET",act,true)
• xmlHttp.send(null)

Sends the request
11
Calling server

• Post method example
• parameters are not attached to the url but is
  served via the send method
• Calling a server with parameters
• var acta.php
• var paramarg1name arg1value
• paramparam arg2name arg2value
• xmlHttp.open("POST",act,true)
• xmlHttp.setRequestHeader("Content-type",
  "application/x-www-form-urlencoded")
• xmlHttp.setRequestHeader("Content-length",
  params.length)
• xmlHttp.send(param)

12
XML as a response

• If a server posts xml
• lt response.contenttype"text/xml
• response.write("lt?xml version'1.0'
  encoding'ISO-8859-1'?gt") response.write("ltcompany
  gt")
• response.write("ltcompnamegtAlt/compnamegt")
• response.write("ltmanagergtLeo Vlt/managergt")
• response.write("lt/companygt")
• gt
• Then the AJAX client should use another property
• function()
• if(xmlHttp.readyState4)
• var postedbackxmlHttp.responseXML //usually
  responseXML.documentElement