隐藏帧---javaScript+iframe模仿ajax的点上通讯

来源：互联网发布：c语言bool类型编辑：程序博客网时间：2024/06/09 21:59

当用户注册时：往往需要输入许多的数据（姓名，证件号，单位，手机号，学校等等）

然而当用户点击注册时，有时会提示用户已存在，注册失败，返回时用户输入的数据无效了，要重新输入，令用户无奈

然而Ajax的出现改变了这种情况，实现了点上通讯

当用户输入用户名，鼠标离开，点击其他信息输入框的那一刻，ajax采取点上通讯，只将用户名向后台数据库查询，返回相应信息，提示用户及时修改用户名，避免了用户再三的注册

在这，并非介绍ajax的技术，只是利用利用javaScript+iframe模仿Ajax的点上通讯实现的隐藏帧技术

界面jsp代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>      <style type="text/css">     iframe{/* 隐藏，无需给用户看*/        display: none;     }     #isExists{       color: red;     }   </style>   <script type="text/javascript">      function judge(flag) {//提供函数，以便iframe子框口调用          if(flag){             isExists.innerHTML="该用户已存在";            }  }  function validate(Node){     var value=Node.value;     if(!value||value=="")//防止用户输入为空         return;     userJudge.value=Node.value;     //document.forms[1].submit();     judgeForm.submit();//向后台查询  }        </script>  </head>    <body>    <form action="regServlet" method="post">                姓名:<input type="text" name="userName" onblur="validate(this)"/>          <label id="isExists"></label><br/>                密码:<input type="password" name="userPwd"/><br/>          <input type="submit" value="注册">            </form>    <!-- target="dataFrame" :将返回结果 输出在dataFrame的iframe窗口中-->    <form target="dataFrame" action="userJudgeServlet" method="post" id="judgeForm">         <!-- 使用隐藏的组件，记录用户输入的用户名，将此组件提交 -->        <input type="hidden" name="userJudge" id="userJudge"/>        </form>        <iframe name="dataFrame"></iframe>  </body></html>

验证用户是否存在的servlet代码：

package cn.hncu.jspStudy.servlets;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class UserJudgeServlet extends HttpServlet {public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();String userName=request.getParameter("userJudge");boolean flag=true;//封装数据（值对象），调用逻辑层/数据层查询//UserModel user=new UserModel();//user.setUserName(userName);//flag=UserDAOFactory.getInstance().queryUser(user);//支持用户名唯一性if(flag){out.print("<html><head>");out.print("<script type='text/javascript'>");out.print("parent.judge("+flag+");");//调用父窗口的函数out.print("</script></head><body>");out.print("</body></html>");}}}

注册的servlet代码：

package cn.hncu.jspStudy.servlets;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class RegServlet extends HttpServlet {public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {        String userName=request.getParameter("userName");        String userPwd=request.getParameter("userPwd");//封装数据（值对象），调用逻辑层/数据层查询//UserModel user=new UserModel();//user.setUserName(userName);        //user.setUserPwd(userPwd);//user=UserDAOFactory.getInstance().getSingerUser(user);//支持用户名唯一性//if(user!=null){        //request.getRequestDispatcher("path").forward(request, response);}}

0 0