Maison interface Web js tutoriel Comment implémenter la fonction de vérification en temps réel en ajax

Comment implémenter la fonction de vérification en temps réel en ajax

Mar 30, 2018 pm 03:38 PM
ajax 实时 验证

Cette fois, je vais vous montrer comment implémenter la fonction de vérification en temps réel avec ajax. Quelles sont les précautions pour qu'ajax implémente la fonction de vérification en temps réel. Ce qui suit est un cas pratique, allons-y. jetez un oeil.

Qu'est-ce qu'ajax

Ajax signifie "Asynchrone Javascript Et XML" (JavaScript et XML asynchrones), un web technologie de développement pour la création d'applications Web interactives.

Ajax = JavaScript et XML asynchrones (un sous-ensemble du langage de balisage universel standard).

Ajax est une technologie permettant de créer des pages Web rapides et dynamiques.

Ajax est une technologie qui permet de mettre à jour des parties d'une page Web sans recharger la page entière.

En échangeant une petite quantité de données avec le serveur en arrière-plan, Ajax peut mettre à jour les pages Web de manière asynchrone. Cela signifie que certaines parties d'une page Web peuvent être mises à jour sans recharger la page entière.

Les pages Web traditionnelles (n'utilisant pas Ajax) doivent recharger la page Web entière si le contenu doit être mis à jour.

C’est la définition de Baidu, qui est suffisamment détaillée.
Une chose qui mérite d'être ajoutée est la compréhension du terme asynchrone. Il est relatif à la synchronisation. Ici, ils font référence au mode d'interaction entre le serveur et le navigateur.

Synchrone, après chaque requête émise, l'opération utilisateur est bloquée et doit nécessiter le retour d'une réponse avant de poursuivre l'opération. Asynchrone signifie qu'après l'envoi d'une demande, l'utilisateur n'a pas besoin d'attendre une réponse. Tout est implémenté par ajax et les données peuvent être partiellement mises à jour sans actualiser la page Web. Amélioration de l’efficacité de la communication entre les deux extrémités.

Faisons une petite démo

Faisons une démo du formulaire de vérification sans actualiser, entrez le nom d'utilisateur dans la boîte de dialogue et vérifiez en arrière-plan. Utilisez la technologie ajax.

Structure du projet, construite avec maven

login.jsp

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

Bienvenue pour vous connecter :

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

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();
}
Copier après la connexion

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>
Copier après la connexion

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);
  }
}
Copier après la connexion

Commencer les tests

Entrez localhost :8888/login.jsp, la fenêtre pop-up

représente l'introduction réussie de js dans jsp

Entrez les données de test dans la zone de saisie

est déterminé par la logique du servlet et renvoie Le message d'erreur

est déterminé par la logique du servlet et le message de réussite

est renvoyé. En conséquence, ajax asynchrone. les demandes sont initialement mises en œuvre et les exigences de vérification en temps réel sont remplies

Quelques petits détails

Lors de l'utilisation de maven pour construire le projet. , faites attention à Project Structure -> Facets, définissez le chemin du web.xml et de la webapp ici, l'idée utilisera

2 Lors de l'introduction de js, faites attention à l'utilisation de chemins relatifs pour le mappage et lors de l'utilisation de EL. expression, activez isELIgnored="false"·` pour éviter toute analyse.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture recommandée :

Explication graphique détaillée de la mise en œuvre ajax du diagramme circulaire et du diagramme à colonnes dynamiques

Carte d'identité du juge et Comment écrire le format régulier du numéro de carte bancaire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Où trouver la courte de la grue à atomide atomique
1 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment vérifier la signature dans un PDF Comment vérifier la signature dans un PDF Feb 18, 2024 pm 05:33 PM

Nous recevons généralement des fichiers PDF du gouvernement ou d'autres agences, certains avec des signatures numériques. Après avoir vérifié la signature, nous voyons le message SignatureValid et une coche verte. Si la signature n'est pas vérifiée, la validité est inconnue. La vérification des signatures est importante, voyons comment le faire en PDF. Comment vérifier les signatures au format PDF La vérification des signatures au format PDF le rend plus fiable et le document est plus susceptible d'être accepté. Vous pouvez vérifier les signatures dans les documents PDF des manières suivantes. Ouvrez le PDF dans Adobe Reader Cliquez avec le bouton droit sur la signature et sélectionnez Afficher les propriétés de la signature Cliquez sur le bouton Afficher le certificat du signataire Ajoutez la signature à la liste des certificats de confiance à partir de l'onglet Confiance Cliquez sur Vérifier la signature pour terminer la vérification.

Méthode détaillée pour débloquer à l'aide de la vérification assistée par un ami WeChat Méthode détaillée pour débloquer à l'aide de la vérification assistée par un ami WeChat Mar 25, 2024 pm 01:26 PM

1. Après avoir ouvert WeChat, cliquez sur l'icône de recherche, entrez dans l'équipe WeChat et cliquez sur le service ci-dessous pour entrer. 2. Après avoir entré, cliquez sur l'option outil libre-service dans le coin inférieur gauche. 3. Après avoir cliqué, dans les options ci-dessus, cliquez sur l'option de déblocage/appel pour vérification auxiliaire.

Comment résoudre l'erreur 403 rencontrée par la requête jQuery AJAX Comment résoudre l'erreur 403 rencontrée par la requête jQuery AJAX Feb 20, 2024 am 10:07 AM

Titre : Méthodes et exemples de code pour résoudre les erreurs 403 dans les requêtes jQuery AJAX L'erreur 403 fait référence à une demande selon laquelle le serveur interdit l'accès à une ressource. Cette erreur se produit généralement parce que la demande manque d'autorisations ou est rejetée par le serveur. Lorsque vous effectuez des requêtes jQueryAJAX, vous rencontrez parfois cette situation. Cet article explique comment résoudre ce problème et fournit des exemples de code. Solution : Vérifiez les autorisations : assurez-vous d'abord que l'adresse URL demandée est correcte et vérifiez que vous disposez des autorisations suffisantes pour accéder à la ressource.

Comment résoudre l'erreur 403 de la requête jQuery AJAX Comment résoudre l'erreur 403 de la requête jQuery AJAX Feb 19, 2024 pm 05:55 PM

jQuery est une bibliothèque JavaScript populaire utilisée pour simplifier le développement côté client. AJAX est une technologie qui envoie des requêtes asynchrones et interagit avec le serveur sans recharger la page Web entière. Cependant, lorsque vous utilisez jQuery pour effectuer des requêtes AJAX, vous rencontrez parfois des erreurs 403. Les erreurs 403 sont généralement des erreurs d'accès refusé par le serveur, probablement en raison de problèmes de politique de sécurité ou d'autorisation. Dans cet article, nous verrons comment résoudre la requête jQueryAJAX rencontrant une erreur 403.

Nouvelles fonctionnalités de PHP 8 : ajout de la vérification et de la signature Nouvelles fonctionnalités de PHP 8 : ajout de la vérification et de la signature Mar 27, 2024 am 08:21 AM

PHP8 est la dernière version de PHP, apportant plus de commodité et de fonctionnalités aux programmeurs. Cette version met un accent particulier sur la sécurité et les performances, et l'une des nouvelles fonctionnalités remarquables est l'ajout de capacités de vérification et de signature. Dans cet article, nous examinerons de plus près ces nouvelles fonctionnalités et leurs utilisations. La vérification et la signature sont des concepts de sécurité très importants en informatique. Ils sont souvent utilisés pour garantir que les données transmises sont complètes et authentiques. La vérification et les signatures deviennent encore plus importantes lorsqu'il s'agit de transactions en ligne et d'informations sensibles, car si quelqu'un est capable de falsifier les données, cela pourrait potentiellement

Comment obtenir des variables de la méthode PHP en utilisant Ajax ? Comment obtenir des variables de la méthode PHP en utilisant Ajax ? Mar 09, 2024 pm 05:36 PM

L'utilisation d'Ajax pour obtenir des variables à partir de méthodes PHP est un scénario courant dans le développement Web. Grâce à Ajax, la page peut être obtenue dynamiquement sans actualiser les données. Dans cet article, nous présenterons comment utiliser Ajax pour obtenir des variables à partir de méthodes PHP et fournirons des exemples de code spécifiques. Tout d’abord, nous devons écrire un fichier PHP pour gérer la requête Ajax et renvoyer les variables requises. Voici un exemple de code pour un simple fichier PHP getData.php :

Comment résoudre le problème de la connexion Steam bloquée lors de la vérification du jeton mobile ? Comment résoudre le problème de la connexion Steam bloquée lors de la vérification du jeton mobile ? Mar 14, 2024 pm 07:35 PM

Steam est une plate-forme utilisée par les passionnés de jeux. Vous pouvez acheter et acheter de nombreux jeux ici. Cependant, récemment, de nombreux utilisateurs sont restés bloqués dans l'interface de vérification des jetons mobiles lors de la connexion à Steam et ne peuvent pas se connecter avec succès. savoir comment résoudre cette situation. Cela n'a pas d'importance. Le didacticiel du logiciel d'aujourd'hui est là pour répondre aux questions des utilisateurs. Les amis dans le besoin peuvent consulter les méthodes de fonctionnement. Erreur de jeton mobile Steam ? Solution 1 : Pour les problèmes logiciels, recherchez d'abord les paramètres du logiciel Steam sur le téléphone mobile, demandez la page d'assistance et confirmez que le réseau utilisant l'appareil fonctionne normalement, cliquez à nouveau sur OK, cliquez sur Envoyer SMS, vous pouvez recevoir le code de vérification sur le page de téléphone mobile, et vous avez terminé. Vérifiez, résolvez lors du traitement d'une demande.

Comment résoudre le problème de l'erreur 403 jQuery AJAX ? Comment résoudre le problème de l'erreur 403 jQuery AJAX ? Feb 23, 2024 pm 04:27 PM

Comment résoudre le problème de l’erreur 403 jQueryAJAX ? Lors du développement d'applications Web, jQuery est souvent utilisé pour envoyer des requêtes asynchrones. Cependant, vous pouvez parfois rencontrer le code d'erreur 403 lors de l'utilisation de jQueryAJAX, indiquant que l'accès est interdit par le serveur. Cela est généralement dû aux paramètres de sécurité côté serveur, mais il existe des moyens de résoudre le problème. Cet article explique comment résoudre le problème de l'erreur 403 jQueryAJAX et fournit des exemples de code spécifiques. 1. faire

See all articles