Scribd
Upload
81 views

Ajax - Xml/Json: Prof. Nalini N AP (SR) Scope VIT

AJAX uses JavaScript and XML/JSON to asynchronously update parts of a web page without reloading the entire page. It works by using an XMLHttpRequest object to send and receive data from a web server in the background. This allows information on the page to be updated instantly without interrupting what the user is doing. AJAX aims to improve user experience by reducing loading times and making pages feel more responsive.

Uploaded by

justadityabist
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
81 views

Ajax - Xml/Json: Prof. Nalini N AP (SR) Scope VIT

AJAX uses JavaScript and XML/JSON to asynchronously update parts of a web page without reloading the entire page. It works by using an XMLHttpRequest object to send and receive data from a web server in the background. This allows information on the page to be updated instantly without interrupting what the user is doing. AJAX aims to improve user experience by reducing loading times and making pages feel more responsive.

Uploaded by

justadityabist
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

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
1.The JavaScript function handEvent() will be
invoked when an event occurred on the HTML
element.
2.In the handEvent() method, an instance of
XMLHttpRequest object is created.
3.The XMLHttpRequest object organizes an XML
message within about the status of the HTML
page, and then sends it to the Web server.
4.After sending the request, the XMLHttpRequest
object listens to the message from the Web server.
5.The 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(“Microsoft.XMLHTTP”)
• 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: xmlhttp.open(“GET”, url, true)
xmlhttp.send()
• POST METHOD: xmlhttp.open("POST", url, true)
xmlhttp.send(“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
• myRequest.open( “GET”, url, true );// true  asynchronous request (default)
• myRequest.onreadystatechange = responseAjax();
/* onreadystatechange determines which handler will be called when ready state changes */
• myRequest.send( 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
“xmlHttp.responseText”.
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

You might also like