Home > Developer > Web Develop
Reprint Please specify source: http://blog.csdn.net/qq_26525215
This article is from the "university trip _ remember the blog"
Originally this blog was published last month, but due to my negligence, resulting in the article was completely edited, special to Fill.
Explain Ajax in the official language first:
AJAX is a technique that can update parts of a Web page without reloading the entire page.
AJAX = asynchronous JavaScript and XML.
AJAX is a technique for creating fast, Dynamic Web Pages.
AJAX enables Web pages to be updated asynchronously by exchanging small amounts of data in the background with the Server. This means that you can update a part of a webpage without reloading the entire page.
Traditional Web pages (without AJAX) If you need to update the content, you must reload the entire page surface.
There are many examples of applications that use AJAX: Sina weibo, Google maps, Happy net, and More.
Now write an imitation of the function of Ajax registration, the implementation of the registration (web page does not refresh and submit), prompting the user name Error.
Apply hidden frames, Listen for events, submit forms to the IFRAME inline frame, call parent page functions ....
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){ varName = obj.value;//.value is the name attribute value in input if(name!=NULL&&name!="") {document.getelementbyid ("regname"). value=name; document.forms[1].submit ();//make A second form submit}Else{msg.innerhtml="please Enter your user name!" "; } } function ajaxback(res){ if(res==1) {parent.document.getElementById ("msg"). innerhtml="user name already exists, please change user name!" "; }Else{msg.innerhtml="congratulations, You can register!" ";//id can also be used directly} }</script> </head> <body> <h2>Demonstrates Myajax---hidden frame technology</H2> <br/> <h2>User Registration</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="register"> </form> <form target="dataFrame" Action="<%= request.getcontextpath ()% >/valservlet " method=" POST "> <input type="hidden" id="regname" name= "name"/> <!--type= "hidden" means that this input is hidden and the Web page is not visible. the target property specifies where to open the action URL. - </form> <!--iframe creates an inline frame (inline frame) that contains another Document. - <iframe style="display:none" name="dataFrame" ></iframe> </body></html>Background verification:
packagecn.hncu.reg.servlet;Importjava.io.IOException;Importjava.io.PrintWriter;Importjavax.servlet.ServletException;Importjavax.servlet.http.HttpServlet;Importjavax.servlet.http.HttpServletRequest;Importjavax.servlet.http.HttpServletResponse; public class valservlet extends httpservlet { public void Doget(httpservletrequest request, HttpServletResponse Response)throwsservletexception, IOException {doPost (request, response); } public void DoPost(httpservletrequest request, HttpServletResponse Response)throwsservletexception, 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") ){//formal project, need to go back to check the dataRequest.setattribute ("error",0);//this is available for registration}Else{request.setattribute ("error",1);//cannot register, The user name already exists! }//forwardingRequest.getrequestdispatcher ("/jsps/regresult.jsp"). forward (request, response); }}<%@ page language="java" import="java.util.*" pageencoding= "UTF-8"%><! DOCTYPE HTML public "-//w3c//dtd HTML 4.01 transitional//en" ><html> <head> </head> <body> <h2>This is the results page</H2>Error Code: ${error}<script type="text/javascript"> var res ="<%=request.getattribute ("error")%>"; / * Display in iframe frame * / / * If (res==1) {parent.document.getElementById ("msg"). innerhtml= "user name already exists, please replace username! "; }else{parent.document.getElementById ("msg"). innerhtml= "congratulations, You can register!" "; }//parent.document--represents the Document object of the parent page//this is a way to use, but not very good. We'd better use the following sentence to call the parent page method to resolve the * /parent.ajaxback (res); </script> </body></html> packagecn.hncu.reg.servlet;Importjava.io.IOException;Importjava.io.PrintWriter;Importjavax.servlet.ServletException;Importjavax.servlet.http.HttpServlet;Importjavax.servlet.http.HttpServletRequest;Importjavax.servlet.http.HttpServletResponse; public class regservlet extends httpservlet { public void DoPost(httpservletrequest request, HttpServletResponse Response)throwsservletexception, 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")){//if It is official, here to register in the background, it is Simplified. Out.print ("registration is successful!" "+name); }Else{out.print ("registration failed: User name must start with hncu"); } }}Reprint Please specify source: http://blog.csdn.net/qq_26525215
This article is from the "university trip _ remember the blog"
Web---monitoring User Name Registration Technology-myajax-hidden Frames
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
