Ajax implements simple real-time verification and ajax real-time verification

Ajax implements simple real-time verification and ajax real-time verification

What Is ajax?

Ajax is "Asynchronous Javascript And XML" (Asynchronous JavaScript And XML), which is a Web page development technology used to create interactive web applications.

Ajax = Asynchronous JavaScript and XML (subset of standard General Markup Language ).

Ajax is a technology used to create fast dynamic web pages.

Ajax is a technology that updates some webpages without the need to reload the entire webpage.

By performing a small amount of data exchange with the server in the background, Ajax can implement asynchronous updates on webpages. This means that you can update a part of a webpage without reloading the entire webpage.

If you need to update the content of a traditional web page (without Ajax), you must reload the entire web page.

This is Baidu's definition of it, which is detailed enough.
What is worth adding is an understanding of Asynchronization. Asynchronization is relative to synchronization. Here they refer to the interaction mode between the server and the browser.

Synchronization: after each request is sent, user operations are blocked. You must request the response to continue the operation. Asynchronous means that after a request is sent, the user does not have to wait for a response, and everything is implemented by ajax. data can be updated locally without refreshing the webpage. Improves the communication efficiency between the two ends.

Here is a demo.

Create a demo of the refresh verification form, enter the user name in the dialog box, perform verification in the background, and use ajax technology.

Project Structure, built using maven

Login. jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
Welcome:
Username: <input type = "text" name = "username" id = "username" onchange = "CallServer ()"/> <! -- Display prompt information --> <div id = "msg"> </div> <! -- Introduce js on the jsp page, the absolute path --> <script src = "$ {pageContext. request. contextPath}/js/main. js "> </script> </body> 
Main. js
Alert ("use ajax! ") // Create the XMLHttpRequest object. In different browsers, the function createXMLHTTP () {if (window. XMLHttpRequest) {// IE7 +, Firefox, Chrome, Opera, and Safari run the code xmlhttp = new XMLHttpRequest ();} else {// IE6, the IE5 Browser executes the code xmlhttp = new ActiveXObject ("Microsoft. XMLHTTP ");} return xmlhttp;} function CallServer () {var username = document. getElementById ("username "). value; // null if (username = null) | (username = "") return; Var xmlhttp = createXMLHTTP (); // construct the request url var url = "/loginServlet" + "? "+" Username = "+ username; // status code changes the call event xmlhttp. onreadystatechange = function () {// normal return, replace msg content if (xmlhttp. readyState = 4 & xmlhttp. status = 200) {document. getElementById ("msg "). innerHTML = xmlhttp. responseText ;}// asynchronously submit the request xmlhttp. open ("GET", url, true); // send the request xmlhttp. send ();}
Web. xml
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd" ><web-app> <display-name>Archetype Created Web Application</display-name> <welcome-file-list>  <welcome-file>index.jsp</welcome-file> </welcome-file-list> <servlet>  <servlet-name>loginServlet</servlet-name>  <servlet-class>com.lbw.servlet.loginServlet</servlet-class> </servlet> <servlet-mapping>  <servlet-name>loginServlet</servlet-name>  <url-pattern>/loginServlet</url-pattern> </servlet-mapping></web-app>
LoginServlet. java
Package com. lbw. servlet; import javax. servlet. servletException; import javax. servlet. annotation. webServlet; import javax. servlet. http. httpServlet; import javax. servlet. http. httpServletRequest; import javax. servlet. http. httpServletResponse; import java. io. IOException; import java. io. printWriter;/*** the backend uses Servlet to process requests */public class loginServlet extends HttpServlet {protected void doPost (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// set the encoding and Response Header request. setCharacterEncoding ("UTF-8"); response. setContentType ("text/xml; charset = UTF-8"); response. setHeader ("Cache-Control", "no-cache"); // obtain the String username = request parameter. getParameter ("username"); String msg = ""; if ("lbw ". equals (username) {msg = "the name is correct";} else {msg = "name error";} PrintWriter out = response. getWriter (); out. println (msg);} protected void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost (request, response );}}
Start testing
Enter localhost: 8888/login. jsp. The window is displayed.
Indicates that js is successfully introduced into jsp.
Enter test data in the input box.
Determined by the logic in the Servlet, the error message is returned.
Determined by the logic in the Servlet, the success message is returned.
As a result, ajax asynchronous requests are initially implemented, meeting the requirements for real-time verification.
Small details
1. When using maven to build a project, note thatProject Structure -> FacetsSet the path of web. xml and webapp. idea will use
2. When introducing js, be sure to use the relative path method for ing, and enable isELIgnored = "false" · 'in the EL expression to avoid parsing.

Summary
The above is the ajax Implementation of simple real-time verification function introduced by xiaobian. I hope it will be helpful to you. If you have any questions, please leave a message. The editor will reply to you in time!