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 ...
随机推荐
- python学习笔记——列表生成式与生成器
1.列表生成式(List Comprehensions) python中,列表生成式是用来创建列表的,相较于用循环实现更为简洁.举个例子,生成[1*1, 2*2, ... , 10*10],循环用三行 ...
- 解决Genemotion 安装出现“Unable to start......”的问题
最近在用uiautomator做安卓自动化测试,由于没有测试设备,所以只好自己在电脑里面安装了一个GenyMotion模拟器,虽然速度不及真机,但是也算能解决大部分的需求. 安装完之后启动出现了以下错 ...
- 一步步学习ASP.NET MVC3 (7)——Controller,Action,ActionResult
请注明转载地址:http://www.cnblogs.com/arhat 前面几章我们讲解的都是关于View方面的知识,虽然还有很多关于View的知识没有讲,但是没关系,我们在后面使用到的时候在讲解, ...
- wordpress mobile templates
http://themeforest.net/category/wordpress/mobile http://themeforest.net/item/monolith-wp-theme-for-b ...
- spring framework 各版本源码下载地址
现在spring的源码下载地址真是不好找,这次终于找到了.记录一下,以帮助需要的朋友. https://github.com/spring-projects/spring-framework/tags ...
- CSS 负边距自适应布局
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"& ...
- Matlab 文件命名规则
Matlab 文件命名规则 1.文件名命名要用英文字符,第一个字符不能是数字和下划线. 2.文件名不要取为matlab的一个固有函数,m文件名的命名尽量不要是简单的英文单词,最好是由大小写英文.数字. ...
- Codeforces Round #237 (Div. 2)
链接 A. Valera and X time limit per test:1 secondmemory limit per test:256 megabytesinput:standard inp ...
- 再撸一次简单的NODE.JS
这毕竟大势所趋,了解一下无防的. 最终,对JS的要求还是有点高... 以后弄过一次,很快就忘了. 再来再拾起来一下. server.js var http = require("http&q ...
- Java中对List集合排序的两种方法
第一种方法,就是list中对象实现Comparable接口,代码如下: public class Person implements Comparable<Person> { privat ...