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

Apr 03, 2018 pm 04:34 PM
ajax 技术 组成

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>
Nach dem Login kopieren
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();
  }
}
Nach dem Login kopieren
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!

Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Crossplay haben?
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Das Stable Diffusion 3-Papier wird endlich veröffentlicht und die architektonischen Details werden enthüllt. Wird es helfen, Sora zu reproduzieren? Das Stable Diffusion 3-Papier wird endlich veröffentlicht und die architektonischen Details werden enthüllt. Wird es helfen, Sora zu reproduzieren? Mar 06, 2024 pm 05:34 PM

Der Artikel von StableDiffusion3 ist endlich da! Dieses Modell wurde vor zwei Wochen veröffentlicht und verwendet die gleiche DiT-Architektur (DiffusionTransformer) wie Sora. Nach seiner Veröffentlichung sorgte es für großes Aufsehen. Im Vergleich zur Vorgängerversion wurde die Qualität der von StableDiffusion3 generierten Bilder erheblich verbessert. Es unterstützt jetzt Eingabeaufforderungen mit mehreren Themen, und der Textschreibeffekt wurde ebenfalls verbessert, und es werden keine verstümmelten Zeichen mehr angezeigt. StabilityAI wies darauf hin, dass es sich bei StableDiffusion3 um eine Reihe von Modellen mit Parametergrößen von 800 M bis 8 B handelt. Durch diesen Parameterbereich kann das Modell direkt auf vielen tragbaren Geräten ausgeführt werden, wodurch der Einsatz von KI deutlich reduziert wird

Dieser Artikel reicht aus, um etwas über autonomes Fahren und Flugbahnvorhersage zu lesen! Dieser Artikel reicht aus, um etwas über autonomes Fahren und Flugbahnvorhersage zu lesen! Feb 28, 2024 pm 07:20 PM

Die Trajektorienvorhersage spielt eine wichtige Rolle beim autonomen Fahren. Unter autonomer Fahrtrajektorienvorhersage versteht man die Vorhersage der zukünftigen Fahrtrajektorie des Fahrzeugs durch die Analyse verschiedener Daten während des Fahrvorgangs. Als Kernmodul des autonomen Fahrens ist die Qualität der Trajektorienvorhersage von entscheidender Bedeutung für die nachgelagerte Planungssteuerung. Die Trajektorienvorhersageaufgabe verfügt über einen umfangreichen Technologie-Stack und erfordert Vertrautheit mit der dynamischen/statischen Wahrnehmung des autonomen Fahrens, hochpräzisen Karten, Fahrspurlinien, Fähigkeiten in der neuronalen Netzwerkarchitektur (CNN&GNN&Transformer) usw. Der Einstieg ist sehr schwierig! Viele Fans hoffen, so schnell wie möglich mit der Flugbahnvorhersage beginnen zu können und Fallstricke zu vermeiden. Heute werde ich eine Bestandsaufnahme einiger häufiger Probleme und einführender Lernmethoden für die Flugbahnvorhersage machen! Einführungsbezogenes Wissen 1. Sind die Vorschaupapiere in Ordnung? A: Schauen Sie sich zuerst die Umfrage an, S

So beheben Sie den 403-Fehler, der bei einer jQuery-AJAX-Anfrage auftritt So beheben Sie den 403-Fehler, der bei einer jQuery-AJAX-Anfrage auftritt Feb 20, 2024 am 10:07 AM

Titel: Methoden und Codebeispiele zur Behebung von 403-Fehlern in jQuery-AJAX-Anfragen. Der 403-Fehler bezieht sich auf eine Anfrage, dass der Server den Zugriff auf eine Ressource verbietet. Dieser Fehler tritt normalerweise auf, weil der Anfrage die Berechtigungen fehlen oder sie vom Server abgelehnt wird. Wenn Sie jQueryAJAX-Anfragen stellen, stoßen Sie manchmal auf diese Situation. In diesem Artikel wird erläutert, wie dieses Problem gelöst werden kann, und es werden Codebeispiele bereitgestellt. Lösung: Berechtigungen prüfen: Stellen Sie zunächst sicher, dass die angeforderte URL-Adresse korrekt ist und stellen Sie sicher, dass Sie über ausreichende Berechtigungen für den Zugriff auf die Ressource verfügen.

DualBEV: BEVFormer und BEVDet4D deutlich übertreffen, öffnen Sie das Buch! DualBEV: BEVFormer und BEVDet4D deutlich übertreffen, öffnen Sie das Buch! Mar 21, 2024 pm 05:21 PM

In diesem Artikel wird das Problem der genauen Erkennung von Objekten aus verschiedenen Blickwinkeln (z. B. Perspektive und Vogelperspektive) beim autonomen Fahren untersucht, insbesondere wie die Transformation von Merkmalen aus der Perspektive (PV) in den Raum aus der Vogelperspektive (BEV) effektiv ist implementiert über das Modul Visual Transformation (VT). Bestehende Methoden lassen sich grob in zwei Strategien unterteilen: 2D-zu-3D- und 3D-zu-2D-Konvertierung. 2D-zu-3D-Methoden verbessern dichte 2D-Merkmale durch die Vorhersage von Tiefenwahrscheinlichkeiten, aber die inhärente Unsicherheit von Tiefenvorhersagen, insbesondere in entfernten Regionen, kann zu Ungenauigkeiten führen. Während 3D-zu-2D-Methoden normalerweise 3D-Abfragen verwenden, um 2D-Features abzutasten und die Aufmerksamkeitsgewichte der Korrespondenz zwischen 3D- und 2D-Features über einen Transformer zu lernen, erhöht sich die Rechen- und Bereitstellungszeit.

So beheben Sie den Fehler 403 der jQuery AJAX-Anfrage So beheben Sie den Fehler 403 der jQuery AJAX-Anfrage Feb 19, 2024 pm 05:55 PM

jQuery ist eine beliebte JavaScript-Bibliothek zur Vereinfachung der clientseitigen Entwicklung. AJAX ist eine Technologie, die asynchrone Anfragen sendet und mit dem Server interagiert, ohne die gesamte Webseite neu zu laden. Wenn Sie jedoch jQuery zum Senden von AJAX-Anfragen verwenden, treten manchmal 403-Fehler auf. Bei 403-Fehlern handelt es sich in der Regel um vom Server verweigerte Zugriffsfehler, möglicherweise aufgrund von Sicherheitsrichtlinien oder Berechtigungsproblemen. In diesem Artikel besprechen wir, wie Sie bei einer jQueryAJAX-Anfrage den Fehler 403 beheben können

PHP und Ajax: Erstellen einer Autovervollständigungs-Vorschlags-Engine PHP und Ajax: Erstellen einer Autovervollständigungs-Vorschlags-Engine Jun 02, 2024 pm 08:39 PM

Erstellen Sie eine Engine für Autovervollständigungsvorschläge mit PHP und Ajax: Serverseitiges Skript: Verarbeitet Ajax-Anfragen und gibt Vorschläge zurück (autocomplete.php). Client-Skript: Ajax-Anfrage senden und Vorschläge anzeigen (autocomplete.js). Praktischer Fall: Fügen Sie ein Skript in die HTML-Seite ein und geben Sie die Kennung des Sucheingabeelements an.

Wie kann das Problem des jQuery AJAX-Fehlers 403 gelöst werden? Wie kann das Problem des jQuery AJAX-Fehlers 403 gelöst werden? Feb 23, 2024 pm 04:27 PM

Wie kann das Problem des jQueryAJAX-Fehlers 403 gelöst werden? Bei der Entwicklung von Webanwendungen wird jQuery häufig zum Senden asynchroner Anfragen verwendet. Allerdings kann bei der Verwendung von jQueryAJAX manchmal der Fehlercode 403 auftreten, der darauf hinweist, dass der Zugriff vom Server verboten ist. Dies wird normalerweise durch serverseitige Sicherheitseinstellungen verursacht, es gibt jedoch Möglichkeiten, das Problem zu beheben. In diesem Artikel wird erläutert, wie Sie das Problem des jQueryAJAX-Fehlers 403 lösen können, und es werden spezifische Codebeispiele bereitgestellt. 1. machen

Wie erhalte ich Variablen aus der PHP-Methode mit Ajax? Wie erhalte ich Variablen aus der PHP-Methode mit Ajax? Mar 09, 2024 pm 05:36 PM

Die Verwendung von Ajax zum Abrufen von Variablen aus PHP-Methoden ist ein häufiges Szenario in der Webentwicklung. Durch Ajax kann die Seite dynamisch abgerufen werden, ohne dass die Daten aktualisiert werden müssen. In diesem Artikel stellen wir vor, wie man Ajax verwendet, um Variablen aus PHP-Methoden abzurufen, und stellen spezifische Codebeispiele bereit. Zuerst müssen wir eine PHP-Datei schreiben, um die Ajax-Anfrage zu verarbeiten und die erforderlichen Variablen zurückzugeben. Hier ist ein Beispielcode für eine einfache PHP-Datei getData.php:

See all articles