suchen

Heim >Web-Frontend >js-Tutorial >Eine unverzichtbare Analyse der Ajax-Technologiekomponenten und Grundprinzipien für Anfänger

Eine unverzichtbare Analyse der Ajax-Technologiekomponenten und Grundprinzipien für Anfänger

php中世界最好的语言
php中世界最好的语言Original
2018-04-03 16:34:321651Durchsuche

Dieses Mal werde ich Ihnen eine unverzichtbare Analyse der Ajax-Technologiekomponenten und Kernprinzipien für Neulinge bringen. Was sind die Hinweise, die Anfänger über die Ajax-Technologiezusammensetzung und die Kernprinzipienanalyse lesen müssen? Werfen wir einen Blick darauf.

In diesem Artikel werden hauptsächlich die Kompositionsprinzipien der Ajax-Technologie als Referenz analysiert. Der spezifische Inhalt lautet wie folgt:

Features:
Teilweise Aktualisierung zur Verbesserung der Benutzererfahrung, Daten werden vom Serveranbieter geladen 2 Die technische Zusammensetzung von AJax

ist keine neue Technologie, sondern die Integration früherer Technologien

Ajax: Asynchrone Javascript und 🎜>Callback-Funktion
Verarbeitung. JavaScript: Senden Sie eine Anfrage an den Server, rufen Sie das zurückgegebene Ergebnis ab und aktualisieren Sie die Seite XML: Wird zum Kapseln von Daten verwendet

3. Ajax-Kernprinzip XMLHttpRequst-Objekt: Verwenden Sie dieses Objekt, um Daten an den Server zu senden. Senden Sie eine Anfrage.
Es handelt sich um eine asynchrone Anforderungstechnologie, die von allen modernen Browsern (Chrome, IE5+) unterstützt wird

1) XMLHttpReuest-Objekt erstellen Nicht-IE-Browser
(Mozilla / Safari): var xhr=new XMLHttpRequest();

IE:xhr=new ActiveXObject("Msxml2.XMLHTTP");

Untere Version IE:xhr=new ActiveXObject("Microsfot.XMLHTTP"); 2) Eigenschaften und Methoden des XMLHttpRequest-Objektsa) Methode: open("GET/POST",URL,true/false): wird zum Herstellen einer Verbindung zum Server verwendethat drei Parameter:
Parameter 1: Übermittlungsmethode, Post oder Get
Parameter 2: angeforderte URL
Parameter 3: zeigt synchrone oder asynchrone Anfrage an, true: zeigt asynchrone Anfrage anfalse: zeigt synchrone Anfrage ansend(data) :Anfrage senden
Parameter: Eingereichter Inhalt.
POST-Methode: Daten sind der übermittelte Parameter, send(username=root&password=abc123);
GET-Methode: send(null)

b) Attribut:
onreadystatechange: Wird beim Status festgelegt Änderungen Die Rückruffunktion wird verwendet, um Serverdaten abzurufen.
onreadystatechange=function(){　　　
｝

readyState: Serverstatusantwort


Statuscode:
0: Nicht initialisiert
1: Wird geladen

2 : Laden abgeschlossen

3: Anfrage in Bearbeitung
4: Anfrage abgeschlossen responseText: Vom Server zurückgegebene Daten (Textformat)
responseXML: Vom Server zurückgegebene Daten (XML-Format)


Zusammenfassung:

Schritte zur Verwendung von XMLHttpRequest:
1) Erstellen Sie ein XMLHttpRequest-Objekt

2) Legen Sie die Anforderungsmethode und die URL fest

xhr.open("GET /POST ","url",true/false), true stellt eine asynchrone Anfrage dar, false stellt eine synchrone Anfrage dar 3) Legen Sie die Rückruffunktion fest, wenn sich der Status ändert xhr.onreadystatechange=function(){}
0: Keine Initialisierung
1: Laden
2: Laden abgeschlossen
3: Anfrage in Bearbeitung
4: Anfrage abgeschlossen
4) Anfrage senden
xhr.send(data) ,
Bei der Übermittlung zur Veröffentlichung handelt es sich bei den Daten um die übermittelten Daten. Bei der Übermittlung zur Übermittlung ist der Parameter null.

Richter
Benutzeranmeldung
HTML-Seite:

Servercode:

Ich glaube, Sie haben es gemeistert, nachdem Sie den Fall gelesen haben Diese Artikelmethode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! 

<%@ 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>
Empfohlene Lektüre: 

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();
  }
}
Detaillierte Erläuterung der Verwendung des asynchronen Ladens mit Ajax

Verwenden Sie Ajax, um zu überprüfen, ob der Benutzer registriert ist Name existiert

Das obige ist der detaillierte Inhalt vonEine unverzichtbare Analyse der Ajax-Technologiekomponenten und Grundprinzipien für Anfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript css ajax chrome safari html NULL 封装 xml 回调函数 var function 对象 异步
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Verwendung des asynchronen Ajax-LadensNächster Artikel：Detaillierte Erläuterung der Verwendung des asynchronen Ajax-Ladens

In Verbindung stehende Artikel

Mehr sehen