Web---myAjax(自己写底层)-隐藏帧技术

讲解网站一般都有的一个功能,就是注册时候的,实现验证用户名是否存在的功能。

源代码演示:

reg.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>myAjax</title>

    <script type="text/javascript">
        function val(obj){
            var name = obj.value;//.value就是input中的name属性值
            if(name!=null&&name!=""){
                document.getElementById("regName").value=name;
                document.forms[1].submit();//让第二个表单提交
            }else{
                msg.innerHTML="请输入用户名!";
            }
        }

        function ajaxBack(res){
            if(res==1){
                parent.document.getElementById("msg").innerHTML="用户名已经存在,请更换用户名!";              
            }else{
                msg.innerHTML="恭喜,可以注册!";  
                //id也可以直接这样用            
            }
        }

    </script>

  </head>

  <body>
    <h2>演示myAjax---隐藏帧技术</h2>
    <br/>
    <h2>用户注册</h2>
    <form action="<%= request.getContextPath() %>/RegServlet" method="post">
        Name:<input type="text" name="name" onblur="val(this)"/>
        <label id="msg" style="color:red;"></label><br/>
        Password:<input type="password" name="pwd"/><br/>
        Tel:<input type="text" name="tel"/><br/>
        <input type="submit" value="注册">        
    </form>

    <form target="dataFrame" action="<%= request.getContextPath() %>/ValServlet" method="post">
        <input type="hidden" id="regName" name="name"/>
        <!--  type="hidden" 表示这个input是隐藏的,网页不可见. target 属性规定在何处打开 action URL。  -->
    </form> 

    <!-- iframe创建包含另外一个文档的内联框架(即行内框架)。 -->
    <iframe style="display:none" name="dataFrame" ></iframe>
  </body>
</html>

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
  <display-name></display-name>
  <servlet>
    <servlet-name>RegServlet</servlet-name>
    <servlet-class>cn.hncu.reg.servlet.RegServlet</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>ValServlet</servlet-name>
    <servlet-class>cn.hncu.reg.servlet.ValServlet</servlet-class>
  </servlet>


  <servlet-mapping>
    <servlet-name>RegServlet</servlet-name>
    <url-pattern>/RegServlet</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>ValServlet</servlet-name>
    <url-pattern>/ValServlet</url-pattern>
  </servlet-mapping>    
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

RegServlet.java:

package cn.hncu.reg.servlet;

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 {

        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        request.setCharacterEncoding("utf-8");
        String name = request.getParameter("name");
        String ped = request.getParameter("pwd");
        String tel = request.getParameter("tel");

        if(name.startsWith("hncu")){//如果是正式做,这里要去后台进行注册,这里简化了。
            out.print("注册成功!"+name);
        }else{
            out.print("注册失败:用户名必须以hncu开头");
        }


    }

}

ValServlet.java:

package cn.hncu.reg.servlet;

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 ValServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        request.setCharacterEncoding("utf-8");

        String name = request.getParameter("name");
        String pwd = request.getParameter("pwd");
        String tel = request.getParameter("tel");

        if(name!=null && name.trim().length()>0 && name.startsWith("hncu") ){//正式项目,需要去后台校验数据的
            request.setAttribute("error", 0);//这是可以注册的
        }else{
            request.setAttribute("error", 1);//不能注册,该用户名已经存在!
        }
        //转发
        request.getRequestDispatcher("/jsps/regResult.jsp").forward(request, response);
    }
}

regResult.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  </head>

  <body>
  <h2>这是结果页面</h2>
    错误代码:${error }
   <script type="text/javascript">
        var res ="<%=request.getAttribute("error")%>";

        /*
        if(res==1){
            parent.document.getElementById("msg").innerHTML="用户名已经存在,请更换用户名!";              
        }else{
            parent.document.getElementById("msg").innerHTML="恭喜,可以注册!";             
        }
        //parent.document--表示父页面的document对象
        //这种方式可以用,但不是很好。我们最好用下面那一句调用父页面的方法解决
        */
        parent.ajaxBack(res);
   </script>

  </body>
</html>

演示结果:

真正的实现之后,是这样的:

原文地址:https://www.cnblogs.com/webmen/p/5739084.html