Home >>Ajax Tutorial

Ajax Tutorial


Ajax Tutorial for Beginners

  • AJAX Stands for Asynchronous JavaScript and XML
  • It is a technique for creating fast and dynamic web pages.
  • AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server.
  • This means that it is possible to update parts of a web page, without reloading the whole page.

What is an Ajax call ?

An Ajax call is an asynchronous request initiated by the browser that does not directly result in a page transition. A servlet request is a Java-specifc term (servlets are a Java specification) for servicing an HTTP request that could get a simple GET or POST (etc) or an Ajax request.  

What is the XMLHTTPREQUEST ?

XMLHttpRequest (XHR) is an API available to web browser scripting languages such as JavaScript. It is used to send HTTP or HTTPS requests to a web server and load the server response data back into the script.  

AJAX Tutorial With Suitable Example

HTML Page

<!DOCTYPE html>
<html>
	<html>
		<title>Ajax Example</title>
		<script>
			function loadAjax()
			{
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function()
  {
    if (this.readyState == 4 && this.status == 200)
	{
     document.getElementById("msg").innerHTML = this.responseText;
    }
  };
  xmlhttp.open("GET", "load_data.txt", true);
  xmlhttp.send();
}
		</script>
	</html>
	
<body>

<div id="msg">
  <h1>This content will change after click on button</h1>
</div>
<input  type="button" onclick="loadAjax()" value="Click here to cahnge Content"></button>

</body>
</html>

  Note: Create a text file name "load_data.txt" write some contents inside this file, this text file contents will display in <div> after clicking on button


Topics We will Cover in Ajax Tutorial

Sr.No. Topics
1 Ajax Send Request Server
2 AJAX Server Response
3 Ajax Post Method Example
4 Ajax Registration Form
5 Display Data Using Ajax
6 Display Country State City

Learn Latest Tutorials