dharmavir/plain_ajax.html

## plain_ajax.html
<html>
<head>
<title>Raw AJAX Example Demo</title>
</head>
<body>
Val 1:&nbsp;<input type="text" id="val1" name="val1" value="" />
&nbsp;+&nbsp;
Val 2:&nbsp;<input type="text" id="val2" name="val2" value="" />
&nbsp;
<input type="button" value="=" onclick="doSum()"/>
&nbsp;
<input type="text" id="sum" name="sum" value="" />
<script type="text/javascript" src="plain_ajax.js"></script>
<script type="text/javascript">

var displaySum = function()
{
	if (this.readyState == 4)
	{
		document.getElementById("sum").value = this.responseText;
	}
}
displaySum.data = null;
function doSum()
{
	var url = "simple_ajax_server.php";
	var data = "val1=" + document.getElementById("val1").value + "&val2=" + document.getElementById("val2").value;
	var method = 'GET';
	var async = true;
	doAjax(url, method, async, displaySum, data);
}

</script>
</body>
</html>

## plain_ajax.js
// Common function to initialize XML Http Request object
function getHttpRequestObject()
{
	// Define and initialize as false
	var xmlHttpRequst = false;

	// Mozilla/Safari/Non-IE
    if (window.XMLHttpRequest)
	{
        xmlHttpRequst = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject)
	{
        xmlHttpRequst = new ActiveXObject("Microsoft.XMLHTTP");
    }
	return xmlHttpRequst;
}

// Does the AJAX call to URL specific with rest of the parameters
function doAjax(url, method, async, responseHandler, data)
{
	// Set the variables
	url = url || "";
	method = method || "GET";
	async = async || true;
	data = data || null;

	if(url == "")
	{
		alert("URL can not be null/blank");
		return false;
	}
	var xmlHttpRequst = getHttpRequestObject();

	// If AJAX supported
	if(xmlHttpRequst != false)
	{
		// Open Http Request connection
		if(method == "GET")
		{
			url = url + "?" + data;
			data = null;
		}
		xmlHttpRequst.open(method, url, async);
		// Set request header (optional if GET method is used)
		if(method == "POST")
		{
			xmlHttpRequst.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		}
		// Assign (or define) response-handler/callback when ReadyState is changed.
		xmlHttpRequst.onreadystatechange = responseHandler;
		// Send data
		xmlHttpRequst.send(data);
	}
	else
	{
		alert("Please use browser with Ajax support.!");
	}
}

## simple_ajax_server.php
<?php

$val1 = (int)$_REQUEST['val1'];
$val2 = (int)$_REQUEST['val2'];

echo $val1 + $val2;
	<html>
	<head>
	<title>Raw AJAX Example Demo</title>
	</head>
	<body>
	Val 1: <input type="text" id="val1" name="val1" value="" />
	+
	Val 2: <input type="text" id="val2" name="val2" value="" />

	<input type="button" value="=" onclick="doSum()"/>

	<input type="text" id="sum" name="sum" value="" />
	<script type="text/javascript" src="plain_ajax.js"></script>
	<script type="text/javascript">

	var displaySum = function()
	{
	if (this.readyState == 4)
	{
	document.getElementById("sum").value = this.responseText;
	}
	}
	displaySum.data = null;
	function doSum()
	{
	var url = "simple_ajax_server.php";
	var data = "val1=" + document.getElementById("val1").value + "&val2=" + document.getElementById("val2").value;
	var method = 'GET';
	var async = true;
	doAjax(url, method, async, displaySum, data);
	}

	</script>
	</body>
	</html>
	// Common function to initialize XML Http Request object
	function getHttpRequestObject()
	{
	// Define and initialize as false
	var xmlHttpRequst = false;

	// Mozilla/Safari/Non-IE
	if (window.XMLHttpRequest)
	{
	xmlHttpRequst = new XMLHttpRequest();
	}
	// IE
	else if (window.ActiveXObject)
	{
	xmlHttpRequst = new ActiveXObject("Microsoft.XMLHTTP");
	}
	return xmlHttpRequst;
	}

	// Does the AJAX call to URL specific with rest of the parameters
	function doAjax(url, method, async, responseHandler, data)
	{
	// Set the variables
	url = url \|\| "";
	method = method \|\| "GET";
	async = async \|\| true;
	data = data \|\| null;

	if(url == "")
	{
	alert("URL can not be null/blank");
	return false;
	}
	var xmlHttpRequst = getHttpRequestObject();

	// If AJAX supported
	if(xmlHttpRequst != false)
	{
	// Open Http Request connection
	if(method == "GET")
	{
	url = url + "?" + data;
	data = null;
	}
	xmlHttpRequst.open(method, url, async);
	// Set request header (optional if GET method is used)
	if(method == "POST")
	{
	xmlHttpRequst.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	}
	// Assign (or define) response-handler/callback when ReadyState is changed.
	xmlHttpRequst.onreadystatechange = responseHandler;
	// Send data
	xmlHttpRequst.send(data);
	}
	else
	{
	alert("Please use browser with Ajax support.!");
	}
	}
	<?php

	$val1 = (int)$_REQUEST['val1'];
	$val2 = (int)$_REQUEST['val2'];

	echo $val1 + $val2;