4 Schritte, um Ihnen den Umgang mit AJAX beizubringen

AJAX steht für „Asynchronous Javascript And XML“ (Asynchronous JavaScript and XML) und bezeichnet eine Webentwicklungstechnologie zur Erstellung interaktiver Webanwendungen.

AJAX = Asynchrones JavaScript und XML (eine Teilmenge der Standard Universal Markup Language).

AJAX ist eine Technologie zur Erstellung schneller, dynamischer Webseiten.

AJAX ist eine Technologie, die Teile einer Webseite aktualisieren kann, ohne die gesamte Seite neu laden zu müssen. [1]

Durch den Austausch einer kleinen Datenmenge mit dem Server im Hintergrund kann AJAX asynchrone Aktualisierungen von Webseiten ermöglichen. Das bedeutet, dass Teile einer Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.

Herkömmliche Webseiten (die kein AJAX verwenden) müssen die gesamte Webseite neu laden, wenn der Inhalt aktualisiert werden muss.

Dieser Artikel stellt hauptsächlich das relevante Wissen über die Verwendung von AJAX vor.

AJAX ist eine asynchrone Übertragung, die teilweise Aktualisierung ist sehr praktisch und hat viele Verwendungsmöglichkeiten!

Zuerst gibt es 4 Schritte zur Verwendung von AJAX:

1. Erstellen Sie ein AJAX-Objekt

var xmlHttp = new XMLHttpRequest();

2. Stellen Sie eine Verbindung her („Übermittlungsmethode“, „URL-Adresse“)

xmlHttp.open('get','./AJAX_XML.xml');

3. Bestimmen Sie den Ajax-Vorbereitungsstatus und den Statuscode

xmlHttp.onreadystatechange = function(){

    if (xmlHttp.readyState==4 && xmlHttp.status==200) {
  }
}

4. Senden Sie eine Anfrage

xmlHttp.send(null);    //get方式参数为null,post方式，参数为提交的参数

Das Folgende übermittelt den Benutzernamen asynchron (nach Eingabe des Benutzernamens wird der Hintergrund asynchron beurteilt und die Rezeption fragt sofort, ob er registriert wurde. Es wird beurteilt, wenn keine Übermittlung erforderlich ist!)

Mit der GET-Methode senden

xx.html

<script type="text/javascript">
window.onload=function(){
  document.getElementById(&#39;username&#39;).onblur=function(){
    var name=document.getElementById(&#39;username&#39;).value;
    var req=new XMLHttpRequest();
    req.open(&#39;get&#39;,&#39;4-demo.php?name=&#39;+name);
    req.onreadystatechange=function(){
      if(req.readyState==4 && req.status==200){
        alert(req.responseText);
      }
    }
    req.send(null);  //如果send()方法中没有数据，要写null
  }
}
</script>

Benutzername: 5a4b8d0a5ff6b1d7cda32164f687201c

xx.php

<?php
print_r($_GET);
?>　

1. IE unterstützt kein Chinesisch

2 , =, & werden mit den Schlüsselwörtern der angeforderten Zeichenfolge verwechselt.

POST-Einreichung

xx.html

<script type="text/javascript">
window.onload=function(){
  document.getElementById(&#39;username&#39;).onblur=function(){
    var name=document.getElementById(&#39;username&#39;).value;
    name=encodeURIComponent(name);
    var req=new XMLHttpRequest();
    req.open(&#39;post&#39;,&#39;5-demo.php?age=&#39;+20);
    req.onreadystatechange=function(){
      if(req.readyState==4 && req.status==200){
        alert(req.responseText);
      }
    }
  req.setRequestHeader(&#39;Content-Type&#39;,&#39;application/x-www-form-urlencoded&#39;);
    req.send(&#39;name=&#39;+name);  
  }
}
</script>

Benutzername: 5a4b8d0a5ff6b1d7cda32164f687201c

xx.php

<?php
print_r($_POST);
print_r($_GET);
?>

1. Daten über send() senden

2. SetRequestHeader() muss so eingestellt sein, dass die übergebenen Parameter in das XML-Format konvertiert werden können

3 Senden Sie Chinesisch direkt ohne Transkodierung

4 Die Zeichen in der Post-Anfrage werden auch mit den Zeichen & und = in der URL verwechselt, daher wird empfohlen, die Kodierung encodeURIComponent() zu verwenden

5 , gleichzeitig mit der POST-Übermittlung kann eine GET-Übermittlung durchgeführt werden

Lösen IE unterstützt kein Chinesisch = und ist mit den Schlüsselwörtern der angeforderten Zeichenfolge verwechselt Problem

Kodieren Sie einfach in js über encodeURIComponent().

window.onload=function(){
  document.getElementById('username').onblur=function(){
    var name=document.getElementById('username').value;
    name=encodeURIComponent(name);  //编码
    var req=new XMLHttpRequest();
    req.open('get','4-demo.php?name='+name);
    req.onreadystatechange=function(){
      if(req.readyState==4 && req.status==200){
        alert(req.responseText);
      }
    }
    req.send(null);  //如果send()方法中没有数据，要写null
  }
}

1. req.responseText: Holen Sie sich den zurückgegebenen String

2. req.responseXML: Holen Sie sich den zurückgegebenen String entsprechend DOM-Struktur Daten

Achten Sie auf den Unterschied zwischen den Post-/Get-Übermittlungsmethoden!

Das obige ist der detaillierte Inhalt von4 Schritte, um Ihnen den Umgang mit AJAX beizubringen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!