AJAX In Action [210]
public static String getLoginError() {
StringBuffer jsBuf=new StringBuffer()
.append("document.getElementById('spanProcessing')\n")
.append(" .innerHTML = ")
.append("'The Username and Password are invalid';\n"); return jsBuf.toString();
}
The login() method in listing 11.2 provides the details on authentication. We extract the username and password from the request g and then invoke findUser(), which contacts the database for a matching row i. (We’ve abstracted away the details of the database behind a DBUtil object here.) If a row matching the user is found, the function returns a User object j, which is then stored in session h for the next time we pass through this filter. On subsequent passes through this filter, we won’t need to provide the username and password in the querystring, because the User object will already be in session. Licensed to jonathan zheng The Ajax login 433 Another nice feature of this approach is that it makes it easy to log the user out. All we need to do is remove the User object from session. The User object itself is a simple representation of the database structure, as shown in listing 11.3. Listing 11.3 User.java public class User { private int id=-1; private String userName=null; public User(int id, String userName) { super(); this.id = id; this.userName = userName; } public int getId() { return id;} public String getUserName() { return userName;} } We do not store the password field in this object. We won’t need to refer to it again during the lifecycle of our portal, and having it sitting in session would be something of a security risk, too! So, that’s our login framework from the server side. Nothing very unusual there. Let’s move on now to see how our client-side code interacts with it. 11.3.3 The client-side login framework The client-side login framework consists of two parts. The first is the visual part, which the user is able to view and interact with. We will dynamically create this with HTML; you’ll see how easy it is to create a layout with divs, spans, and CSS. The second part is our Ajax or our JavaScript code, which sends the request to the server and also processes the data. In this case, we are going to introduce JavaScript’s eval() method. The eval() method evaluates the string passed to it as JavaScript code. If the string contains a variable name, it creates the variable. If the eval input contains a function call, it will execute that function. The eval() method is powerful, but its performance can be slow depending on the complexity of the operation. The HTML layout As in previous chapters, we are not using a table to do our layout. Table layouts lengthen the page-rendering time, and since we are using Ajax, we would like everything to be faster and more responsive. We need to place a textbox, a passLicensed to jonathan zheng CHAPTER 11 The enhanced Ajax web portal word field, and a submit button on a form that we can submit to the server. We also need a span so that we can display the error message from the server if the username or password is invalid. By putting the entire form inside divs and spans, we format the HTML to produce the portal’s header. Listing 11.4 shows the basic HTML framework of our login header. Listing 11.4 HTML login layout