Ajax Introduction

❮ Home Next ❯

AJAX is a technique for send and receive data from server without reloading the page.

AJAX stands for Asynchronous JavaScript And XML.

You can update a part of webpage using AJAX.

It is not a programming language.

The main purpose of using AJAX is to avoid page reload and do multiple work on a same page.

Example: Insert, Update, Delete , fetch in one page.

How it works:

  1. User sends a request from the webpage and a javascript call goes to XMLHttpRequest object.
  2. .HTTP Request is sent to the server by XMLHttpRequest object.
  3. Server fetch the data from the database using JSP, PHP, Servlet, ASP.net etc file.
  4. Data is retrieved and view the data in webpage using HTML.

History

In 2005 by Google, used AJAX for show suggestions to user.

Example: (Call a PHP file for Insert)

<script>
$(document).ready(function() {
	$('#butsave').on('click', function() {
		$("#butsave").attr("disabled", "disabled");
		var name = $('#name').val();
		var email = $('#email').val();
		$.ajax({
				url: "save.php",
				type: "POST",
				data: {
					name: name,
					email: email
				},
				cache: false,
				success: function(dataResult){
					var dataResult = JSON.parse(dataResult);
					if(dataResult.statusCode==200){
						$('#success').html('Data added successfully !'); 						
					}
					else if(dataResult.statusCode==201){
					   alert("Error occured !");
					}
					
				}
			});
	});
});
</script>
❮ Home Next ❯