Maison > Article > interface Web > Analyse de la composition technologique et des principes fondamentaux d'Ajax

Analyse de la composition technologique et des principes fondamentaux d'Ajax

亚连original: 2018-05-23 15:22:161559parcourir

Cet article présente principalement la fonction d'optimisation des performances JavaScript (throttle) et la fonction anti-rebond (anti-rebond). Les amis intéressés peuvent s'y référer

Cet article analyse principalement la technologie Ajax pour tout le monde. Le principe de composition est pour votre référence. . Le contenu spécifique est le suivant

1 Ajax
Caractéristiques : Actualisation partielle pour améliorer l'expérience utilisateur, les données sont chargées à partir de. le fournisseur de serveur

2. La composition technique d'AJax
n'est pas une nouvelle technologie, mais l'intégration des technologies précédentes
Ajax : Javascript asynchrone et XML (JavaScript asynchrone ; et XML)
Technologies incluses : JavaScript, XML, CSS, XMLHttpRequest
Asynchrone : Après l'envoi de la requête, le résultat sera traité par la fonction de rappel.
JavaScript : envoyez une requête au serveur, obtenez le résultat renvoyé et mettez à jour la page
XML : utilisé pour encapsuler les données

Principes de base d'Ajax
3. Objet XMLHttpRequst : Envoie une requête au serveur via cet objet.
Il s'agit d'une technologie de requête asynchrone, prise en charge par tous les navigateurs modernes (Chrome, IE5+)

1) Créer un objet XMLHttpReuest
Navigateurs non-IE (Mozilla/Safari) ：var xhr=new XMLHttpRequest();
IE:xhr=new ActiveXObject("Msxml2.XMLHTTP");
Version inférieure IE:xhr=new ActiveXObject("Microsfot.XMLHTTP");
2) Attributs et méthodes de l'objet XMLHttpRequest
a) Méthode : open("GET/POST",URL,true/false) : utilisée pour établir une connexion au serveur
a trois paramètres :
Paramètre 1 : méthode de soumission, post ou get
Paramètre 2 : URL demandée
Paramètre 3 : indique une requête synchrone ou asynchrone, true : indique une requête asynchrone
false : indique une requête synchrone
send(data ) :Envoyer la demande
Paramètres : Contenu soumis.
Méthode POST : data est le paramètre soumis, send(username=root&password=abc123);
Méthode GET : send(null)

b) Attribut :
onreadystatechange : paramètre La fonction de rappel lorsque l'état change. La fonction de rappel est utilisée pour obtenir les données du serveur.
onreadystatechange=function(){　　　
｝

readyState : Réponse d'état du serveur
Code d'état :
0 : Non initialisé
1 : Chargement
2 : Chargement terminé
3 : Requête en cours
4 : Requête terminée

responseText : Données renvoyées par le serveur (format texte)
responseXML : Données renvoyées par le serveur (format XML)

Résumé :
Étapes pour utiliser XMLHttpRequest :
1) Créer un objet XMLHttpRequest
2) Définir la méthode de requête et l'URL
xhr. open("GET/POST","url",true/false), true signifie requête asynchrone, false signifie requête synchrone
3) Définir la fonction de rappel lorsque l'état change
xhr.onreadystatechange=function( ){}
0 : Non initialisé
1 : Chargement
2 : Chargement terminé
3 : Demande en cours
4 : Demande terminée
4) Envoyer la demande
xhr. send( data),
Si soumis pour publication, data sont les données soumises. Si soumis pour get, le paramètre est nul.

Déterminez la page HTML à laquelle l'utilisateur s'est connecté :

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
</head>
<body>
  用户名：<input type="text" name="username" id="username"><br>
  密码:<input type="password" name="password" id="password">
  <a href="javascript:chkUser();">登录</a>
  <p id="res"></p>
</body>

<script type="text/javascript">
  var xhr;
  /**
  * 创建XMLHttpRequest对象
  */
 function createXMLHttpRequest(){
  //1、创建XMLHttpRequest对象
    if(window.XMLHttpRequest){
      //非IE内核浏览器
     xhr=new XMLHttpRequest(); 
    }else{
      //IE浏览器
      try{
        xhr=new ActiveXObject("Msxml2.XMLHTTP"); 
      }catch(e){
       //IE低版本
        xhr=new ActiveXObject("Microsoft.XMLHTTP"); 
      }
    }
 }
  
  /**
  * 发送请求，用来检查用户名、密码是否正确
  */
  function chkUser(){
    
    //1、创建XMLHttpRequest
    createXMLHttpRequest();
    
    //2、获得用户名、密码
    var username=document.getElementById("username").value;
    var password=document.getElementById("password").value;
    
    //3、与服务器建立连接：open
    var url="login?username="+username+"&password="+password;
    //方式1：get提交
    //xhr.open("GET",url,true);
    
    //方式2：post提交
    var url2="login";
    xhr.open("POST",url2,true);
    
    
    //4、设置回调函数，获得服务器响应的数据
    xhr.onreadystatechange=function(){
      /*
      readyState状态码：
      0：未初始化
      1：正在加载
      2：加载完成
      3：请求进行中
      4：请求完成
      */
      if(xhr.readyState==4){
        //status,200表示响应正常
        if(xhr.status==200){
         //alert("从服务器返回的值为："+xhr.responseText);
         var res=xhr.responseText;
         if(res==&#39;0&#39;){
           document.getElementById("res").innerHTML="登录成功";
         }else{
           document.getElementById("res").innerHTML="<font color=&#39;red&#39;>登录失败</font>";
         }
         
        }else{
          alert("出现在了异常:"+xhr.response.Text);
        }
        
      }
    }
    //5、发送请求
    //方式1：get方式
    //xhr.send(null);
    
    //方式2:post方式：
    //Post提交需要设置http请求头
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("username="+username+"&password="+password);
    
    
  }
 
</script>

</html>

Code du serveur :

package com.newer.login.web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.newer.login.bean.User;
import com.newer.login.service.UserService;

/**
 * Servlet implementation class LoginServlet
 */
public class LoginServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;

  UserService userService = new UserService();

  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
   *   response)
   */
  protected void doGet(HttpServletRequest request,
      HttpServletResponse response) throws ServletException, IOException {
    doPost(request,response);
  
  }

  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
   *   response)
   */
  protected void doPost(HttpServletRequest request,
      HttpServletResponse response) throws ServletException, IOException {
    // 1、获得页面参数
    String username = request.getParameter("username");
    String password = request.getParameter("password");

    System.out.println("获得请求的参数username:"+username);
    System.out.println("获得请求的参数password:"+password);    
    // 2、封装User对象
    User user = new User();
    user.setUsername(username);
    user.setPassword(password);

    // 3、调用服务类，完成用户名、密码的校验
    User u = userService.login(user);

    /*
     * 传统方式 if(u!=null){ //表示登录成功 request.setAttribute("user", user);
     * //跳转至首页... }else{ //登录失败，跳转登录页面
     * 
     * }
     */
    // ajax响应

    PrintWriter out = response.getWriter();

    if (u != null) {
      //0成功，1失败
      out.print(0);
    }else{
      out.print(1);
    }
    out.close();

  }

}

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Analyse de chargement asynchrone Ajax

Méthode Ajax pour vérifier de manière synchrone si le numéro de commande existe

Méthode d'implémentation Ajax pour obtenir des données puis les afficher sur la page

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：Résumé des méthodes pour optimiser le code Vue.jsArticle suivant：Résumé des méthodes pour optimiser le code Vue.js

Articles Liés

Voir plus