The following two tabs change content below.
Hi, I have written and developed this site to share my experience and ideas with other colleagues. I also started to prepare interview questions and answers for job seekers. I hope it will help you a lot.

AJAX is an acronym for Asynchronous JavaScript and XML. AJAX allows 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.

Ajax is a group of inter-related technologies:
1. XMLHttpRequest : It is used to exchange data with a server.
2. XML or JSON : Server sends XML data or JSON data to the XMLHttpRequest callback function.
3. HTML and CSS : It is mainly used for presentation to display content.
4. JavaScript It is used to use the data.

XMLHttpRequest Object:
It allow communication between client and server. It is responsible for following operations:

1. Sends data from UI to server.
2. Receives the data from the server.
3. Updates the page without reloading it.

XMLHttpRequest Methods

Method Description
open(method, URL) Open request using GET or POST method and url.
open(method, URL, async) Open request using GET or POST method and url by specifying asynchronous or not.
open(method, URL, async, username, password) Open request using GET or POST method and url by specifying asynchronous or not ,username and password.
send() Send GET request.
 send(string) Send POST request
setRequestHeader(header,value) Add request header.

 

Properties of XMLHttpRequest object:

Property Description
onReadyStateChange Called at every stage changed.
readyState Indicate state of request. Different states are:
0 – Request not initialized.
1 – Request has been set up.
2 – Request Sent
3 – Request is in progress.
4 – Request Completed
reponseText Returns the response as a string.
responseXML Returns the response as a XML.
status 200 OK
404: Page not found

 

Working of Ajaxajax_flow

1. User sends a request from the UI and a HTTP Request is sent to the server by XMLHttpRequest object.
2. Server interacts with the database using JSP, PHP, Servlet, ASP.net etc.
3. Data is retrieved.
4. Server sends XML data or JSON data to the XMLHttpRequest callback function.
5. HTML and CSS data is displayed on the browser.

AJAX Example:
<!DOCTYPE html>
<html>
<body>
<p id=”demo”></p>
<button type=”button” onclick=”showData()”>Change Content</button>
<script>
function showData() {
var xhttp;
if (window.XMLHttpRequest) {
// code for modern browsers
xhttp = new XMLHttpRequest(); //creating an XMLHttpRequest object
} else {
// code for IE6, IE5
xhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
xhttp.onreadystatechange = function() {
//checking if Request is completed and status is OK
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById(“demo”).innerHTML = xhttp.responseText;
}
};
xhttp.open(“GET”, “ajax_demo.txt”, true); // Make sure file is in same server
xhttp.send();
}
</script>
</body>
</html>

276 total views, 1 views today

Leave a Reply

Your email address will not be published. Required fields are marked *