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'];
?>
positive Bewertung({{pro_count}})
Beitrag bewerten:
{{percentage}} % positiv
negative Bewertung({{con_count}})

DANKE für deine Bewertung!

Fragen / Kommentare


(sortiert nach Bewertung / Datum) [alle Kommentare(neueste zuerst)]

✍anonym
18.08.2012 06:56
User: nur_so 
Ich würde das XMLHttpRequest im Case nach vorn setzen, da neuere IE dies auch beherrschen ,so jedoch das langsamere ActivX verwenden.

✍anonym
20.05.2011 12:47
User: miki 
sehr schöne arbeit!!!
  

✍anonym
31.03.2010 10:24
User: MK 
Danke!