I only use AJAX in small doses on web sites – mainly ... Read More]]> If you are not involved in using the ASP.NET AJAX library offered for ASP.NET, but would like to attribute small amounts of AJAX functionality on your pages, you can do this easily with some javascript and a accessible page.

I only use AJAX in small doses on web sites – mainly to improve the user-experience. Typical instances will engage retrieving a full record based on a user’s selection in a drop down list. I don’t want to perform a full page post back, so I get the JavaScript xmlhttpserver object to do it for me behind the scenes. Here’s an example that fetches the address details for a North wind Traders customer.

First, a generic function to instantiate an instance of xmlhttprequest or xmlhttp, depending on the browser:

  function GetXmlHttpObject(handler)

  {

  var objXmlHttp=null

  if (navigator.userAgent.indexOf("MSIE")>=0)

  {

  var strName="Msxml2.XMLHTTP"

  if (navigator.appVersion.indexOf("MSIE 5.5")>=0)

  {

  strName="Microsoft.XMLHTTP"

  }

  try

  {

  objXmlHttp=new ActiveXObject(strName)

  objXmlHttp.onreadystatechange=handler

  return objXmlHttp

  }

  catch(e)

  {

  alert("Error. Scripting for ActiveX might be disabled")

  return

  }

  }

  if (navigator.userAgent.indexOf("Mozilla")>=0)

  {

  objXmlHttp=new XMLHttpRequest()

  objXmlHttp.onload=handler

  objXmlHttp.onerror=handler

  return objXmlHttp

  }

  }

Now, a simple dropdown list populated by a SqlDataSource control that fetches the CustomerID and Customer Name. Note the empty div, CustomerDetails below the dropdown list:

<div>

<asp:DropDownList

runat="server"

DataSourceID="SqlDataSource1"

DataTextField="CompanyName"

DataValueField="CustomerID">

</asp:DropDownList>

<asp:SqlDataSource

ID="SqlDataSource1"

runat="server"

ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|Northwind.mdb"

DataSourceMode="DataReader"

ProviderName="System.Data.OleDb"

SelectCommand="SELECT [CustomerID], [CompanyName] FROM [Customers]">

</asp:SqlDataSource>

</div>

<div></div>

Two more JavaScript functions are needed. One to fire the GetXmlHttpObject method, and denote the page to send a request to, and one to handle the response by checking the read State property of the object for a value of 4 or complete, then to write the response to the empty div:

  function GetCustomer(id)

  {

  var url="FetchCustomer.aspx?CustomerID=" + id ;

  xmlHttp=GetXmlHttpObject(stateChanged);

  xmlHttp.open("GET", url , true);

  xmlHttp.send(null);

  }

  function stateChanged()

  {

  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

  {

  document.getElementById('CustomerDetails').innerHTML=xmlHttp.responseText;

  }

  }

So now we have a page that gets called by xmlhttp (FetchCustomer.aspx) and we have a value to pass to the query string for the page. So the next thing to do is to add an event handler to the Dropdown List that will fire the GetCustomer() event and pass a CustomerID value:

  if (!Page.IsPostBack)

  {

  DropDownList1.DataBind();

  DropDownList1.Items.Insert(0, "");

  }

  DropDownList1.Attributes["onChange"] = "GetCustomer(this.value);";

  HttpResponse myHttpResponse = Response;

  HtmlTextWriter myHtmlTextWriter = new HtmlTextWriter(myHttpResponse.Output);

  DropDownList1.Attributes.AddAttributes(myHtmlTextWriter);

And finally, the code for the FetchCustomer.aspx page. Everything has been removed from the .aspx file except the first line. We don’t want DocTypes or default <form> tags disturbing the piece of html to be emitted in the response:

<%@ Page AutoEventWireup="true"

CodeFile="FetchCustomer.aspx.cs" Inherits="FetchCustomer" %>

And the code-behind makes doubly sure by calling Response.Clear() before querying the database and emitting the resulting data as html:

using System;

using System.Data;

using System.Data.OleDb;

using System.Text;

public partial class FetchCustomer : System.Web.UI.Page

{

  protected void Page_Load(object sender, EventArgs e)

  {

    Response.Clear();

    StringBuilder sb = new StringBuilder();

    sb.Append("<br />");

    string provider = "Provider=Microsoft.Jet.OLEDB.4.0;";

    string db = "Data Source=|DataDirectory|Northwind.mdb";

    string connstr = provider + db;

    string query = "SELECT * FROM Customers WHERE CustomerID = ?";

    OleDbConnection conn = new OleDbConnection(connstr);

    OleDbCommand cmd = new OleDbCommand(query, conn);

    cmd.Parameters.AddWithValue("", Request.QueryString["CustomerID"]);

    conn.Open();

    OleDbDataReader dr = cmd.ExecuteReader();

    while(dr.Read())

    {

      sb.Append(dr[1].ToString() + "<br />");

      sb.Append(dr[4].ToString() + "<br />");

      sb.Append(dr[5].ToString() + "<br />");

      sb.Append(dr[6].ToString() + "<br />");

      sb.Append(dr[7].ToString() + "<br />");

      sb.Append(dr[8].ToString() + "<br />");

      sb.Append("Tel: " + dr[9].ToString() + "<br />");

    }

    dr.Close();

    dr.Dispose();

    conn.Close();

    conn.Dispose();

    Response.Write(sb.ToString())

    Response.End();

  }

}