學生登錄成功時的界面學生登錄不成功時的界面12.4.1顯示登錄界面的loginView函數(shù)在student.js文件中新建函數(shù)loginView，輸入以下代碼，如清單12-6所示。在這段代碼中：首先調用util.js中的createRequset()函數(shù)創(chuàng)建XMLHttpRequest異步請求對象：varreq=createRequest();第二，初始化異步請求對象req：以GET方式發(fā)送請求，請求地址為服務器根目錄中的login.html（源代碼見清單12-7所示），請求方式為異步。異步請求的好處是，在等待服務器響應的過程中，瀏覽器可以處理其他的任務，而沒有必要等待服務器返回后再進行其他任務的處理，增強用戶體驗。初始化異步對象的代碼如下：req.open("GET","login.html",true);請求的login.html內(nèi)容如清單12-7所示。第三，注冊readystatechange事件，以便根據(jù)異步請求對象req的readyState和status所處的狀態(tài)進行相應的處理。readyState代表異步請求對象所處理的狀態(tài)，其值為4時表示數(shù)據(jù)下載完成（見9.2.1節(jié)），可以進行服務器響應的處理；status代表服務器的響應狀態(tài)，其值為200（見9.2.1節(jié)）時，表示服務器響應成功，可以處理服務器發(fā)送的數(shù)據(jù)。注冊事件的代碼如下：req.onreadystatechange=function(){ if(req.readyState==4&&req.status==200){ //服務器端響應數(shù)據(jù)的處理代碼。 } }在這里，服務器響應的數(shù)據(jù)是登錄界面的HTML代碼。對它的處理是：①清空顯示數(shù)據(jù)的容器。varcontainer=document.getElementById("container"); empty(container); ②獲取服務器響應的文本數(shù)據(jù)，并顯示在容器中：container.innerHTML=req.responseText;③創(chuàng)建登錄按鈕，并注冊單擊事件處理程序，以響應用戶的登錄操作。創(chuàng)建HTML元素節(jié)點使用document的createElement()方法，這里要創(chuàng)建一個input元素，并設置其type屬性（決定它是一個按鈕）和value屬性（決定按鈕上呈現(xiàn)的文字），這可以通過setAttribute()方法實現(xiàn)。最后是給新創(chuàng)建的登錄按鈕注冊事件處理程序，這可通過調用utils.js工具中的addEvent()實現(xiàn)，具體代碼如下：varloginBtn=document.createElement("input"); loginBtn.setAttribute("type","button"); loginBtn.setAttribute("value","登錄"); addEvent(loginBtn,'click',login); container.appendChild(loginBtn);我們?yōu)槭裁床辉趌ogin.html中編寫登錄按鈕，給它注冊事件處理程序呢？這樣代碼就簡單很多，只需要用以下兩行代碼實現(xiàn)就可以了：varloginBtn=document.getElementById("loginButton");addEvent(loginBtn,'click',login);這樣即節(jié)省了代碼，還降低了代碼的復雜性，何樂而不為呢？這個問題一兩句說不清楚，我們在12.3.2innerHTML怪圈中加以討論。這里我們注冊了登錄按鈕的單擊事件處理程序login函數(shù)，這個函數(shù)將在第2步予以實現(xiàn)。第四，向服務器發(fā)送請求，請求服務器傳回登錄界面，也就是login.html。req.send(null);12.4.2發(fā)送登錄請求的login函數(shù)

在上一步中，我們把login函數(shù)注冊給了登錄按鈕的單擊事件，也就是說，用戶單擊登錄按鈕，就可以實現(xiàn)登錄功能。它的主要任務是收集用戶輸入的用戶名和密碼，并提交到服務器。服務器根據(jù)輸入的用戶名和密碼對用戶進行認證：如果認證成功，則允許用戶登錄，并返回“登錄成功”消息。若認證失敗，則禁止用戶登錄，返回“登錄失敗”。Login()函數(shù)的完全代碼如清單12-8所示。login()函數(shù)的實現(xiàn)步驟①取得用戶輸入的數(shù)據(jù)，并拼接成參數(shù)字符串。//取得登錄數(shù)據(jù) varstudentId=document.getElementsByName("studentId")[0].value; varpassword=document.getElementsByName("password")[0].value; //構造請求字符串 vardata="studentId="+studentId+"&password="+password;②創(chuàng)建異步請求對象reqvarreq=createRequest();調用utils.js文件中的createRequest()函數(shù)創(chuàng)建異步請求對象，這與第1步實現(xiàn)loginView的方法相同。③初始化請求對象以POST方式發(fā)送請求；請求的URL地址為studentServlet?method=login，其中method=login為請求參數(shù)；以異步方式發(fā)送請求，代碼如下：req.open("POST",'studentServlet?method=login',true);

對請求地址studentServlet?method=login的說明studentServlet為login方法請求的服務器URL地址；"?"為請求地址與請求參數(shù)字符串的分隔符；method為請求參數(shù)，決定此次請求要執(zhí)行的服務器端的方法（見清單12-1），method=login，說明此次請求要執(zhí)行StudentServlet（studentServletURL對應的Java處理代碼，換句話說，也就是客戶端請求studentServlet這個URL地址，就會執(zhí)行這個StudentServlet中的代碼，見12.3.3節(jié)）中的login()方法。④注冊事件處理函數(shù)與第1步中l(wèi)oginView的注冊事件相同，對異步請求對象req的onreadystatechange事件注冊匿名處理函數(shù)。實現(xiàn)的功能是接收服務器對登錄處理的響應，并顯示在頁面的消息提示框中。處理代碼如下：req.onreadystatechange=function(){ if(req.readyState==4&&req.status==200){ varloginTip=req.responseText; showTip(loginTip,tipCon); } };其中，showTip為項目框架中utils.js文件中定義的工具函數(shù)，見12.2.5節(jié)。③向服務器發(fā)送請求因為這里用POST方法發(fā)送服務器請求，為了能夠使用服務器解析客戶端發(fā)送的數(shù)據(jù)，在調用send()方法之前，必須通過setRequestHeader()設置“Content-Type”請求頭，其值為application/x-www-form-urlencoded，然