Implementazione di una funzione di validazione in tempo reale con AJAX

Cos'è Ajax

Ajax, che significa “Asynchronous Javascript And XML” (JavaScript e XML asincrono), è una tecnologia di sviluppo web per creare applicazioni web interattive.

Ajax = JavaScript e XML (XML di base del linguaggio di markup generale).

Ajax è una tecnologia utilizzata per creare pagine web dinamiche e rapide.

Ajax è una tecnologia che può aggiornare una parte della pagina web senza ricaricare l'intera pagina web.

　Grazie a scambi di dati minimi con il server in background, Ajax può far si che la pagina web aggiorni asincronamente. Questo significa che è possibile aggiornare una parte della pagina web senza ricaricare l'intera pagina web.

Le pagine web tradizionali (senza utilizzare Ajax) devono ricaricare l'intera pagina web per aggiornare il contenuto.

Ecco la definizione di Baidu, abbastanza dettagliata.
　Un punto da aggiungere è la comprensione dell'asincrono, l'asincrono è rispetto al sincrono, qui si riferisce al modello di interazione tra server e browser.

　Sincrono, dopo aver inviato ogni richiesta, l'operazione dell'utente viene bloccata, è necessario che l'operazione continui dopo aver ricevuto la risposta. Mentre asincrono significa che dopo aver inviato la richiesta, l'utente non deve aspettare la risposta, tutto viene implementato da Ajax, senza dover aggiornare la pagina web, aggiornare localmente i dati. Aumenta l'efficienza di comunicazione tra le due parti.

Un piccolo demo

Fai un demo di form di validazione senza refresh, inserisci il nome utente nella finestra di dialogo, verifica in background, utilizza tecnologia Ajax.

Struttura del progetto, costruito con 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()"/>
    <!-- Visualizza messaggio di avviso -->
    <div id="msg"></div>
    <!-- Includi js nella pagina jsp, metodo di percorso assoluto -->
    <script src="${pageContext.request.contextPath}/js/main.js"></script>
</body>
</html>

main.js

alert("use ajax!")
// Crea l'oggetto XMLHttpRequest, in diversi browser
function createXMLHTTP() {
  if(window.XMLHttpRequest){
    // IE7+, Firefox, Chrome, Opera, Safari browser esegue il codice
    xmlhttp = new XMLHttpRequest();
  } else {
    //esegui codice per browser IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  return xmlhttp;
}
function CallServer() {
  var username = document.getElementById("username").value;
  //controlla se è vuoto
  if ((username == null) || (username == "")) return;
  var xmlhttp = createXMLHTTP();
  //costruisci l'url della richiesta
  var url = "/loginServlet"+"?"+"username="+username;
  //chiamata a evento quando il codice di stato cambia
  xmlhttp.onreadystatechange = function () {
    //ritorno normale, sostituisci il contenuto di msg
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
      document.getElementById("msg").innerHTML = xmlhttp.responseText;
    }
  }
  //invio richiesta asincrona
  xmlhttp.open("GET",url,true);
  //invia richiesta
  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;
/**
 /* 后端使用Servlet处理请求
 */
public class loginServlet extends HttpServlet {
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //设置编码和响应头
    request.setCharacterEncoding("UTF-8");
    response.setContentType("text/xml;charset=UTF-8");
    response.setHeader("Cache-Control", "no-cache");
    //获取参数
    String username = request.getParameter("username");
    String msg = "";
    if("lbw".equals(username)){
      msg = "名称正确";
    } else {
      msg = "名称错误";
    }
    PrintWriter out = response.getWriter();
    out.println(msg);
  }
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doPost(request, response);
  }
}

Inizia il test

Inserisci localhost:8888/login.jsp, viene visualizzata una finestra di dialogo

　Rappresenta l'introduzione con successo di js nel jsp

Inserisci i dati di test nel campo di input

　Deciso dalla logica del Servlet, restituisce informazioni di errore

　Deciso dalla logica del Servlet, restituisce informazioni di successo

Di conseguenza, è stato implementato il richiesta asincrona AJAX, raggiungendo i requisiti di verifica in tempo reale

Alcuni dettagli minori

1. Quando si costruisce un progetto con Maven, attenzione a Project Structure -> Facets, qui impostare il percorso di web.xml e webapp, IntelliJ IDEA lo utilizzerà

2. Quando si introduce js, attenzione a utilizzare il metodo di percorso relativo per l'inserimento e assicurarsi di abilitare isELIgnored="false" per evitare che non venga解析.

Sommario

Il seguente è stato introdotto dall'autore per la realizzazione di una funzione di verifica in tempo reale semplice tramite AJAX, sperando che sia utile a tutti. Se avete qualsiasi domanda, lasciate un messaggio e l'autore risponderà tempestivamente!

Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il diritto d'autore è dell'autore originale, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, il sito web non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, il sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.

Guida di base