AJAX Beispiel - PHP code per JavaScript ausführen

Update: Dienstag, 19. März

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: