AJAX Beispiel - PHP code per JavaScript ausführen

Update: Freitag, 27. September

Home / TECHNIK / Programmierung

Moderne Webseiten benötigen häufig eine Möglichkeit, um ein server-seitiges Programm, z.B. ein PHP-Script, im Hintergrund auszuführen, ohne dass der Besucher viel davon merkt bzw. auf die Verarbeitung warten muss. Das lässt sich üblicherweise mit Hilfe von JavaScript / AJAX realisieren.

Hier ist ein simples Beispiel für AJAX mit HTML/JavaScript und PHP:

 

HTML-Seite:

<!DOCTYPE html>
<html lang="de">
<body>
<h1>AJAX Test</h1>
<form id="MyForm" name="MyForm">
  <label>Your Value: <input name="MyName" id="MyID" value="YourValue" /></label>
  <p><button type="button" onclick="CallPhpScript()">Call PHP-Script</button></p>
</form>
<div id="GenResult">
  <br>
</div>
<script>
function CallPhpScript()
{
  var xhttp;
  try {
    xhttp = new XMLHttpRequest();
  } catch (e) {
    try {
      xhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        return;
      }
    }
  } 
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("GenResult").innerHTML = this.responseText + "<br>";
    }
  };
  xhttp.open("POST", "ajax.php");
  formData = new FormData(MyForm);
  formData.append("Eins", 1); // add some extra post variables
  formData.append("Zwei", 2);
  formData.append("Drei", "Drei");
  xhttp.send(formData);
}
</script> 
</body>
</html>

 

PHP-Script:

<html>
<h1>Result form PHP-Script (post variables):</h1>
<table cellpadding="3" border="1">
<?php 
  foreach ($_POST as $key => $value) {
    echo '<tr><td>';
    echo $key . ':';
    echo '</td><td>';
    echo $value;
    echo '</td></tr>';
  }
?>
</table>
</html>

Die beiden Beispiel-Dateien stehen auch als Download zur Verfügung. 

Hast du Anmerkungen zu diesem AJAX-Beispiel? Verbesserungen? Schreibe doch einen Kommentar.

Kommentare 0

 

Neuen Kommentar schreiben: