• Choose a category
• All
• Classic-Fiction

By Root 4024 0

the text noticeable. Just as we did for the login span, we add a margin so the A in Ajax is not directly sitting on the edge of the header. After applying the CSS to our header, we can save the document and view how the CSS has changed the look and feel of the header, as shown in figure 11.8.

Figure 11.8

Ajax portal’s login page with

the CSS stylesheet attached

Here you can see that our textboxes are aligned on the right side and that our slogan is on the left side. We have taken the basic HTML structure and created an attractive login header that did not require a table. Now that the header is styled, we can add some functionality to this form. We need to add our JavaScript functionality so that we can make a request back to the server without submitting the entire page.

The JavaScript login code

The JavaScript login code will use the power of Ajax to allow us to send only the username and password to the server without having to submit the entire page. In order to do this, we need to reference our external JavaScript file, net.js, Licensed to jonathan zheng

The Ajax login

437

which contains the ContentLoader object, so we can use Ajax to send and retrieve the request:

The ContentLoader file does all of the work of determining how to send the information to the server, hiding any browser-specific code behind the easy-touse wrapper object that we introduced in chapter 3. Now that the net.js file is referenced, we are able to perform the request. The request is initiated by the button click from our login form. The login form needs to perform three actions. The first is to inform the user that his request is being processed, the next is to gather the information, and the third is to send the request to the server (listing 11.6). Listing 11.6 The XMLHttpRequest login request

function LoginRequest(){

document.getElementById("spanProcessing").innerHTML =

" Verifying Credentials";

var url = 'portalLogin.servlet';

var strName = document.Form1.username.value;

var strPass = document.Form1.password.value;

var strParams = "user="+strName

+ "&pass=" + strPass

var loader1 = new net.ContentLoader(

url,CreateScript,null,"POST",strParams

);

}

Before we send the information to the server, we display a message to the user saying that his action of clicking the button is allowing him to log into the system. This keeps the user from clicking the button repeatedly, thinking that nothing happened. We obtain the username and password field values and place them into a string that we will submit to the server. We submit the values to the server with our ContentLoader object, which accepts our parameters for the URL, the function to call for success, the function to call for an error, the POST form action, and the string containing the parameters to post. Let’s look at the function we call when the server returns success: CreateScript(). It will process the data returned from the server-side page:

function CreateScript(){

strText = this.req.responseText;

eval(strText);

}

Licensed to jonathan zheng

438

CHAPTER 11

The enhanced Ajax web portal

When we built the server-side code, we returned text strings that contained JavaScript statements in the responseText of our returned object. In order to effectively use the JavaScript statements, we must process them with the eval() method, which determines exactly what the strings contain and executes it. In this case, the string is either going to contain the error message generated by the LoginFilter failing, or the code to build the windows, if the filter lets us through to the SelectServlet (see listing 11.8).

What does the string consist of? In this application, we are not going to be sending back an XML document, as we have done in many of our examples. Instead, we will be sending back structured JavaScript statements with which we will be able to use the eval() method. Using the terms that we developed in chapter 5, we would say that our solution here is script-centric rather