AJAX – Asynchronous JavaScript and
XML
Working and XMLHttpRequest Object
AJAX is a technique for creating fast and dynamic web pages with
the help of XML, HTML, CSS, and Java Script. Ajax uses XHTML for content, CSS
for presentation, along with Document Object Model and JavaScript for dynamic
content display. XML is commonly used as the format for receiving server data,
although any format, including plain text, can be used.
Ajax makes it possible to update parts of a web page, without
reloading the whole page. AJAX allows web pages to be updated asynchronously by
exchanging small amounts of data with the server behind the scenes.
AJAX
Working
When user first visits the page, the Ajax engine
is initialized and loaded. From that point of time user interacts with Ajax
engine to interact with the web server. The Ajax engine operates asynchronously
while sending the request to the server and receiving the response from server.
Ajax life cycle within the web browser is as shown below:
AJAX
is based on internet standards, and uses a combination of:
- XMLHttpRequest object (to retrieve data from a web
server)
- JavaScript/DOM
(to display/use the data)
XMLHttpRequest Object
1.
Create an XMLHttpRequest Object
Syntax for creating
an XMLHttpRequest object:
variable = new XMLHttpRequest();
Example:
xhttp = new XMLHttpRequest();
2.
Methods of XMLHttpRequest Object
|
Method |
Description |
|
abort() |
Cancels the current request |
|
getResponseHeader(headerName) |
Returns the value of the
specified HTTP header |
|
getAllResponseHeaders() |
Returns the complete set of
HTTP headers as a string |
|
open(method, url, async) |
Specifies the type of
request |
|
send() |
Sends the request to the
server (used for GET) |
|
send(string) |
Sends the request to the server (used for
POST) |
|
setRequestHeader(header, value) |
Adds a label/value pair to the HTTP header to
be sent in request header: specifies the header name |
3.
Send a Request To a Server
The XMLHttpRequest object is used
to exchange data with a server. To send a request to a server, use the open() and send() methods of the XMLHttpRequest
object
Example: Sending request
using GET and POST methods
xhttp.open("GET",
"url of doc", true);
xhttp.send();
xhttp.open("POST", " url of doc ", true);
xhttp.send();
sending data via GET.
xhttp.open("GET",
"demo_get.php?fname=Henry&lname=Ford", true);
xhttp.send();
To send data via
POST, add a HTTP header with setRequestHeader() and specify the data in the send() method:
xhttp.open("POST",
" demo_post.php ", true);
xhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
4.
AJAX - Server Response
To get the response
from a server, use the responseText or responseXML property of the XMLHttpRequest
object.
|
Property |
Description |
|
responseText |
Returns the response data as a string |
|
responseXML |
Returns the response data as XML document
object, which can be be examined and parsed using
the W3C DOM node tree methods and properties. |
5.
AJAX – Event handling
When a request to a
server is sent, perform some actions based on the response. Three important
properties of the XMLHttpRequest object:
|
Property |
Description |
|
onreadystatechange |
Stores a function (or the name of a function)
to be called automatically each time the readyState
property changes |
|
readyState |
Defines the current state
of the XMLHttpRequest object. Changes from 0 to 4: 0: request not initialized |
|
status |
200: "OK" 404: Page not found |
|
statusText |
Returns the status as a string. Example –
“Page Not Found”, or “OK”. |
The onreadystatechange event is
triggered every time the readyState changes. It
specifies what will happen when the server response is ready to be processed.
The readyState property holds the state of the XMLHttpRequest. When readyState
is 4 and status is 200, the response is ready.
Example Program
No comments:
Post a Comment
Don't be a silent reader...
Leave your comments...
Anu