AJAX und PHP Tutorial reines JavaScript mit Beispielvideo
AJAX steht für : "Asynchronous JavaScript and XML "
Mit Hilfe von JavaScript und PHP ist es möglich Serverdaten ohne Neuladen der Webseite anzufordern. Wie das mit reinem JavaScript geht, zeigen wir. Mit jQuery könnte dieses Beispiel wesentlich einfacher umgesetzt werden, siehe: jQuery start
Beispiel
Das hier angeführte Beispiel verwendet keine Bibliothek, sondern reines JavaScript. Bibliotheken, wie AXIOS, beinhalten die hier eingebaute oder eine ähnlich Logik für den Request.
was macht das Beispiel
Wir tippen Buchstaben in ein Formular, bei jedem loslassen der Taste wird der Formularinhalt zum Server geschickt (wird im Video durch das mitloggen der Verbindung durch Firebug veranschaulicht), dieser schickt als Antwort den Text einfach zurück.
Für alle die schon über PHP ein Formular zum Server gesendet haben: das hier gezeigte Beispiel macht nichts anderes als ein Formular zum Server zu schicken und dessen Antwort in einem div-Kontainer anzuzeigen.
die Umsetzung
In dem Beispiel werden 4 Dateien verwendet:
index.html: die eigentliche Webseite mit dem Formular bzw. DIV Kontainer
xmlhttprequestobject.js: Aufruf des Datenanfrageobjektes
send.js: führt die Serveranfrage aus und holt die Antwort des Servers mit Hilfe des Datenanfrageobjektes
server.php: liefert die Serverantwort
das Beispielvideo:
der Inhalt der einzelnen Datein:
index.php
<html>
<head>
<script language="JavaScript" src="xmlhttprequestobject.js"></script>
<script language="JavaScript" src="send.js"></script>
</head>
<body>
<form name="formular">
<TEXTAREA ROWS=5 COLS=100 name="name" type="text" onKeyUp="sndReq()" /></textarea>
</form>
<div id="zeige"></div>
</body>
</html>xmlhttprequestobject.js
function generateXMLHttpReqObj(){
var resObjekt = null;
try {
resObjekt = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(Error){
try {
resObjekt = new ActiveXObject("MSXML2.XMLHTTP");
}
catch(Error){
try {
resObjekt = new XMLHttpRequest();
}
catch(Error){
alert(
"Generating XMLHttpRequest-Obj not possible");
}
}
}
return resObjekt;
}
function generateAJAXObjekt(){
this.generateXMLHttpReqObj = generateXMLHttpReqObj;
}
xx = new generateAJAXObjekt();
resObjekt = xx.generateXMLHttpReqObj();send.js
function sndReq() {
if(document.formular.name.value !=""){
resObjekt.open('post', 'http://localhost/aptana/server.php' ,true);
resObjekt.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
resObjekt.onreadystatechange = handleResponse;
resObjekt.send('name=' + escape(document.formular.name.value));
}
else {
document.getElementById("zeige").style.visibility = "hidden";
}
}
function handleResponse() {
var text="";
document.getElementById("zeige").style.visibility = "visible";
if(resObjekt.readyState == 4){
text=resObjekt.responseText;
document.getElementById("zeige").innerHTML = text;
}
}server.php
<?php
echo "die Serverantwort<br>";
echo $_POST['name'];
?>
({{pro_count}})
{{percentage}} % positiv
({{con_count}})
DANKE für deine Bewertung!
Fragen / Kommentare
(sortiert nach Bewertung / Datum) [alle Kommentare(neueste zuerst)]