<html>
<head>



<script language="JavaScript" src="utility_funktionen.js"></script>
<script language="JavaScript">

// Globales Ajax-Objekt erzeugen
ako = new ErzeugeAJAXObjekt();

//Globales Ajax-Kommunikationsobjekt erzeugen
ahro = ako.erzXMLHttpRequestObject();

// asynchrone Anfrage zum Webserver senden
function send_rechne()
{
   // die Werte der Eingabefelder auf Variablen speichern
   text1=document.getElementById('tf1').value;
   text2=document.getElementById('tf2').value;

   // die Werte der Variablen verschl�sseln (zweifaches encodieren: base64/url)
   // wegen Sonderzeichen ... url    und wegen Sicherheit ... base64
   text1=my_encode(text1); // Definition der Funktion my_encode() in externen Utility-Datei
   text2=my_encode(text2); // Definition der Funktion my_encode() in externen Utility-Datei

   // erforderliche Zusatzdaten f�r den POST-Mechanismus zusammenbauen
   ahro_parameter="text1="+text1+"&text2="+text2;

   // dem Web-Server mitteilen, dass Daten mittels POST-Mechanismus gesendet werden
   // dem Web-Server mitteilen, welche (PHP)-Datei ausgef�hrt werden soll
   ahro.open("POST", "rechne.php", true);

   // notwendige Formalit�ten/Informationen f�r den Webserver
   ahro.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

   // erforderlichen Parameter als ergaenzende Daten an den Web-Server senden
   ahro.send(ahro_parameter);

   // wenn Antwort vom Web-Server kommt, im Browser (Client) die Javascript-Funktion antwort_rechne() aufrufen
   ahro.onreadystatechange=antwort_rechne;

   // Elemente deaktivieren (bis Antwort vom Web-Server kommt)
   document.getElementById('tf1').disabled=true;
   document.getElementById('tf2').disabled=true;
   document.getElementById('knopf').disabled=true;
}

// asynchrone Anwort von Webserver empfangen
function antwort_rechne()
{
   /*
     Nur zur Info:

     ahro.readyState holds the status of the XMLHttpRequest and changes from 0 to 4:

     0: request not initialized
     1: server connection established
     2: request received
     3: processing request
     4: request finished and response is ready
   */

   if (ahro.readyState == 4)
   {
      // Antwort von Web-Server im Element mit der id="ergebnis" anzeigen
      document.getElementById('ergebnis').innerHTML = ahro.responseText;

      // Elemente wieder aktivieren - neue Berechnung kann durchgef�hrt werden
      document.getElementById('tf1').disabled=false;
      document.getElementById('tf2').disabled=false;
      document.getElementById('knopf').disabled=false;
   }
}

function taste(e)
{
  if (e.keyCode == 13) // RETURN-Taste wurde gedr�ckt
  {
     send_rechne();
  }
}

</script>

</head>
<body>
<div style="position:absolute; top:10px; left:20px; width:350; height:100px; background-color:red;">
<h2>Summe</h2>
<form>
1. Wert: <input type="text" id="tf1" size="5" maxlength="10" onKeyPress="taste(event)">
2. Wert: <input type="text" id="tf2" size="5" maxlength="10" onKeyPress="taste(event)">
<input type="button" id="knopf" value="Aktion" onClick="send_rechne()">
</form>
</div>
<div id="ergebnis" style="position:absolute; top:150px; left:120px; width:200px; height:20; background-color:yellow;">
</div>
</body>
</html>