Four Ways to Locally Update a Web Page
page 9 of 12
by Xianzhong Zhu
Feedback
Average Rating: 
Views (Total / Last 10 Days): 55804/ 177

Sample 4

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 objectXMLHttpRequest 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 linkour 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


View Entire Article

User Comments

Title: d   
Name: d
Date: 2012-10-24 12:04:07 PM
Comment:
d
Title: Locally update a web page   
Name: Santosh
Date: 2010-05-04 3:41:59 AM
Comment:
It's an amazing and really very very helpful article. After reading this article, I have become a fan of this site.... I request you to not delete this article, as it may be very helpful to many people.
Title: updating a web page   
Name: Mrs.
Date: 2009-05-19 3:23:22 PM
Comment:
this is great
Title: Download Links Does Not Work   
Name: Tarik
Date: 2008-11-07 9:04:04 AM
Comment:
Good Article , But Please Review The Downloads Links
Title: Mr.   
Name: Joydip Kanjilal
Date: 2008-10-16 10:25:58 AM
Comment:
Excellent!
Title: how up date webpage   
Name: MUHAMMAD YOUNUS TOOR
Date: 2008-09-08 10:32:32 PM
Comment:
I WANT LEARN ABOUT WEB PAGE MAKIN G






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-08-25 4:15:37 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search