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!


veröffentlicht am 22.08.2012 von Bernhard
geändert am 27.07.2020 von Bernhard



Kommentare


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

✍anonym
erstellt am 18.08.2012 08:08
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
erstellt am 20.05.2011 14:05
User: miki 
sehr schöne arbeit!!!
  

✍anonym
erstellt am 31.03.2010 12:03
User: MK 
Danke!

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Mehr Details