top Themen
|
AJAX und PHP Tutorial mit Beispielvideo |
Beispiel: Inhalte mittels Post zum Server schicken, und ohne Neuladen der Seite, in die bestehende Seite nachladen. AJAX
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 geht, zeigen wir in einem einfachen Beispiel:
Bespiel:
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.
im 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: |
Für alle die da jetzt nich mitgekommen sind: am Besten einfach mal den Quellcode anschauen:
index.htm
<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>
index.html Größe:(0.33 kB): Download
xmlhttprequestobject.js:
diese Datei wird zum universellen (für alle Browser gültigen) Aufruf des Datenanfrageobjektes verwendet. (Damit ein Datenaustausch zwischen Client und Server stattfinden kann, ohne die Seite neu laden zu müssen)
diese JavaScript-Datei muss nicht angepasst werden und kann für alle möglichen AJAX-Applikationen verwendet werden. Sie macht nichts anderes als ein gültiges HttpRequestObjekt für den jeweiligen Browser zur Verfügung zu stellen.
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();
xmlhttprequestobject.js Größe:(0.57 kB): Download
send.js
die Datei für den Sendrequest:
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;
}
}
send.js Größe:(0.64 kB): Download
die Serverseite: server.php
(muss natürlich auf einem PHPfähigen Server liegen z.B. WAMP. der Pfad zum Server muss in der send.js eingetragen werden)
<?php
echo "die Serverantwort:<br>";
echo $_POST['name'];
?> |
|
Kommentare zu diesem Beitrag:zu diesem Thema wurde noch kein Feedback geschrieben! Vielleicht faellt dir etwas zu diesem Thema ein??! Kommentar abgeben: (kein lästiges anmelden, einfach posten!)
|
neue Themen
Stichwortsuche auf dieser Seite:
|
