Summarizing AJAX Patterns Under ASP.NET
page 2 of 8
by Xianzhong Zhu
Feedback
Average Rating: 
Views (Total / Last 10 Days): 41089/ 131

The XMLHTTP+WebForm Pattern

As you may have remembered, XMLHTTP+WebForm may be the most original Ajax pattern leveraged in the ASP.NET platform. In this mode, developers directly use JavaScript to manipulate the XMLHTTP object sending asynchronous requests to the server side ASP.NET web forms. On the other hand, a Web form is created on the server side which is used to accept and process the XMLHTTP requests, i.e. Ajax (in essence the XMLHTTP object) serves as the fundamental communicating approach between the server side and the client side.

In this section we will write a simple sample. To gain a more intuitive understanding with the XMLHTTP+WebForm pattern, let us draw a sketch map to illustrate the general flow (which is also used in our sample), as is shown in Figure 1.

Figure 1 - The sketch map of the XMLHTTP+WebForm styled implementing flow

The client side

The main client side secrecy is hidden inside the script file ajax.js. Looking more closely at the attached sample, you will find this file contains three functions: talktoServer, which is the main function performing the task of communicating with the server side, newXMLHttpRequest, which will create a cross-browser compatible XMLHTTP object, and getReadyStateHandler, which is the client side callback function of the created XMLHTTP object, responsible to judge the callback states and use the returned data to update the web page. Because in the next section we will continue to use the file ajax.js and delve into these three functions, we will not list their related code here.

The server side

The server side is composed of two pages. The first page is WebForm.aspx which is the main page to render the server-side returned data onto the screen. Figure 2 indicates the design-time snapshot of this page.

Figure 2 - The design-time snapshot of the first example

When the user enters something in the textbox and clicks the "Submit" button, a synchronous invocation will be triggered. And if the request succeeds, the div element at the bottom will be populated with the newly returned data from the server side.

Now, let us look at the HTML code of this page.

Listing 1

<head runat="server">
    <title>Hello Ajax---XmlHttp+Web Form</title>
    <script type="text/javascript" src="js/ajax.js"></script>
 
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div style="text-align: center; width: 420px">
        <h1>XmlHttp+Web Form Pattern</h1>
        <br />
        <input id="testmsg" type="text" value="Hello AJAX" 
           style="width: 214px"/>
        <br />
        <button onclick="talktoServer('ajax.aspx')">
            Submit</button>
        <br />
        <br />
        <div id="msg_display" >
          The server side returned info will be shown here...</div>
    </div>
</body>

Pretty simple, isn't it? The only key point relates to the click event handler of "Submit," which is just the JavaScript function talktoServer discussed above.

The second page is ajax.aspx, which is the asynchronously requested page serving as the server side network gate, accepting the passed string from the XMLHTTP object, further processing the string, and at last returning it to the client side. Below is the related code of this page.

Listing 2

protected void Page_Load(object sender, EventArgs e)
{
  string str = "From the server-side ajax.aspx:"+Request["msg"]+"<br/>Your IP
  address:";
  str += Request.UserHostAddress;
  str += "<br/>The Datatime on the Server side:";
  str += DateTime.Now.ToLocalTime ();
  Response.Write(str);
}

Now, you can press F5 to launch the sample page WebForm.aspx. And with everything alright, you will catch sight of a snapshot, as shown in Figure 3.

Figure 3 - When the user enters something and clicks the "Submit" button a new string will be returned and stuffed into the below div element


View Entire Article

User Comments

Title: mp   
Name: moosa
Date: 2008-11-12 8:26:44 AM
Comment:
thanks
Title: About Post   
Name: Gopi
Date: 2008-10-15 7:56:44 AM
Comment:
Useful post..
Title: Very interesting   
Name: Raul Macias
Date: 2008-10-14 2:35:33 PM
Comment:
Thanks for sharing this; very helpful indeed.
Title: About Post   
Name: Rem
Date: 2008-10-13 2:15:28 PM
Comment:
Nice post...






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


©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-11-14 6:43:20 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search