AJAX

1
AJAX

• Bharat chaitanya

2
What is AJAX ?

• Asynchronous JavaScript and XML is a combination
  of standard Web technologies for the browser
  based web applications.
• JavaScript, CSS, DOM, XML
• It provides seamless interactivity in browser
  clients.
• No browser reloads
• Much smoother than standard request-wait-response
  for browser forms.

3
Main Idea

• AJAXs key concept is the use of XMLHttpRequest
  to buffer requests and responses within the
  browser.
• Use XMLHttpRequest to make a call to the server
  and get back the response without displaying it.
• The response is stored locally as either plain
  text (plain or HTML), or XML.
• JavaScript DOM can be used to walk the HTML or
  XML tree to handle most user interactions.

4
AJAX Cont

• AJAX is combination of several technologies
• For binding and user interaction -JavaScript
• For styling - XHTML and CSS
• For returned document handling -Document Object
  Model (DOM)
• For data manipulation and conversion -XML and
  XSLT
• For asynchronous data retrieval -XMLHttpRequest

5
XmlHttpRequest (XHR)

• An API that can be used by JavaScript, and other
  web browser scripting languages to transfer XML
  and other text data to and from a web server
  using HTTP.
• Besides XML, XMLHttpRequest can be used to fetch
  data in other formats such as HTML or plain text.
• XMLHttpRequest is an important part of the Ajax
  web development technique. It is used to create
  responsive and dynamic web applications.

6
(No Transcript)
7
AJAX Frameworks

• Toolkits to ease Ajax development.
• Focus solely on the client side, providing easy
  ways to add visual effects to your pages or
  streamlining the use of XMLHttpRequest.
• Taconite
• DOJO
• Scriptaculous
• High-level approach to Ajax development.

8
AJAX Applications

• Google Maps
• Gmail
• Meebo

9
Pros and cons

• Pros
• Asynchronous calls to a web server
• Open standards
• Bandwidth usage
• Cons
• Browser integration
• Reliance on JavaScript
• Order of XMLHttpRequests

10
DEMO
11
AJAX code

• // code for Mozilla, Opera, Safari
• if (window.XMLHttpRequest)
• req new XMLHttpRequest()
• // code for IE
• else if (window.ActiveXObject)
• try
• // For versions later than 5.0
• reqnew ActiveXObject("Msxml2.XMLHTTP")
• catch(e)
• // For previous versions
• req new ActiveXObject("Microsoft.XML
  HTTP")

12
Servlet

• String targetId request.getParameter("id")
• if (targetId.equals("bharat"))
• response.setContentType("text/xml")
• response.setHeader("Cache-Control",
  "no-cache")
• response.getWriter().write("ltmessagegtv
  alidlt/messagegt")
• else
• response.setContentType("text/xml")
• response.setHeader("Cache-Control",
  "no-cache")
• response.getWriter().write("ltmessagegti
  nvalidlt/messagegt")

13
AJAX Code

• function callback()
• // readyState of 4 signifies request is
  complete
• if (req.readyState 4)
• // status of 200 signifies successful HTTP
  call
• if (req.status 200)
• parseMessage()

14
AJAX Code

• function parseMessage()
• var message req.responseXML.getElementsByTagNam
  e("message")0
• setMessage(message.childNodes0.nodeValue)
• function setMessage(message)
• var mdiv document.getElementById("userIdMess
  age")
• if (message "invalid")
• mdiv.innerHTML "ltdiv style\"colorred\"gt
  Invalid User Idlt/ divgt"
• else
• mdiv.innerHTML "ltdiv style\"colorgreen\
  "gtValid User Idlt/ divgt"