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

转载请注明出处： http://blog.csdn.net/qq_26525215

本文源自【大学之旅_谙忆的博客】

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

先用官方的语言解释一下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开头");}}}