《HTML教程》-12.4.1-14.4.2教学材料

学生登录成功时的界面学生登录不成功时的界面12.4.1显示登录界面的loginView函数在student.js文件中新建函数loginView，输入以下代码，如清单12-6所示。在这段代码中：首先调用util.js中的createRequset()函数创建XMLHttpRequest异步请求对象：varreq=createRequest();第二，初始化异步请求对象req：以GET方式发送请求，请求地址为服务器根目录中的login.html（源代码见清单12-7所示），请求方式为异步。异步请求的好处是，在等待服务器响应的过程中，浏览器可以处理其他的任务，而没有必要等待服务器返回后再进行其他任务的处理，增强用户体验。初始化异步对象的代码如下：req.open("GET","login.html",true);请求的login.html内容如清单12-7所示。第三，注册readystatechange事件，以便根据异步请求对象req的readyState和status所处的状态进行相应的处理。readyState代表异步请求对象所处理的状态，其值为4时表示数据下载完成（见9.2.1节），可以进行服务器响应的处理；status代表服务器的响应状态，其值为200（见9.2.1节）时，表示服务器响应成功，可以处理服务器发送的数据。注册事件的代码如下：req.onreadystatechange=function(){ if(req.readyState==4&&req.status==200){ //服务器端响应数据的处理代码。 } }在这里，服务器响应的数据是登录界面的HTML代码。对它的处理是：①清空显示数据的容器。varcontainer=document.getElementById("container"); empty(container); ②获取服务器响应的文本数据，并显示在容器中：container.innerHTML=req.responseText;③创建登录按钮，并注册单击事件处理程序，以响应用户的登录操作。创建HTML元素节点使用document的createElement()方法，这里要创建一个input元素，并设置其type属性（决定它是一个按钮）和value属性（决定按钮上呈现的文字），这可以通过setAttribute()方法实现。最后是给新创建的登录按钮注册事件处理程序，这可通过调用utils.js工具中的addEvent()实现，具体代码如下：varloginBtn=document.createElement("input"); loginBtn.setAttribute("type","button"); loginBtn.setAttribute("value","登录"); addEvent(loginBtn,'click',login); container.appendChild(loginBtn);我们为什么不在login.html中编写登录按钮，给它注册事件处理程序呢？这样代码就简单很多，只需要用以下两行代码实现就可以了：varloginBtn=document.getElementById("loginButton");addEvent(loginBtn,'click',login);这样即节省了代码，还降低了代码的复杂性，何乐而不为呢？这个问题一两句说不清楚，我们在12.3.2innerHTML怪圈中加以讨论。这里我们注册了登录按钮的单击事件处理程序login函数，这个函数将在第2步予以实现。第四，向服务器发送请求，请求服务器传回登录界面，也就是login.html。req.send(null);12.4.2发送登录请求的login函数

在上一步中，我们把login函数注册给了登录按钮的单击事件，也就是说，用户单击登录按钮，就可以实现登录功能。它的主要任务是收集用户输入的用户名和密码，并提交到服务器。服务器根据输入的用户名和密码对用户进行认证：如果认证成功，则允许用户登录，并返回“登录成功”消息。若认证失败，则禁止用户登录，返回“登录失败”。Login()函数的完全代码如清单12-8所示。login()函数的实现步骤①取得用户输入的数据，并拼接成参数字符串。//取得登录数据 varstudentId=document.getElementsByName("studentId")[0].value; varpassword=document.getElementsByName("password")[0].value; //构造请求字符串 vardata="studentId="+studentId+"&password="+password;②创建异步请求对象reqvarreq=createRequest();调用utils.js文件中的createRequest()函数创建异步请求对象，这与第1步实现loginView的方法相同。③初始化请求对象以POST方式发送请求；请求的URL地址为studentServlet?method=login，其中method=login为请求参数；以异步方式发送请求，代码如下：req.open("POST",'studentServlet?method=login',true);

对请求地址studentServlet?method=login的说明studentServlet为login方法请求的服务器URL地址；"?"为请求地址与请求参数字符串的分隔符；method为请求参数，决定此次请求要执行的服务器端的方法（见清单12-1），method=login，说明此次请求要执行StudentServlet（studentServletURL对应的Java处理代码，换句话说，也就是客户端请求studentServlet这个URL地址，就会执行这个StudentServlet中的代码，见12.3.3节）中的login()方法。④注册事件处理函数与第1步中loginView的注册事件相同，对异步请求对象req的onreadystatechange事件注册匿名处理函数。实现的功能是接收服务器对登录处理的响应，并显示在页面的消息提示框中。处理代码如下：req.onreadystatechange=function(){ if(req.readyState==4&&req.status==200){ varloginTip=req.responseText; showTip(loginTip,tipCon); } };其中，showTip为项目框架中utils.js文件中定义的工具函数，见12.2.5节。③向服务器发送请求因为这里用POST方法发送服务器请求，为了能够使用服务器解析客户端发送的数据，在调用send()方法之前，必须通过setRequestHeader()设置“Content-Type”请求头，其值为application/x-www-form-urlencoded，然