Yes, we are in the world of AJAX where we don't live without jQuery, Prototype or Mootools but when it comes to explaining someone that how raw ajax works, you need an example of plain AJAX which we have been using 5 years back when these libraries were either just born and were not as famous as today. Because my favorite jQuery has become a de facto standard when it comes to DOM manipulation or AJAX.

Recently I have to give an example to one of my friend on how raw AJAX works and here I am sharing that sample with my blog readers as a reference.

Raw AJAX Example:

The Problem Statement: We want to SUM 2 values and we want to achieve that using server-side scripting as we don't want to do that using JavaScript due to some ABC reason.

The HTML:

Raw AJAX Example Demo
 
Val 1: 
<input id="val1" name="val1" type="text" />
 + 
Val 2: 
<input id="val2" name="val2" type="text" />
<input onclick="doSum()" type="button" value="=" />
<input id="sum" name="sum" type="text" />

The Javascript:

function doSum()
{
	var url = "simple_ajax_server.php";
	var data = "val1=" + document.getElementById("val1").value + "&val2=" + document.getElementById("val2").value;
	var method = 'POST';
	var async = true;
	var xmlHttpRequst = false;
 
	// Mozilla/Safari/Non-IE
    if (window.XMLHttpRequest)
	{
        xmlHttpRequst = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject)
	{
        xmlHttpRequst = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
	// If AJAX supported
	if(xmlHttpRequst != false)
	{
		// Open Http Request connection
		xmlHttpRequst.open(method, url, async);
		// Set request header (optional if GET method is used)
		xmlHttpRequst.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		// Callback when ReadyState is changed.
		xmlHttpRequst.onreadystatechange = function()
		{
			if (xmlHttpRequst.readyState == 4)
			{
				document.getElementById("sum").value = xmlHttpRequst.responseText;
			}
		}
		xmlHttpRequst.send(data);
	}
	else
	{
		alert("Please use browser with Ajax support.!");
	}
}

# How does it work?
As you can see in above JavaScript example code that, first we need to initialize XMLHttpRequest object. For IE and non-IE there is a different way to initialize that object. IE being Microsoft product supports XMLHTTPRequest object creation using ActiveX while rest of the browser does it the common way.
If you're successful creating the HTTP-Request object then you open the connection to URL/URI with which you want to interact to perform desired operation; with method either POST or GET. 3rd optional parameter to open method indicates whether you want to make async request or sync request.
# What is sync / async?
Due to the behavior of JavaScript when you perform any operation in JavaScript statements start executing in parallel. So if you go the async way your next line of code will start getting executed irrespective of whether request is completed or not?
# When to use sync? When you have to perform some operation which is dependent on the result of AJAX request and you can't define them in request-handler function (one which is defined as onreadystatechange) than you must use sync request.
# When to use async? When you're loading some static content which is for information purpose and there is no dependent operation to be performed on the data being received from the AJAX request at that time you have to use async.
If you omit that argument it defaults to true meaning an asynchronous request to the server.

# What is readyState? Read the rest of this entry »

Tags: AJAX, Javascript, Programming, Tutorials