Do You Know About AJAX with Excellent Live Example
- Aashutosh Kumar Yadav
- Aug 31, 2022
- 3 min read
AJAX is a short form of 'Asynchronous JavaScript and XML'. The term 'AJAX' was used by 'Jesse James Garrett' in 2005, in his article related to Google page techniques.
As a full form of AJAX shows, it is 'JavaScript' and the 'XMLHttpRequest object' interrelated new web standard technology or way of programming.
Web contents, data, and design interaction are approached instantly on the AJAX platform. Data transportation(receiving and sending) is accomplished asynchronously(in the background) without page reload or refresh as we feel at Computer Desktop.
AJAX uses javascript as main role which further act on HTML(for presentation), XML(for data interchange) and XMLHttpRequest object(for asynchronous communication), to produce new web technique or approach.
XMLHttpRequest(XHR) object:
Most important component of the AJAX is XMLHttpRequest(XHR) object. It is an Application Programming Interface(API). It was first used by Microsoft in IE5 for the ActiveX objects. Its full and detailed specifications(interface, dependency, event handlers, states, requests, response) is available at w3.org.
If you are preparing and looking for a career in Laravel, please read and collect the interview questions from Laravel interview questions and answers for getting your dream job.
Implementation:
Following steps are used for invoking AJAX on a web page:
Creating XHR object
Getting the state and status of the XHR object
Performing actions based on XHR object state and status response
Sending request to server
STEP 1: Creating XHR object –
if (window.XMLHttpRequest) {
// Object creation for - IE7+, Firefox, Chrome, Opera, Safari - to exchange data with a server behind the scenes
http_request = new XMLHttpRequest();
// Sets the Content-Type header for the response to mime.
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject){
// IE5 and IE6 uses an ActiveX Object
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}STEP 2 and 3: Getting state and status and performing action -
// 'onreadystatechange' returns the current state in readyState’ attribute as : UNSENT - 0 (The object has been constructed), OPENED - 1 (The open() method has been successfully invoked), HEADERS_RECEIVED- 2 ( All redirects -if any - have been followed and all HTTP headers of the final response have been received), LOADING - 3 ( The response entity body is being received), DONE – 4
http_request.onreadystatechange=function()
{
//status is response attribute which returns the HTTP status code as 200 - OK, 404 - Page not found.
if (http_request.readyState==4 && http_request.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}STEP 4: Sending request to the server
//open() method send a Request To a Server, Default syntax at w3.org is : open(method, url, async, user, password), the async parameter of the open() method has to be set to 'true'
http_request.open ('GET', uri, true);
//send() method Initiates the request. Default syntax : send(data)
http_request.send (null);Example: The following is basic AJAX interaction example. It displays textual content on a button click.
<!DOCTYPE html>
<html>
<title>Text Content display via AJAX technique without page reload or refresh</title>
<head>
<script type="text/javascript">
function displayContent()
{
var http_request;
if (window.XMLHttpRequest)
{
// Object creation for - IE7+, Firefox, Chrome, Opera, Safari - to exchange data with a server behind the scenes
http_request=new XMLHttpRequest();
}
else
{// // IE5 and IE6 uses an ActiveX Object
http_request=new ActiveXObject("Microsoft.XMLHTTP");
}
//Set the loading image.
document.getElementById('content').innerHTML = "<p align='center'>
<img src='http://cmssolutionsexpert.com/demo/ajax/what-is-ajax/images/ajax-loader.gif'><br /> Please Wait...</p>";
// State value returned by 'onreadystatechange' are :UNSENT - 0 (The object has been constructed), OPENED - 1 (The open() method has been successfully invoked), HEADERS_RECEIVED- 2 ( All redirects -if any - have been followed and all HTTP headers of the final response have been received), LOADING - 3 ( The response entity body is being received), DONE - 4
http_request.onreadystatechange=function()
{
//It is response Attribute - ' status' which returns the HTTP status code as 200 - OK, 404 - Page not found.
if (http_request.readyState==4 && http_request.status==200)
{
//It is response Attribute - 'responseText' which returns the text response entity body.
document.getElementById("content").innerHTML=http_request.responseText;
}
}
//open() method send a Request To a Server, Default syntax at w3.org is : open(method, url, async, user, password), the async parameter of the open() method has to be set to 'true'
http_request.open("GET","text-content-display-on-button-click.txt",true);
//send() method Initiates the request. Default syntax : send(data)
http_request.send();
}
</script>
<style type="text/css">
body, p{font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#000000;}
button {
background:#f78096;
background:-moz-linear-gradient(top,#f78096 0%,#f56778 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f78096),color-stop(100%,#f56778));
background:-webkit-linear-gradient(top,#f78096 0%,#f56778 100%);
background:-o-linear-gradient(top,#f78096 0%,#f56778 100%);
background:-ms-linear-gradient(top,#f78096 0%,#f56778 100%);
background:linear-gradient(top,#f78096 0%,#f56778 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f78096',
endColorstr='#f78096',GradientType=0);
padding:5px 4px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:12px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #ae4553;
cursor:pointer;
}
</style>
</head>
<body>
<div id="content">
<p>Text Content display via AJAX technique without page reload or refresh</p>
<button type="button" onclick="displayContent()" >Click Me</button>
</div>
</body>
</html>Source: knowledgetokri
Comments