Description
AJAX stands for
HTML can be defined as “
Here the request will be sent from the browser to the server through an internet, when the server sends back the response the data will be updated by using JavaScript and the content of the web page will be updated successfully.
Asynchronous JavaScript and XML used to create dynamic web pages, the main advantage of AJAX is that without reloading the page the developer can perform the operations on a web page. Some applications rarely use AJAX technique such as Google Maps, Gmail, Facebook. AJAX is nothing but a gathering of some technologies such as follows.
- HTML
- JavaScript
- DOM
- XMLHttpRequest
- XML or JSON
Hyper Text Markup Language.” Which is used to demonstrates the web pages with ordinary text.
JavaScript is a lightweight scripting language used to create network-based applications. It is very easy to implement as it is integrated with Java and HTML programming languages. JavaScript is an open and cross-platform programming language that involves both functional programming and object-oriented features.
The Document Object Model (DOM) is an API for HTML files. It characterizes the sensible structure of records and the way a report is gotten to and controlled. In the DOM determination, the expression "document" is utilized as a part of the expansive sense - progressively, XML is being utilized as a method for speaking to a wide range of sorts of data that might be put away in assorted frameworks.
The XMLHttpRequest is used to request the information from the web server. By using XMLHttpRequest, the developer can do the changes without reloading the page.
XML came into the picture to transport the information and to store the information. Many people will think that XML is a replacement of HTML, but it was designed specially to carry the information not to expose the information like HTML while developing any web applications by using servlets or JSP mostly XML will be used to carry the data. The following image will describe the functionality of AJAX.
Example
Most of the development will use JSON to provide the AJAX related updates between the server and the browser and the best example for AJAX is that live scoring updates on the site. If any data is changed by using AJAX is going to store on the web server in the format of JSON, where JavaScript is responsible for getting those JSON files.
json.html
[html]
<html>
<head>
<meta content="text/html; charset=utf-8">
<title>AJAX JSON by Splessons</title>
<script type="application/javascript">
function load()
{
var url = "http://date.jsontest.com/";//use any url that have json data
var request;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();//for Chrome, mozilla etc
}
else if(window.ActiveXObject){
request=new ActiveXObject("Microsoft.XMLHTTP");//for IE only
}
request.onreadystatechange = function(){
if (request.readyState == 4 )
{
var jsonObj = JSON.parse(request.responseText);//JSON.parse() returns JSON object
document.getElementById("date").innerHTML = jsonObj.date;
document.getElementById("time").innerHTML = jsonObj.time;
}
}
request.open("GET", url, true);
request.send();
}
</script>
</head>
<body bgcolor="skyblue">
<center>
<img src="E:\splessons.png"></br></br>
Date Of the day: <span id="date"></span><br/> </br>
Time Of the day: <span id="time"></span><br/> </br>
<button type="button" onclick="load()">Load Information</button>
</center>
</body>
</html>
[/html]
In the above code, the 
In the above image, when clicking on load information the current details will be updated.
getElementById() strategy gives back the component that has the ID characteristic with the predefined esteem. This strategy is a standout among the most widely recognized techniques in the HTML DOM and is utilized practically every time to control.
The Element.innerHTML property is used to set and get the HTML sentence structure portraying the descendants. of the components.
ActiveX control is the part of the application. But It is used only one time when the user wants to take print out of that page. There is a form on that JSP page, in which user fills all details and clicks on "print" button. Now blue tooth & ActiveX control comes into the picture. By clicking on a print button, a blue tooth connection is established between PDA & Bluetooth printer. When a connection is established properly, the desired printout comes from the printer.
Where the developer has written the code to get the current time and date, where the separate code has been written for some browsers such as google and IE. To get effective output one image also added.
An EventHandler that is called at whenever point the readyState property changes. The callback is called with the UI string. The XMLHttpRequest.onreadystatechange property will have the event handler to be called when the ready state change event is let go, that is each time the readyState property of the XMLHttpRequest changes. The callback is called from the UI thread.
Output: Now compile the code result will be as follows.
Description
The XMLHttpRequest object is an important key element to AJAX. XMLHttpRequest is an API that can be utilized by many languages such as JavaScriptand other web program scripting dialects to exchange and control XML information to and from a web server utilizing HTTP, building up a free association channel between a website page's Client-Side and Server-Side.
The information came back from XMLHttpRequest calls will regularly be given by back-end databases. Other than XML, XMLHttpRequest can be utilized to bring information in different arrangements like JSON.
Key Points
- AJAX became popular in 2005 by Google.
- In AJAX data will be send to the server in background.
- The advantage of AJAX is that no need to stop the services of any application.