Méthode de mise en œuvre simple de la fonction de vérification en temps réel Ajax-js tutoriel-php.cn

Méthode de mise en œuvre simple de la fonction de vérification en temps réel Ajax

小云云

Libérer： 2018-01-05 15:06:13

original

1497 Les gens l'ont consulté

Ajax signifie "Asynchronous Javascript And XML" et fait référence à une technologie de développement Web permettant de créer des applications Web interactives. Cet article présente principalement la fonction simple de vérification en temps réel d'ajax. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

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 (sans 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.

Faisons 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>

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

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

Copier après la connexion

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ées par la logique du servlet, les informations d'erreur sont renvoyées

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 créer le projet, faites attention à Structure du projet -> Facettes. 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 relatif. Pour mapper et utiliser des expressions EL, activez isELIgnored="false"·` pour éviter toute analyse.

Recommandations associées :

L'applet WeChat implémente le partage de fonctions de vérification d'expression régulière d'entrée simple

Implémentation AngularJS de gain et de perte de concentration Formulaire détaillé fonction de validation à l'époque

Exemple détaillé de jQuery complétant la fonction de validation du formulaire

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!