Datasheet

Chapter 1: AJAX Technologies
13
The second substring itself consists of two substrings separated by the equal sign ( = ), where the first
substring contains the
name HTML attribute value of the password text box DOM element and the
second substring contains the value that the end user has entered into this text box:
requestBody += “passwordtbx”;
requestBody += “=”;
requestBody += passwordtbx.value;
When this HTTP POST request arrives at the server, ASP.NET automatically loads the body of the request
into the
Request object’s Form collection property because the Content-Type request header is set to
the value
application/x-www-form-urlencoded . When the Page_Load method shown in Listing 1-2
is finally invoked, it first checks whether the current request contains an HTTP header named
MyCustomHeader :
if (Request.Headers[“MyCustomHeader”] != null)
If so, this is an indication that the current page postback is an asynchronous page postback and,
consequently, the
Page_Load method first validates the user’s credentials. To keep the current
discussion focused, this method hardcodes the valid credentials as shown here:
if (Request.Form[“passwordtbx”] == “password” &&
Request.Form[“usernametbx”] == “username”)
If the validation succeeds, Page_Load generates a string that contains the server data (which is again
hardcoded to keep this discussion focused), invokes the
Write method on the Response object to write
this string into the response output stream, and invokes the
End method on the Response object to end
the current response and, consequently, to send the server response to the client:
Response.Write(“Shahram|Khosravi|22223333|Some Department|”);
Response.End();
Ending the current response ensures that the current page will not go through its normal rendering rou-
tine where it renders the entire page all over again. That is the reason behind adding the custom HTTP
request header “
MyCustomHeader ”.
The arrival of the server response changes the state of the
XMLHttpRequest object to the completed
state, which in turn changes the value of the
readyState property of the object to 4 . This change in
value automatically invokes the
readyStateChangeCallback JavaScript function assigned to the
onreadystatechange property of the object.
The
readyStateChangeCallback JavaScript function encapsulates the logic that uses DHTML to
dynamically update those portions of the page that need refereshing without re-rendering and reloading
the entire page all over again. This logic is what is referred to as the Renderer in Figure 1-2 .
The
readyStateChangeCallback JavaScript function first checks whether the readyState and
status properties of the XMLHttpRequest object are set to 4 and 200 , respectively. If so, it invokes the
getElementById method on the document object to return a reference to the table DOM element that
c01.indd 13c01.indd 13 8/20/07 5:40:08 PM8/20/07 5:40:08 PM