ajax实用技术教学课件作者程继洪肖川李海斌编著第12章学生选课（系统）的设计与实现12.4.1-14.4.2.pptxVIP

12.4 登录功能的实现登录实现的功能是： ◆ 学生单击“登录”导航链接，显示登录界面； ◆ 学生在登录界面中输入学号和密码，点“登录”按钮，完成登录请求。 ◆ 服务器处理登录请求并予以回应，在交互提示的div（即div id=tip这是显示操作提示/div）中显示登录结果。效果如图12-6所示。学生登录成功时的界面学生登录不成功时的界面12.4.1 显示登录界面的loginView函数在student.js文件中新建函数loginView，输入以下代码，如清单12-6所示。在这段代码中：首先调用util.js中的createRequset()函数创建XMLHttpRequest异步请求对象：var req = 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代码。对它的处理是： ①清空显示数据的容器。var container = document.getElementById(container); empty(container); ②获取服务器响应的文本数据，并显示在容器中：container.innerHTML = req.responseText; ③创建登录按钮，并注册单击事件处理程序，以响应用户的登录操作。创建HTML元素节点使用document的createElement()方法，这里要创建一个input元素，并设置其type属性（决定它是一个按钮）和value属性（决定按钮上呈现的文字），这可以通过setAttribute()方法实现。最后是给新创建的登录按钮注册事件处理程序，这可通过调用utils.js工具中的addEvent()实现，具体代码如下：var loginBtn = document.createElement(input); loginBtn.setAttribute(type, button); loginBtn.setAttribute(value, 登录); addEvent(loginBtn, click, login); container.appendChild(loginBtn);我们为什么不在login.html中编写登录按钮，给它注册事件处理程序呢？这样代码就简单很多，只需要用以下两行代码实现就可以了：var loginBtn = document.getElementById(loginButton);addEvent(loginBtn, click, login);这样即节省了代码，还降低了代码的复杂性，何乐而不为呢？这个问题一两句说不清楚，我们在12.3.2 innerHTML怪圈中加以讨论。这里我们注册了登录按钮的单击事件处理程序login函数，这个函数将在第2步予以实现。第四，向服务器发送请求，请求服务器传回登录界面，也就是login.html。req.send(null);12.4.2 发送登录请求的login函数在上一步中，我们把login函数注册给了登录按钮的单击事件，也就是说，用户单击登录按钮，就可以实现登录功能。它的主要任务是收集用户输入的用户名和密码，并提交到服务器。服务器根据输入的用户名和密码对用户进行认证：如果认证成功，则允许用户登录，并返回“登录成功”消息。若认证失败，则禁止用户登录，返回“登录失败”。Login()函数的完全代码如清单12-8所示。login()函数的实现步骤 ①取得用户输入的数据，并拼接成参数字符串。// 取得登录数据 var studentId = document.getElementsByN