zoukankan      html  css  js  c++  java
  • javaweb注册页面学习之路(三)

    本次重构优化内容

      1 使用AJAX技术

           2 后台输出JSON格式数据到前台

    •   通用ajax.js文件
     1 var xmlHttp = null;
     2 var succCallbackEvent = null;
     3 var failCallbackEvent = null;
     4 
     5 function createXMLHttp() {
     6 
     7     //判断浏览器是否支持ActiveX控件,针对IE6及之前版本
     8     if (window.ActiveXObject) {
     9         //将所有可能出现的ActiveXObject版本都放在一个数组中
    10         var arrXmlHttpTypes = [ 'Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0',
    11                 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0',
    12                 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP' ];
    13         //通过循环创建XMLHttpRequest对象
    14         for (var i = 0; i < arrXmlHttpTypes.length; i++) {
    15             try {
    16                 //创建XMLHttpRequest对象
    17                 xmlHttp = new ActiveXObject(arrXmlHttpTypes[i]);
    18                 //如果创建XMLHttpRequest对象成功,则跳出循环
    19                 break;
    20             } catch (ex) {
    21             }
    22         }
    23          
    24     }
    25     //判断浏览器是否将XMLHttpRequest作为本地对象实现,针对IE7,Firefox,Opera等浏览器
    26     else if (window.XMLHttpRequest) {
    27         xmlHttp = new XMLHttpRequest();
    28      
    29     }
    30 }
    31 
    32 function callback() {         
    33     if (xmlHttp.readyState == 4) {
    34         if (xmlHttp.status == 200) {
    35             succCallbackEvent(xmlHttp.responseText);
    36         } else {
    37             failCallbackEvent("AJAX服务器返回错误!");
    38         }
    39     }
    40 }
    41 
    42 function ajaxSubmit(method, url, sendvalue, succCallback, failCallback) {
    43     createXMLHttp();
    44     succCallbackEvent = succCallback;
    45     failCallbackEvent = failCallback;
    46     if (xmlHttp != null) {
    47         xmlHttp.onreadystatechange = callback;             
    48         xmlHttp.open(method, encodeURI(url), true);
    49         if (method == 'post')
    50         {         
    51             xmlHttp.setRequestHeader('Content-type',
    52                 'application/x-www-form-urlencoded');
    53         }
    54         xmlHttp.send(sendvalue);
    55     } else {
    56         //alert("您的浏览器不支持XMLHTTP");
    57         return false;
    58     }
    59     return true;
    60 }
    View Code
    •     userReg.jsp 用户注册页面
     1 <script type="text/javascript">
     2     function addsuccfun(result){     
     3         var strJson = eval('(' + result + ')');    
     4         if(strJson.RegResult == -1){
     5             alert(strJson.RegResultInfo);
     6         }else{
     7             //显示注册成功  跳转到登录窗口
     8             alert("注册成功 !");
     9             window.location.href='login.jsp';
    10         }    
    11     }
    12     
    13     function failfun(result){
    14         alert(result);    
    15     }
    16     
    17     function surePost() {
    18         var strValues;
    19         if (document.RegForm.userNum.value == "") {
    20             alert("用户名不能为空!");
    21             return false;
    22         }
    23         strValues = '&userNum=' + document.RegForm.userNum.value;
    24         if (document.RegForm.userPwd.value == "") {
    25             alert("密码不能为空!");
    26             return false;
    27         }
    28         strValues = strValues + '&userPwd=' + document.RegForm.userPwd.value;
    29         if (document.RegForm.userPwd.value != document.RegForm.userConfirmPwd.value) {
    30             alert("密码和确认密码输入不一致!");
    31             return false;
    32         }
    33         strValues = strValues + '&userConfirmPwd=' + document.RegForm.userConfirmPwd.value;
    34         strValues = strValues + '&userName=' + document.RegForm.userName.value;
    35         strValues = strValues + '&userEmail=' + document.RegForm.userEmail.value;
    36         ajaxSubmit('get', 'UserSvt2?xtype=0' + strValues, null, addsuccfun, failfun);
    37     }
    38 </script>
    JS部分
     1 <body>
     2      
     3             <form name="RegForm">
     4                 <table>
     5                     <tr>
     6                         <td align="right">用户名:</td>
     7                         <td width="150px"><input type="text" name="userNum"
     8                             style=" 150px" /></td>
     9                     </tr>
    10                     <tr>
    11                         <td align="right">姓名:</td>
    12                         <td><input type="text" name="userName" style=" 150px" /></td>
    13                     </tr>
    14                     <tr>
    15                         <td align="right">电子邮箱:</td>
    16                         <td><input type="text" name="userEmail" style=" 150px" /></td>
    17                     </tr>
    18                     <tr>
    19                         <td align="right">密码:</td>
    20                         <td><input type="password" name="userPwd"
    21                             style=" 150px" /></td>
    22                     </tr>
    23                     <tr>
    24                         <td align="right">确认密码:</td>
    25                         <td><input type="password" name="userConfirmPwd"
    26                             style=" 150px" /></td>
    27                     </tr>
    28                     <tr>
    29                         <td><input type="button" value="注册" onclick = "surePost()"></td>
    30                     </tr>
    31                 </table>
    32             </form>     
    33      
    34 </body>
    HTML部分
    •     后台Servlet 
     1 protected void doGet(HttpServletRequest request, HttpServletResponse response)
     2             throws ServletException, IOException {
     3         int nXType = Integer.parseInt(request.getParameter("xtype"));
     4         if (nXType == 0) {
     5             response.setCharacterEncoding("utf-8");        
     6             UserItem userItem = new UserItem();
     7             userItem.setStrUserNum(request.getParameter("userNum"));
     8             userItem.setStrUserName(TCommonTool.GetUTF8(request.getParameter("userName")));
     9             userItem.setStrPwd(request.getParameter("userPwd"));
    10             userItem.setStrEmail(request.getParameter("userEmail"));
    11          
    12             if (!userItem.getStrPwd().equals(request.getParameter("userConfirmPwd"))) { 
    13                   
    14                 PrintWriter out = response.getWriter();
    15                 out.write("{");
    16                 out.write(""RegResult":-1,");
    17                 out.write(""RegResultInfo":"密码和确认密码输入不一致."");
    18                 out.write("}");
    19                 out.flush();
    20                 out.close();
    21                 return;
    22             }
    23          
    24             DBUser dbUser = new DBUser();
    25             dbUser.GetUser(userItem);
    26 
    27             if (userItem.getStrGUID().equals("")) {
    28 
    29                 userItem.setStrGUID(java.util.UUID.randomUUID().toString());
    30                 dbUser.AddUser(userItem);
    31                 PrintWriter out = response.getWriter();
    32                 out.write("{"RegResult":1}");
    33                 out.flush();
    34                 out.close();
    35              
    36             } else {
    37                 
    38                 PrintWriter out = response.getWriter();
    39                 out.write("{");
    40                 out.write(""RegResult":-1,");
    41                 out.write(""RegResultInfo":"用户名" + userItem.getStrUserNum()  + "已经存在."");
    42                 out.write("}");
    43                 out.flush();
    44                 out.close();     
    45              
    46             }         
    47         }
    48 
    49     }
    后台Servlet代码
  • 相关阅读:
    JS面向对象编程的实现
    初见Javascript
    详解promise
    radio单选按钮组操作
    cookie欺骗实战案例
    XSS攻击
    前端如何实现异步加载
    日常问题
    求1+2+...+n
    二叉搜索树的后序遍历序列
  • 原文地址:https://www.cnblogs.com/tsolarboy/p/7423877.html
Copyright © 2011-2022 走看看