AJAX -- XML/JSON
Prof. Nalini N
AP(Sr)
SCOPE
VIT
What is AJAX ?
• Asynchronous Javascript and XML(XMLHttpRequest).
• Not a stand-alone language or technology.
• It is a technique that combines a set of known technologies in
order to create faster and more user friendly web pages.
• It is a client side technology.
• Ajax makes it possible to update a page without a refresh.
Using Ajax, we can refresh a particular DOM object without
refreshing the full page.
Purpose of AJAX
• Prevents unnecessary reloading of a page.
• When we submit a form, although most of the page remains the
same, whole page is reloaded from the server.
• This causes very long waiting times and waste of bandwidth.
• AJAX aims at loading only the necessary innformation, and making
only the necessary changes on the current page without reloading
the whole page.
Technologies Used
• AJAX uses:
• Javascript (for altering the page)
• XML/JSON (for information exchange)
• PHP/ASP/ JSP (server side)
AJAX uses JavaScript language through HTTP protocol to send/receive XML messages
asynchronously to/from Web server. Asynchronously means that data is not sent in a
sequence.
How Ajax Works
[Link] JavaScript function handEvent() will be
invoked when an event occurred on the HTML
element.
[Link] the handEvent() method, an instance of
XMLHttpRequest object is created.
[Link] XMLHttpRequest object organizes an XML
message within about the status of the HTML
page, and then sends it to the Web server.
[Link] sending the request, the XMLHttpRequest
object listens to the message from the Web server.
[Link] XMLHttpRequest object parses the message
returned from the Web server and updates it into
the DOM object.
AJAX --XML/JSON
XMLHTTP Object
• The object that is used to connect to the remote server is called
XMLHTTP/ XMLHttpRequest.
• It resembles the Java’s URL object that is used to access a specific
URL and get the contents.
• For IE:
objXmlHttp=new ActiveXObject(“[Link]”)
• For Mozilla:
objXmlHttp=new XMLHttpRequest()
Sending information
• After creating the object, we can send information to the web server and get the answer using
this object’s functions:
• GET METHOD: [Link](“GET”, url, true)
[Link]()
• POST METHOD: [Link]("POST", url, true)
[Link](“date=11-11-2006&name=Ali")
• Third argument tells that data will be processes asynchronously. When server responds, the
“OnReadyStateChange” event handler will be called.
OnReadyStateChange
• [Link]( “GET”, url, true );// true asynchronous request (default)
• [Link] = responseAjax();
/* onreadystatechange determines which handler will be called when ready state changes */
• [Link]( null );// sends the request
• The readystate property of our XMLHTTPRequest object can have the following values:
• 0 uninitialized
• 1 loading
• 2 loaded
• 3 interactive
• 4 completed
Retrieving information
• We get the returned value with the property
“[Link]”.
Pros/Cons--AJAX
• Advantages:
• Independent of server technology.
• Apart from obtaining the XMLHTTP object, all processing is same
for all browser types, because Javascript is used.
• Permits the development of faster and more interactive web
applications.
• Disadvantages:
• The back button problem. People think that when they press back
button, they will return to the last change they made, but in AJAX
this doesn not hold.
• Possible network latency problems. People should be given
feedback about the processing.
• Does not run on all browsers.
XM
L
JSON