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

最新推荐文章于 2021-08-15 10:03:43 发布

听听丶

最新推荐文章于 2021-08-15 10:03:43 发布

阅读量985

点赞数

分类专栏： web小练习文章标签： Tag 隐藏帧

本文链接：https://blog.csdn.net/jrdgogo/article/details/52064998

版权

web小练习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍如何使用JavaScript结合iframe实现与服务器的异步通信，类似AJAX的效果。通过隐藏帧实现页面无刷新的数据交互。

摘要由CSDN通过智能技术生成

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

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

然而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" οnblur="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);
	}

}