Comment implémenter la fonction de vérification en temps réel en ajax-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-03-30 15:38:03

original

1218 Les gens l'ont consulté

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

<%@ 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!