1.jsp Code
<%@ Page Language="Java"ContentType="text/html; Charset=utf-8"pageencoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd "><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"><title>Page no refresh use Ajax to check if the user name is registered (post mode)</title><Scripttype= "Text/javascript"> functionCreateajax () {varAjax= NULL; Try{Ajax= NewActiveXObject ("Microsoft.XMLHTTP"); //alert ("Your browser supports AJAX, is IE"); } Catch(E1) {Ajax= NewXMLHttpRequest (); //alert ("Your browser supports AJAX, non-IE"); } returnAjax; }</Script></Head><Body> <form>User Name (POST):<inputID= "username"name= "username"/> <spanID= "span"></span> </form></Body><Scripttype= "Text/javascript">Window.document.getElementById ("username"). onblur= function() { varusername= This. Value; //1. Create an Object varAjax=Createajax (); //2. Asynchronous object ready to send request varMethod= "Post"; varURL= "${pagecontext.request.contextpath}/userajaxservlet?time =" + NewDate (). GetTime (); Ajax.open (method, URL); //set the AJAX request header to post, and he will automatically encode the characters in the request body UTF-8Ajax.setrequestheader ("Content-type","application/x-www-form-urlencoded"); //3.AJAX Asynchronous object actually sends the data of the request body to the server, if the request body has no data, it is denoted by null, if there is a value, the key value pair varcontent= "username=" +username; Ajax.send (content); //---------------------------------Wait------------------------- //4. Ajax asynchronous objects constantly listen to changes in the state of the server, only the status code changes, the function can be triggered //0-1-2-3-4, these are the functions that can trigger a function. //4-4-4-4-4, these are non-triggering functions. //The following function is triggered by the server, not the programmer, which is not the same as the onclick.Ajax.onreadystatechange= function() { //If the status code is 4 if(Ajax.readystate== 4) { //if the server responds with a if(Ajax.status== $) { //5. Getting the results of a server response from an Ajax asynchronous object varTip=Ajax.responsetext; //Create an IMG varimgelement=Document.createelement ("img"); //set the properties of a labelimgelement.src=tip; ImgElement.style.width="14px"; ImgElement.style.height="14px"; //positioning span Labels varspanelement=document.getElementById ("span"); //empty the values in spanspanelement.innerhtml= ""; //add img to spanSpanelement.appendchild (imgelement); } } } }</Script></HTML>
2.servlet Code
PackageCom.buaa.ajax;Importjava.io.IOException;ImportJava.io.PrintWriter;Importjavax.servlet.ServletException;ImportJavax.servlet.annotation.WebServlet;ImportJavax.servlet.http.HttpServlet;Importjavax.servlet.http.HttpServletRequest;Importjavax.servlet.http.HttpServletResponse; @WebServlet ("/userajaxservlet") Public classUserajaxservletextendsHttpServlet {Private Static Final LongSerialversionuid = 1L; protected voidDoPost (httpservletrequest request, httpservletresponse response)throwsservletexception, IOException {request.setcharacterencoding ("UTF-8"); Response.setcontenttype ("Text/html;charset=utf-8"); String username= Request.getparameter ("username"); System.out.println ("Username:" +username); String Tip= "Images/msgsent.gif"; if("Jack". Equals (username)) {Tip= "Images/msgerror.gif"; } printwriter PW=Response.getwriter (); Pw.write (TIP); Pw.flush (); Pw.close (); }}
Note: Post submission to set header file
Learn Aiax (JavaScript)--page no refresh with Ajax check if user name is registered (post mode)
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
