《HTML教程》-12.4.3-14.4.5教学材料

绝对不能对innerHTML显示的元素注册事件处理程序发送Ajax请求！否则，就起不到Ajax应有的作用！Ajax的作用是在不刷新当前网页的情况下请求服务器，并用服务器返回的数据，更新当前页面。如果对innerHTML显示的元素注册事件处理程序，发送Ajax请求，则相当于在另一个页面中发起请求，会刷新当前页面，起不到Ajax应有的作用！这个问题的现象就是，Ajax请求收不到服务器端的响应，不会触发readystatechange事件，同时刷新当前页面。如果遇到这种现象，你就有可能掉入innerHTML的怪圈。为了说明这个问题，让我们修改一下loginView（清单12-6）和login.html（清单12-7）的代码，修改方法如下：Login.html文件修改如下：将以下代码的注释标记去掉，也就是说使用login.html中的“登录”按钮，而不是通过创建DOM节点的方式创建“登录”按钮。<!--<tr><thcolspan="2"><buttonid="loginBtn">登录</button></th></tr>-->loginView修改如下：将以下代码varloginBtn=document.createElement("input"); loginBtn.setAttribute("type","button"); loginBtn.setAttribute("value","登录"); addEvent(loginBtn,'click',login); container.appendChild(loginBtn);修改为varloginBtn=document.getElementById("loginButton");addEvent(loginBtn,'click',login);也就是说，不再使用创建DOM节点的方式创建“登录”按钮，而是使用login.html中的登录按钮。从清单12-6可以看出，loginView中的数据处理是把login.html的内容，通过innerHTML属性显示在ID为container的div中，也就是说，现在我们给innerHTML中的元素——也就是“登录”按钮——注册了事件处理程序，让innerHTML中的按钮向服务器发送Ajax请求。现在运行一下程序——当然你必须在服务器端代码完成之后，才可以运行这个应用——看看你观察到了什么？12.4.4登录功能的控制层实现——login方法在JavaWeb应用中，以Servlet作为控制层。如果你没学习过JSP的内容，那就把Servlet作为能够在服务器端运行的Java代码就可以了。。在学习的过程中，没有接触过Java的同学，可以只编写客户端程序，也就是我们的Ajax程序，服务器端的程序只要复制随书源代码就可以了回想一下12.2.1节，我们已经在BaseServlet.java中实现了最基本的控制分发、客户端数据响应等功能，这里只需要继承这个BaseServlet，就可以重用这些基本的功能啦。在com.phoenix.servlet包中新建StudentServlet.java类（方法见附录A2.3），让它继承自BaseServlet。在StudentServlet.java类中，新建login()方法。因为，要使用BaseServlet中的控制分发功能，所以这个login()方法的签名要与BaseServlet中的doGet或doPost一致。由于doGet或doPost的签名比较长，不容易记住。可以采用复制BaseServlet中的doGet方法，然后改名为login，再把方法体中的内容删除的方法新建login()方法。完整的login方法代码如清单12-9所示。登录功能需要接收客户端传来的“学号”和“密码”，并与数据库中保存的学生信息进行比对。如果一致，则把学生的信息保存在Session对象（JSP中表示服务器与客户端的一次会话）中，并向客户端返回“登录成功！”的处理结果。如不一致，则直接返回“登录失败！”的处理结果。首先，要取得客户端传的学号和密码。在JSP（或Servlet）中可以使用request对象（HttpServletRequest类型的对象，也就是这里的req参数）接收客户端传来的请求参数，代码如下：StringstudentId=req.getParameter("studentId"); Stringpassword=req.getParameter("password");回想一下清单12-8中客户端login登录代码中，封装的请求字符串：vardata="studentId="+studentId+"&password="+password;“=”前面的studentId和password就是请求参数的名字，正与req.getParameter("studentId")方法中的参数studentId一致。这就是服务器端接收客户端请求参数的方法。第二，将客户输入的“学号”和“密码”与数据库中的学生信息进行比较。这是通过业务逻辑类StudentLogic（这里的studengLogic变量就是StudentLogic对象）来实现的，代码如下：booleanisLogin=studentLogic.isLogin(studentId,password);StudentLogic的实现见12.3.4节，到时再讨论isLogin()方法的详细实现。如果isLogin()方法返回true，说明输入的学号和密码与数据库中的一致，可以进行登录。若返回false，则表示登录失败。实现登录的代码如下：Stringtip="登录失败！"; if(isLogin){//登录成功 HttpSessionsession=req.getSession(); session.setAttribute(Constants.USER_NAME,studentId); tip="登录成功！"; } this.writeJSONString(resp,tip);如果登录成功，即isLogin()返回true，也就是if条件为真，则把学生的学号保存在session对象（HttpSession类型的对象）中。在Servlet中可以通过request对象（即这里的变量req）的getSession()方法获取session对象，而不能像JSP中直接使用session这个内置对象。获取session对象之后，可以通过它的setAttribute()方法将学号保存在session中，完成用户登录，并修改tip（提示信息）的值为“登录成功！”，返回到客户端。writeJSONString()函数（也可以使用showTip方法）即BaseServlet.java（见12.2.1节）中向客户端回送信息的方法。12.4.5登录功能的逻辑层实现——isLogin方法

在MVC模型中，用于业务逻辑处理部件，比如这里的登录逻辑处理，称为逻辑层。控制层根据用户的请求，调用相应的逻辑层方法完成用户的请求。逻辑层是由普通的Java类来实现的，它与普通的Java类没有任何不同，都包含自己的属性和方法。关于学生的选课功能都在StudentLogic类中完成。在项目的com.phoenix.logic包下新建StudentLogic.java类（新建类的方法见附录A2.2），并在类中添加以下代码：privateBaseDaobaseDao=newBaseDao();这是创建业务逻辑层操作数据库所需要的对象baseDao，供StudentLogic类中的所有方法使用。然后输入清单12-10所示的代码，也就是isLogin方法的实现代码。视野拓展

这种声明对象的方式是对于每一个StudentLogic对象都声明一个BaseDao对象，这种方式称为“多例模式”（相对于“单例模式”而言）。这种方式创建的对象比较多，对服务器硬件的要求较高。实际应用中，根据需要使用“单例模式”。“单例模式”中需要考虑“线程安全”的问题。为了简化项目案例，这里并不讨论设计模式的有关问题，请有兴趣的读者参阅相关书箱。虽然这里不要求大家掌握这些内容，但作为一名合格的程序员，应该具备这方面的知识，所以大家作为学习方向，自学一下这些方面的内容。在这个方法中，我们首先给定了要在数据库中执行的SQL语句：select*fromstuwherestuId=?andpassword=?它的意思是要从数据库表stu中，选取字段stuId和password分别等于形式参数studentId和password的学生记录。上述SQL语句在baseDao（基础框架BaseDao的实例）中执行，并返回一个List<Student>，它是一个泛型的List，说明这个List中存放的都是Student对象。如果这个List（即students变量）不为null，而且