(3)
Artikel
bewerten
(86% positiv)
(18)

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 mit reinem JavaScript geht, zeigen wir. Mit jQuery könnte dieses Beispiel wesentlich einfacher umgesetzt werden, siehe:  jQuery start 

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.

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:

 

 

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'];
?>
letzte Änderung dieses Artikels: 28.12.2014 13:07




Kommentare