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 ...
随机推荐
- Aspose.Words 总结
生成答题卡 try { string tempPath = @"D:\moban\ttt.doc"; //Open document and create Documentbuil ...
- supervisor---------------------------------常用
第一个 supervisor 的启动 supervisord -c ~/supervisord.conf 这个是如果没有服务没有启动,则使用本脚本启动 进程的设置 [program:blog] ...
- Python之路----文件操作
文件操作 1.能调用方法的一定是对象,比如数值.字符串.列表.元组.字典,甚至文件也是对象,Python中一切皆为对象. str1 = 'hello' str2 = 'world' str3 = ' ...
- about家庭智能设备部分硬件模块功能共享【协同工作】solution
本人设备列表: Onda tablet {Android} wifi Desktop computer {win7.centos7} 外接蓝牙adapter PS interface 键盘.鼠标{与同 ...
- hdu 5172 GTY's gay friends
GTY's gay friends 题意:给n个数和m次查询:(1<n,m<1000,000);之后输入n个数值(1 <= ai <= n):问下面m次查询[L,R]中是否存在 ...
- 【BZOJ】1013: [JSOI2008]球形空间产生器sphere
[BZOJ]1013: [JSOI2008]球形空间产生器sphere 题意:给n+1个n维的点的坐标,要你求出一个到这n+1个点距离相等的点的坐标: 思路:高斯消元即第i个点和第i+1个点处理出一个 ...
- Java集合Map接口与Map.Entry学习
Java集合Map接口与Map.Entry学习 Map接口不是Collection接口的继承.Map接口用于维护键/值对(key/value pairs).该接口描述了从不重复的键到值的映射. (1) ...
- C#委托的语法
using System;using System.Collections.Generic;using System.Linq;using System.Text;using Delegate; na ...
- maven编译的时候排除junit测试类
maven项目中使用junit进行单元测试,在进行编译的时候,可以通过2种方式排除test测试类的编译. 有2种方式 : 使用命令的时候带上参数 mvn install -Dmaven.test.sk ...
- 按行N等分某个文件
# --*-- coding:utf-8 --*--import randomimport math def fanhui(): into = random.randint(1, 10) ...