Own (Little) AJAX Framework

Executing an Out-of-Band Call from an ASP.NET Page

The JavaScript code should initiate and control the remote URL invocation, as shown in the
following code:
<script type="text/JavaScript">
function SendRequest(url, params)
{
// Add some parameters to the query string
var pageUrl = url + "?outofband=true&param=" + params;
// Initialize the XmlHttpRequest object
var xmlRequest, e;
try {
xmlRequest = new XMLHttpRequest();
}
catch(e) {
try {
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) { }
}

// Prepare for a POST synchronous request
xmlRequest.open("POST", pageUrl, false);
xmlRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlRequest.send(null);
return xmlRequest;
}
</script>

The first parameter—named outofband in the example—is a Boolean value and indicates
whether or not the request is going to be a custom callback request. By knowing this, the target
page can process the request appropriately. 
The second parameter—named param in the example—contains the input parameters for the server-side code.

The host ASP.NET page looks like the following code snippet:
<head runat="server">
<title>Testing Out-of-band</title>
</head>
<body>
<form id="Form1" runat="server">
<h1>Demonstrate Out-of-band Calls</h1>
<h2><%=Request.Url%></h2>
<hr />
<asp:DropDownList runat="server" ID="EmployeeList" />
<input id="Button1" type="button" value="Go Get Data"
onclick="MoreInfo()" />
<hr />
<span id="Msg" />
</form>
</body>
</html>

The code-behind class is shown in the following listing:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (IsOutOfBand())
return;
if (!IsPostBack)
PopulateList();
}
private bool IsOutOfBand()
{
bool isCallback = false;
isCallback = String.Equals(Page.Request.QueryString["callback"],
"true",
StringComparison.OrdinalIgnoreCase);

if (isCallback)
{
string param = Request.QueryString["param"].ToString();
Response.Write(ExecutePageMethod(param));
Response.Flush();
Response.End();
return true;
}
return false;
}

private void PopulateList()
{
SqlDataAdapter adapter = new SqlDataAdapter(
"SELECT employeeid, lastname FROM employees",
"SERVER=(local);DATABASE=northwind;UID=...;");
DataTable table = new DataTable();
adapter.Fill(table);
EmployeeList.DataTextField = "lastname";
EmployeeList.DataValueField = "employeeid";
EmployeeList.DataSource = table;
EmployeeList.DataBind();
}
string ExecutePageMethod(string eventArgument)
{
return "You clicked: " + eventArgument;
}
}

In the sample code, I have a method with a contracted name and
signature—ExecutePageMethod—whose output becomes the plain response for the request. In
the sample code, the method returns and accepts a string, meaning that any input and output
parameters must be serializable to a string.

string param = Request.QueryString["param"].ToString();
Response.Write(ExecutePageMethod(param));
Response.Flush();
Response.End();

Displaying Results

function MoreInfo()
{
var empID = document.getElementById("EmployeeList").value;
var xml = SendRequest("default.aspx", empID);
// Update the UI
var label = document.getElementById("Msg");
label.innerHTML = xml.responseText;
}

Source: Introducing MS ASP.NET AJAX