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>
演示结果：
真正的实现之后，是这样的：
Web---myAjax(自己写底层)-隐藏帧技术的更多相关文章
- [Java Web] 1、Web开发初识——一大堆历史和技术名词
LZ前言 LZ最近发现网络真是个神奇的东西,以前做的好玩的只能自娱自乐(或者说顾影自怜),现在只要发一个帖子,写一个博客,很快能引来一大群小伙伴的围观(有时候还能遇见几个大牛给个战略性的指导)...L ...
- 关于基于.net的WEB程序开发所需要的一些技术归纳
前提: 最近公司里有一个同事,年龄比我大几岁,但是由于是转行来做开发的,许多的关于.net开发技术不是很入行,所以总是会问我一些东西,基于自己以前的一些 经验,总是会愿意给他讲一些总结性的东西,希望他 ...
- Web高级征程：《大型网站技术架构》读书笔记系列
一.此书到底何方神圣? <大型网站技术架构:核心原理与案例分析>通过梳理大型网站技术发展历程,剖析大型网站技术架构模式,深入讲述大型互联网架构设计的核心原理,并通过一组典型网站技术架构设计 ...
- PHP Web实时消息后台服务器推送技术---GoEasy
越来越多的项目需要用到实时消息的推送与接收,怎样用php实现最方便呢?我这里推荐大家使用GoEasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送! 浏览器兼容性:GoEasy推送 ...
- Ruby Web实时消息后台服务器推送技术---GoEasy
越来越多的项目需要用到实时消息的推送与接收,怎样用Ruby实现最方便呢?我这里推荐大家使用GoEasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送! 浏览器兼容性:GoEasy推 ...
- Win32之隐藏DLL隐藏模块技术
Win32之隐藏DLL隐藏模块技术 这一讲涉及到windows底层技术.跟汇编内容. 我们才可以实现模块隐藏(也称为DLL隐藏) 一丶API反汇编勾引兴趣 我们都用过Windows的进程跟线程API ...
- Web项目开发中用到的缓存技术
在WEB开发中用来应付高流量最有效的办法就是用缓存技术,能有效的提高服务器负载性能,用空间换取时间.缓存一般用来 存储频繁访问的数据 临时存储耗时的计算结果 内存缓存减少磁盘IO 使用缓存的2个主要原 ...
- 现代web开发需要学习的15大技术
现代Web开发需要学习的15大技术 2016-06-08 13:08 快进到现在,我发现现代web开发再一次将发生压倒性的改变.信息资讯的铺天盖地令人迷惑,尤其对于初学者而言.首要原因是新的框架,例如 ...
- 2018年一名合格的web前端程序员应该会哪些技术
有朋友让小编说一说web前端在未来几年的发展趋向,对于这个问题,恕小编无能为力,web前端技术日新月异,更新非常快,谁也不能预料未来会发生些什么 小编也只能说在2018年,react native和j ...
随机推荐
- C#简单的tcpserver
实现一个简单的TCPserver,用tcplistener实现. 当收到客户端特定信息"101"时,发送给客户端"202“指令. using System; using ...
- django引用static目录下的css，js文件304问题
前提:django1.8 在html页面可以请求道css,js文件并在chrome的开发者工具中查看css,js文件返回状态为200 原因: html页面在头部添加了<!DOCTYPE html ...
- web页面显示折叠树菜单笔记
zTree -- jQuery 树插件 http://pan.baidu.com/s/1skwh94h
- 拓展：switch实现
拓展:switch实现 参考中谷教育 python视频:switch switch语句用于编写多分支结构的程序,类似于if ... elif ...else语句.switch语句表达的分支结构比if ...
- Maya QT interfaces in a class
Most tutorials online have suggested the way to fire commands inside QT interfaces launched n Maya ( ...
- 【BZOJ】1046 : [HAOI2007]上升序列
1046: [HAOI2007]上升序列 题意:给定S={a1,a2,a3,…,an}问是否存在P={ax1,ax2,ax3,…,axm},满足(x1 < x2 < … < xm)且 ...
- unity的旋转
绕着一个点旋转 : transform.RotateAround(Vector3.zero, Vector3.up, speed* Time.deltaTime ); 第一个参数,点的位置.第二个参数 ...
- Oracle登陆及修改用户密码
16:20 2013/7/7 Oracle 登陆 管理员登陆 sqlplus sys/root as sysdba (密码认证)这个root是安装数据库最初你输入的口令 sqlplus /as ...
- final, finally 和finalize的区别
final 修饰符(关键字) 如果一个类被声明为final,意味着它不能再派生新的子类,不能作为父类被继承.因此一个类不能及被声明为abstract,又被声明为final的.将变量或方法声明为fina ...
- java.util.ArrayList
/* * Copyright (c) 1997, 2013, Oracle and/or its affiliates. All rights reserved. * ORACLE PROPRIETA ...