Datasheet

Chapter 1: AJAX Technologies

Now let’s walk through the submitCallback function in the listing. First, submitCallback calls the

getElementbyId method on the document object to return a reference to the username text box DOM

element:

var usernametbx = document.getElementById(“usernametbx”);

Next, it calls the getElementById method again to return a reference to the password text box DOM

element:

var passwordtbx = document.getElementById(“passwordtbx”);

Next, it creates an instance of a class named credentials :

var credentials1 = new credentials(usernametbx.value, passwordtbx.value);

Listing 1-2 defines the credentials class as follows:

window.credentials = function window$credentials(username, password)

{

this.username = username;

this.password = password;

}

The next order of business is to serialize this credentials object into a format that the server-side code

understands. This is exactly what the following JavaScript function named

serialize does:

var body = serialize(credentials1);

This function basically contains the logic referred to as the Serializer in Figure 1-2 . The serialize func-

tion is discussed in more detail shortly, but for now it suffices to say that this function serializes the

specified

credentials object into a string with a specific format.

Next, the

submitCallback function creates an instance of the XMLHttpRequest class previously

defined in Listing 1-1 :

request = new XMLHttpRequest();

As previously discussed, this class encapsulates the browser-dependent logic that instantiates the appro-

priate object.

Then, the

submitCallback function invokes the open method on this XMLHttpRequest object, passing

in two parameters. The first parameter is the string “

POST” because the function is making a POST HTTP

request to the server. The second parameter is the value of the

action property of the form element. The

action property contains the URL of the current page. The page is basically posting back to itself in

asynchronous fashion.

request.open(“POST”, document.form1.action);

c01.indd 11c01.indd 11 8/20/07 5:40:07 PM8/20/07 5:40:07 PM