Implementación de una función de validación en tiempo real simple con AJAX

¿Qué es AJAX?

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

　通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

这是百度对它的定义，足够详细。
　值得补充的一点是对异步的理解，异步是相对于同步来说的，在这里他们指的是服务器和浏览器的交互模式。

　同步，每次请求发出之后，用户操作即被阻塞，必须要求返回响应后继续操作。而异步指的是发出请求后，用户无需等待响应，一切由ajax来实现，无需进行刷新网页就可以局部更新数据。提高了俩端的沟通效率。

来个小demo

做一个无刷新验证表单的demo，在对话框中输入用户名，在后台进行验证，使用ajax技术。

项目结构，使用maven构建

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
  <title>login</title>
</head>
<body>

欢迎登陆：

    用户名：<input type="text" name="username" id="username" onchange="CallServer()"/>
    <!-- 显示提示信息 -->
    <div id="msg"></div>
    <!-- 在jsp页面中引入js，绝对路径的方式 -->
    <script src="${pageContext.request.contextPath}/js/main.js"></script>
</body>
</html>

main.js

alert("use ajax!")
//创建XMLHttpRequest对象，在不同浏览器
function createXMLHTTP() {
  if(window.XMLHttpRequest){
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp = new XMLHttpRequest();
  }else {
    // IE6, IE5 浏览器执行代码
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  return xmlhttp;
}
function CallServer() {
  var username = document.getElementById("username").value;
  // 判断为空
  if ((username == null) || (username == "")) return;
  var xmlhttp = createXMLHTTP();
  // 构建请求url
  var url = "/loginServlet+"?"+"username="+username;
  //状态码改变调用事件
  xmlhttp.onreadystatechange = function () {
    //正常返回，替换msg内容
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
      document.getElementById("msg").innerHTML = xmlhttp.responseText;
    }
  }
  //异步提交请求
  xmlhttp.open("GET",url,true);
  //发送请求
  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;
/**
 * el backend utiliza Servlet para manejar solicitudes
 */
public class loginServlet extends HttpServlet {
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //establecer codificación y encabezados de respuesta
    request.setCharacterEncoding("UTF-8-8");
    response.setContentType("text/xml;charset=UTF-8-8");
    response.setHeader("Cache-Control", "no-cache");
    //obtener parámetros
    String username = request.getParameter("username");
    String msg = "";
    if("lbw".equals(username)){
      msg = "nombre correcto";
    }else {
      msg = "nombre incorrecto";
    }
    PrintWriter out = response.getWriter();
    out.println(msg);}
  }
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doPost(request, response);
  }
}

Comience la prueba

Escriba localhost:8888/login.jsp, ventana emergente

　Representa que se ha introducido correctamente js en jsp

Escriba datos de prueba en el cuadro de entrada

　Decidido por la lógica del Servlet, se devuelve información de error

　Decidido por la lógica del Servlet, se devuelve información de éxito

Por lo tanto, se ha implementado inicialmente la solicitud asincrónica AJAX, alcanzando los requisitos de verificación en tiempo real

Algunos detalles pequeños

1Al construir proyectos con Maven, preste atención a la Estructura del Proyecto -Facetas, aquí se establecen las rutas de web.xml y webapp, Idea las usará

2Al importar js, preste atención a usar la forma de ruta relativa para la importación y asegúrese de que el atributo isELIgnored="false" esté habilitado para evitar que no se analice.

Resumen

Lo mencionado anteriormente es lo que el editor les ha presentado sobre la implementación de la función de verificación en tiempo real simple de AJAX, espero que les sea útil. Si tienen alguna pregunta, déjenme un mensaje y responderé a tiempo.

Declaración: El contenido de este artículo se obtiene de la red, pertenece al autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha procesado editorialmente y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.

Tutoriales básicos

Te gustará