e拍拍賣系統(tǒng)項(xiàng)目案例6教學(xué)lg6v1

1、項(xiàng)目案例6“e拍”在線拍賣系統(tǒng)（四） 問題描述使用AJAX技術(shù)升級用戶登錄功能在不刷新頁面的情況下登錄功能不變：用戶名、密碼正確，提示“登錄成功”，刷新登錄區(qū)域，顯示登錄后的內(nèi)容用戶名、密碼不正確，提示錯誤，重新登錄問題分析-1Ajax代碼框架var xmlHttpRequest;function createXmlHttpRequest() . function doLogin() var usr = document.getElementById(usr); var pwd = document.getElementById(pwd); var url = user.do?operate=

2、doLogin&username= + usr.value + &password= + pwd.value; xmlHttpRequest = createXmlHttpRequest(); xmlHttpRequest.onreadystatechange = haoLeJiaoWo; xmlHttpRequest.open(GET,url,true); xmlHttpRequest.send(null);function haoLeJiaoWo() if(xmlHttpRequest.readyState = 4) if(xmlHttpRequest.status = 200) var

3、str = xmlHttpRequest.responseText; /在這兒處理返回結(jié)果 從輸入框中取值請求URL得到返回字符串并處理問題分析-2服務(wù)器端代碼/ UserAction 中 doLogin 方法public ActionForward doLogin( . ) request.getSession().removeAttribute(user); String username = request.getParameter(username); String password = request.getParameter(password); User item = this.

4、userBiz.login(username, password); if (null!=item & item.getUserStatus()!=UserBiz.USER_STATUS_FORBID) /登錄成功 request.getSession().setAttribute(user, item); response.setCharacterEncoding(GBK); response.getWriter().printf(登錄成功); else response.setCharacterEncoding(GBK); response.getWriter().printf(用戶名或密

5、碼錯誤，登陸失敗！); return null;直接返回字符串難點(diǎn)分析-1處理返回結(jié)果var str = xmlHttpRequest.responseText;alert(str);if (登錄成功=str) document.getElementById(spUsername).innerText = curUserName; document.getElementById(dvLogin).style.display = none; document.getElementById(dvOnline).style.display = block; 登錄框和登錄后顯示內(nèi)容放在兩個中，一個隱藏

6、，一個顯示階段劃分第一階段（20分鐘）修改UserAction的doLogin方法第二階段（25分鐘）編寫頁面Ajax代碼第三階段（25分鐘）處理返回結(jié)果第一階段第一階段（20分鐘）修改UserAction的doLogin方法要求學(xué)員自己動手操作，教員巡視，解答學(xué)員提出的問題階段檢查針對第一階段抽查學(xué)員的操作結(jié)果教員給出點(diǎn)評或集中演示難點(diǎn)部分第一階段結(jié)果演示第一階段操作的結(jié)果：通過瀏覽器訪問，在URL中傳入username和password參數(shù)，正確則提示：“登錄成功”，否則提示錯誤第二階段第二階段（25分鐘）編寫頁面Ajax代碼要求學(xué)員自己動手編寫代碼，教員巡視，解答學(xué)員提出的問題階段檢查針

7、對第二階段抽查學(xué)員的編碼結(jié)果教員給出點(diǎn)評或集中演示難點(diǎn)部分第二階段結(jié)果演示最終效果點(diǎn)輸入用戶名、密碼，點(diǎn)登錄，彈出提示信息登錄第三階段第三階段（25分鐘）：處理返回結(jié)果要求學(xué)員自己動手編寫代碼，教員巡視，解答學(xué)員提出的問題階段檢查針對第三階段抽查學(xué)員的編碼結(jié)果抽查學(xué)員編寫的完整代碼，要求學(xué)員上臺講解，并演示運(yùn)行結(jié)果教員給出點(diǎn)評第三階段標(biāo)準(zhǔn)代碼演示處理返回結(jié)果 大駕光臨 . 用戶名： .var str = xmlHttpRequest.responseText;alert(str);if (登錄成功=str) document.getElementById(spUsername).innerText = curUserName; document.getElementById(dvLogin)