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
