Before going on, let me give you a rough sketch of the
mechanism for the following sample to achieve the locally updating effect.
Figure 8: The mechanism of the AJAX way to locally
update a web page
Now, let us start to build the AJAX style example.
1. Create a Sample Web Site
1. Launch Visual Studio 2005, create a new ASP.NET website and
name it "AjaxRefresh."
2. Open the default Web Form (default.aspx) and switch to
the design-time view. Since nearly all the layout elements and user interface
objects are similar with those in Sample 3, we select to omit giving the screen
snapshot.
3. Press Shift+F7 to switch to the source code view of the
page, and add click event handler for "Search."
Listing 12
<input id="btnSearch" style="width: 104px; height: 32px;"
type="button" value="Search" onclick="getData()" />
4. Create the XMLHttpRequest object, which is finished
within function getData() (just the click event handler for "Search").
The following is part of the corresponding client-side JavaScript.
Listing 13
<script type="text/javascript">
var xmlhttp;
function createHTTP()
{
//create different XMLHttpRequest objects according to different browsers
if(window.ActiveXObject)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
}
function getData()
{
var sAnimal=document.getElementById("txt").value;
createHTTP();
xmlhttp.onreadystatechange=statechange;
xmlhttp.Open("POST","datapage.aspx? sAnimal=" +sAnimal,true);
xmlhttp.Send();
}
function statechange()
{
if(xmlhttp.readystate==4)
{
if(xmlhttp.status==200)
{
FillData(xmlhttp.responseText);
}
}
}In the above function getData(), we first get the name that
the user has entered. Second, we create the asynchronous object—XMLHttpRequest by calling method createHTTP().
Third, we attach the state of object XMLHttpRequest to the client-side callback
function statechange(). Then we load the web page to link—our aim is to asynchronously get the data
supplied by page "datapage.aspx." Finally, we send out the request.
Within the callback function statechange(), when the
asynchronous calling has finished and the status of object XMLHttpRequest becomes
200, we can safely start to fill the DropDownList control with the returned
data, which is done by calling function FillData() (we are still not going to
list the source code of this function since it is quite similar to that of
above samples; for details you can refer to the downloadable source code at the
end of the article).
2. Create a Sample Web Page as a Broker to Provide Data
As seen from above, we asynchronously invoke a web page named
"datapage.aspx." This page plays the role of a broker to provide
data from the server side to the client side. Therefore, it is no use decorating
the web page with controls; we only need to write necessary code within
function Page_Load.
Listing 14
protected void Page_Load(object sender, EventArgs e)
{
string sAnimal = Request.QueryString["sAnimal"];
Response.Clear();
switch (sAnimal)
{
case "Cat":
Response.Write("Felix,John,Mary,Rossy");
break;
case "Dog":
Response.Write("Fido,Rover,Kissy");
break;
case "Cow":
Response.Write("Daisy,Mighty,Hassy,Hover");
break;
case "Parrot":
Response.Write("Polly,Curo,Paul,Pazz");
break;
}
}Here, we first obtain the passed parameter, and then return
the related animals using method "Response.Write"
according to the passed category entered on the client side. It is a really
simple code snippet!
Author's Note: Using a server page
as a broke to return processed data to the client side is the common means via
initial AJAX programming under ASP.NET 2.0 environment.
That is it! Now, you can press F5 to start the application
to make the similar test as the above samples. You are suggested to pay more
attention to the response speed in this AJAX way compared with all the other
ways explained above. The following figure gives the run-time snapshot.
Figure 9: The run-time snapshot for the AJAX way
