Ajax技术原理，自己写一个Ajax_H5之家 - 中国HTML5教程资源分享第一站

本篇博客知识点—演示写一个类似Ajax技术功能的模块。

通过自己写一个简单的类似Ajax技术功能模块，来帮忙理解Ajax底层思想，以便后面更好的学习Ajax

需求：在填写表单的时候，填完失去焦点时，提示用户刚刚输入的姓名是否合法。如图~（图片显示不了是什么鬼？？？）

这里写图片描述

思路：姓名标签内有个函数—当失去焦点时候触发，作用就是想办法把刚刚填了的姓名提交给后台判断是否非法。同时反馈结果。

Name:<input type="text" name="name" onblur="val(this)">

函数代码：利用一个隐藏的表单提交

{ var nm = obj.value; if(nm!=null){ document.getElementById("forname").value = nm; document.forms[1].submit(); } }

后台处理完成后直接转发到一个JSP页面

String name = request.getParameter("ForName"); if(name!=null&&!name.trim().equals("")&&name.startsWith("hncu")){ request.setAttribute("error", 1); }else{ request.setAttribute("error", 0); } request.getRequestDispatcher("/reg/reg.jsp").forward(request, response);

这个页面不是普通的页面，而是刚刚那个页面的画中画

==> =>

这个JSP页面有两种技术来完成信息提示用户

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  <script type="text/javascript"> res ='<%=request.getAttribute("error")%>'; //另一个技术: 在子页(显示在iframe中的页面)中访问父页(外面大窗口中的页面) ,通过在原来访问页面元素的方式前面加"parent." /*访问父页，法1: 直接在子页中操纵父页中的元素 if(res==1){ parent.document.getElementById("msg").innerHTML="用户名已存在,请换一个!"; }else{ parent.document.getElementById("msg").innerHTML="用户名可用,可以注册!"; } */ //访问父页，法2: 在子页中调用父页中的一个函数，然后在该函数中操纵父页中的元素 parent.back(res); </script>

这样就完成啦。由于贴不了图我把所有代码贴上去把

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"http://www.echojb.com/"; %> > >Ajax底层技术学习> <script type="text/javascript"> { var nm = obj.value; if(nm!=null){ document.getElementById("forname").value = nm; document.forms[1].submit(); } } { if(res!=null){ if(res==0){ label.style.color = "red"; label.innerHTML="用户名字存在，请换一个"; }else{ label.style.color = "green"; label.innerHTML="恭喜你！该用户名可以使用！"; } } } ="RegServlet"method="post"> Name:==/> pwd:==> ==> => </body> </html>

web.xml

=="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee "> > >RegServlet> >This is the display name of my J2EE component>cn.hncu.servlets.FornameServlet> > >/FornameServlet> >

RegServlet

package cnimport javaimport javaimport javaximport javaximport javaximport javaxpublic class RegServlet 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 ((((" <BODY>"); String name = request.getParameter("name"); String pwd = request.getParameter("pwd"); boolean boo = false; if(name!=null && !name.trim().equals("")){ if(pwd!=null && !pwd.trim().equals("")){ if(name.startsWith("hncu") && pwd.length()>5){ boo = true; } } } if(boo){ out.println("欢迎你，"+name); }else{ request.getRequestDispatcher("/index.jsp").forward(request, response); } (()(); } }