Maison >interface Web >js tutoriel >Ajax implémente une fonction de vérification simple en temps réel

Ajax implémente une fonction de vérification simple en temps réel

php中世界最好的语言original: 2018-04-13 16:32:321296parcourir

Cette fois, je vais vous montrer comment ajax doit implémenter la vérification en temps réel. Quelles sont les précautions pour qu'ajax implémente la vérification en temps réel. Voici des cas pratiques, jetons un coup d'œil.

Qu'est-ce qu'ajax

Ajax signifie « Asynchronous Javascript And XML » (JavaScript et XML asynchrones), qui fait référence à une technologie de développement Web permettant de créer des applications Web interactives.

Ajax = JavaScript asynchrone et XML (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 vous 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 permet aux pages Web d'être mises à jour 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 émission de requête, 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.

Prenons une petite démo

Faites une démonstration d'un formulaire de vérification sans actualisation, entrez le nom d'utilisateur dans la boîte de dialogue et effectuez la vérification en arrière-plan, à l'aide de la technologie ajax.

Structure du projet, construite avec maven

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

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>

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>

connexionServlet.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);
  }
}

Commencer les tests

Entrez localhost:8888/login.jsp, une 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

Déterminé par la logique du servlet, renvoie un message d'erreur

Déterminées par la logique du servlet, les informations de réussite sont renvoyées

En conséquence, des requêtes asynchrones ajax ont été initialement mises en œuvre, répondant aux exigences de vérification en temps réel

Quelques petits détails

1. Lorsque vous utilisez maven pour construire le projet, faites attention à Project Structure -> Facets Définissez ici les chemins de web.xml et webapp que l'idée utilisera

2. Lors de l'introduction de js, faites attention à l'utilisation de chemins relatifs pour. mapping. , et lorsque vous utilisez EL expression, vous devez activer 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 :

Parcel.js+Vue 2.x méthode d'empaquetage de configuration rapide

Garde de navigation de VueRouter Comment utiliser

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：

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

Article précédent：Explication détaillée des étapes d'utilisation du menu arborescent de zTreeArticle suivant：Explication détaillée des étapes d'utilisation du menu arborescent de zTree

Articles Liés

Voir plus