Friday, July 06, 2012

AJAX

AJAX - Asynchronous Javascript + XML

AJAX is not a one new technology or a language. It's just a way of using a set existing standards and technologies. It's all about updating a parts of the web pages by exchanging data with the server without reloadng(postback) the whole page. Rather than reloading the whole page parts of the web page does callbacks to the server. There are no any prerequisites (additional tools or software) to use AJAX in one of your web pages you just have to know how to write some code in javascript.

XMLHttpRequest(XHR) - API in web scripting languages such as JavaScript to send direct HTTP/HTTPS requests to the server and return the response back to the script.

The example below shows how to update a part of a web page without reloding the whle page(postback). The AJAX script or the code to implement the scenario 

is written in Javascript. 


Creating a XMLHttpRequest Object

xmlhttp = new XMLHttpRequest();

This is the basic syntax for creating a XMLHttpRequest object. This syntax might differ for older versions of some of the browsers.

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); - for IE 5 and 6


Request

Request can be sent to the server by using open and send methods of the XMlHttpRequest object. 

xmlhttp.open("GET", "movie_catalog.xml", true);
xmlhttp.send();

There are 3 parameters passed to the open method.

method - Request type. This can be either GET or POST
url - Location of the file which is in the server where the response is returned from
async - asynchronous or not (true - asynchronous)


Response

There are 2 properties which can be used to get the response from the server.

responseText - when the response is in string format.
responseXML - when the response is in XML format.


onreadystatechange

A function can be stored in this property and it is called everytime when the readyState property of the XMLHttpRequest object changes.


readyState

This holds the status of the request object which ranges from 0 to 4
0: request is not initialized 
1: connection established to the server
2: request received 
3: request processing
4: response is ready


status

This holds standard HTTP status codes returned by the request
E.g:-
200: OK
403: Forbidden
404: Not Found


Example 1 : Get the content from a text file which is located in the server and display in a part of the web page.






































Example 2 : Get the content from a XML file which is located in the server and disply in a part of the web page




 


Example 3 : Get the response another web page which is located in the server.










No comments:

Post a Comment