0
点赞
收藏
分享

微信扫一扫

Web---监听用户名注册技术-myAJax-隐藏帧


本来本篇博客在上个月就已经发表的,但由于我的疏忽,导致文章被彻底编辑不见,特来补上。

先用官方的语言解释一下AJAX:

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

现在自己写一个仿AJAX的功能注册,实现注册时(网页不刷新与提交),提示用户名错误。

应用隐藏帧,监听事件,提交表单显示到iframe内联框架,调用父页面函数…。

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>

ValServlet

后台验证:

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")%>";
/*
在iframe框架中显示
*/

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

parent.ajaxBack(res);
</script>

</body>
</html>

RegServlet

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开头");
}


}

}





举报
0 条评论