Une analyse incontournable des composants technologiques Ajax et des principes de base pour les débutants-js tutoriel-php.cn

Une analyse incontournable des composants technologiques Ajax et des principes de base pour les débutants

php中世界最好的语言

Libérer： 2018-04-03 16:34:32

original

1659 Les gens l'ont consulté

Cette fois, je vais vous présenter une analyse incontournable des composants technologiques et des principes fondamentaux d'Ajax pour les débutants. Quelles sont les Notes que les novices doivent lire sur la composition de la technologie Ajax et l'analyse des principes fondamentaux. Voici des informations pratiques. cas. Jetons un coup d'oeil.

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

1. Caractéristiques :
Actualisation partielle pour améliorer l'expérience utilisateur, les données sont chargées depuis 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 🎜>Fonction de rappeltraitement.
JavaScript : envoyer une requête au serveur, obtenir le résultat renvoyé et mettre à jour la page XML : utilisé pour encapsuler les données

3. Principe de base d'Ajax Objet XMLHttpRequst : Utilisez cet objet pour envoyer des données au serveur Envoyez une demande. 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

Navigateur nonIE (Mozilla / Safari) : var xhr=new XMLHttpRequest();
IE:xhr=new ActiveXObject("Msxml2.XMLHTTP");

Version inférieure IE:xhr=new ActiveXObject("Microsfot.XMLHTTP"

2) Propriétés et méthodes de l'objet XMLHttpRequesta) Méthode : open("GET/POST",URL,true/false) : utilisée pour établir une connexion au serveura 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 synchroneenvoyer(données) :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 : défini lorsque l'état changements 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 représente une requête asynchrone, false représente une requête synchrone

3) Définir la fonction de rappel lorsque l'état change xhr.onreadystatechange=function(){} 0 : Pas d'initialisation
1 : Chargement
2 : Chargement terminé
3 : Demande en cours
4 : Demande terminée
4) Envoyer la demande
xhr.send(data) ,
Si soumis pour publication, les données sont les données soumises. Si soumis pour obtenir, le paramètre est nul.

Juge
Connexion utilisateur
Page HTML :

Code serveur :

Je crois que vous l'avez maîtrisé après avoir lu l'affaire dans Cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

<%@ 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=='0'){
           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>

Copier après la connexion

Explication détaillée de l'utilisation du chargement asynchrone Ajax

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

Copier après la connexion

Utilisez ajax pour vérifier si l'utilisateur enregistré le nom existe

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!