AJAX Demystified - Part Two - The AJAX DataGrid

var obj;

// Creates the XMLHTTP Request object
function getXMLHTTPRequest()
{
	var xRequest=null;
	if (window.XMLHttpRequest)
	{
		xRequest = new XMLHttpRequest();
	}
	else if (typeof ActiveXObject != "undefined")
	{
		xRequest = new ActiveXObject("Microsoft.XMLHTTP");
	}
	return xRequest;
}

// Performs a GET to our processSQL.aspx web page with the query
function sendRequest()
{
	obj=getXMLHTTPRequest();
	if (obj!=null)
	{
	    var query = document.getElementById("txtQuery").value;
	    var rows = document.getElementById("txtRows").value;
		obj.onreadystatechange = processResponse;
		obj.open("GET","http://localhost/ajaxDG/processSQL.aspx?query="+escape(query)+"&rows="+rows,true);
		obj.send(null);
	}
	return false;
}

// Process the HTTP Response when it is complete
function processResponse()
{
	if (obj.readyState == 4)
	{
		if (obj.status == 200)
		{
			var retval=obj.responseText;
			if (document.getElementById("results")!=null)
			{
				document.getElementById("results").innerHTML = retval;
			}
			else
			{
				alert("Error retrieving data!");
			}
		}
	}
}

// Send the query and parameters to the server side script for processing
function generateGrid()
{
	obj=getXMLHTTPRequest();
	if (obj!=null)
	{
	    var query = document.getElementById("txtQuery").value;
	    var rows = document.getElementById("txtRows").value;
	    var sortExpr = document.getElementById("txtSort").value;
	    var page = document.getElementById("txtPage").value;
		obj.onreadystatechange = processResponse;
		obj.open("GET","http://localhost/ajaxDG/processSQL.aspx?query="+escape(query)+"&rows="+rows+"&gridpage="+page+"&expression="+sortExpr,true);
		obj.send(null);
	}
	return false;
}

// Called when a column header is clicked
function sortGrid(sortExpr)
{
	document.getElementById("txtSort").value = sortExpr;
	generateGrid();
}

// Called when the grid is paged
function pageGrid(page)
{
	document.getElementById("txtPage").value = page;
	generateGrid();
}