Ausführliche Erklärung zur Verwendung von Ajax

AJAX ist eine Technologie zum Datenaustausch mit einem Server, um einen Teil einer Webseite zu aktualisieren , ohne die gesamte Seite neu laden zu müssen. In diesem Artikel werden hauptsächlich die relevanten Kenntnisse zur Verwendung von AJAX vorgestellt.

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 ('Submit-Methode', 'URL-Adresse')

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

3 Ajax-Vorbereitungsstatus und Statuscode

xmlHttp.onreadystatechange = function(){

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

4 Anfrage senden

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

Die Im Folgenden wird der Name des Benutzers asynchron übermittelt (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: <input type="text" name="" id="username">

xx.php

<?php
print_r($_GET);
?>　

1. IE unterstützt kein Chinesisch

2. & sind 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: <input type="text" name="" id="username">

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

3 wird auch mit den Zeichen & und = in der URL verwechselt, daher wird empfohlen, encodeURIComponent() zum Codieren zu verwenden

5 Gleichzeitig mit der POST-Übermittlung kann eine GET-Übermittlung durchgeführt werden um das Problem zu lösen

IE unterstützt Chinesisch = nicht und ist mit den Schlüsselwörtern der angeforderten Zeichenfolge verwechselt

Problem Einfach in js über encodeURIComponent() kodieren .

1. req.responseText: Rufen Sie die zurückgegebene Zeichenfolge ab

2. Rufen Sie die zurückgegebenen Daten gemäß der DOM-Struktur ab

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
  }
}

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung von Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!