AJAX Beispiel

<html>
<head>
<script>
function submitForm()
{
  var req = null;
  if(window.XMLHttpRequest) req = new XMLHttpRequest();
  else
    if (window.ActiveXObject)  req = new ActiveXObject(Microsoft.XMLHTTP);

  req.onreadystatechange = function()
  {
    if(req.readyState == 4)
    {
       if(req.status == 200)
           document.ajax.dyn="Received:" + req.responseText;
       else
           document.ajax.dyn="Error code " + req.status;
  };
  req.open( GET", "data.xml", true);
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  req.send(null);
}
</script>
</head>

<body>
<FORM method="POST" name="ajax" action="">
   <INPUT type="BUTTON" value="Submit" ONCLICK="submitForm()">
<INPUT type="text" name="dyn" value="">
</FORM>
</body>
</html>

Comments on the code:

new ActiveXObject(Microsoft.XMLHTTP)

This constructor is only for Internet Explorer.

new XMLHttpRequest()

This constructor is only for any other browser including Firefox.

http.onreadystatechange

An anonymous function is assigned to the event indicators

http.readyState == 4

The 4 state means for the response is ready to send and sent by the server

http.status == 200

This status means ok, otherwise some errors code is returned, 404 for example.

http.open( "POST", "data.xml", true);

POST or GET
URL of the scripts to execute.
true for asynchronous .

http.setRequestHeader("Content-Type", "applications/x-www-form-urlencoded");

This is for POST method only.

http.send(document.getElementById("TYPEDTEXT").value);

Sends data to the server. Data comes from the "TYPEDTEXT" variable filled throught the form by the user.

2) Von XML erhalten

Um Daten von einer XML Akte müssen uns zu erhalten diese Linie ersetzen:

document.ajax.dyn=""Received:" + req.responseText;

durch diesen Code

var doc = req.responseXML; // assign the XML file to a var
var element = doc.getElementsByTagName('root').item(0); // read the first element with a dom's method
document.ajax.dyn.value= element.firstChild.data; // assign the content of the element to the form

3) Schreiben dem Körper

In diesem Beispiel wird der gelesene Text in den Körper der Seite und nicht in ein textfield eingesetzt. Der Code folgend ersetzt den textfield Formgegenstand und das zweite Teil ersetzt die Anweisung in die Javascriptfunktion.

<div id="zone">
... some text to replace ...
</div>

document.getElementById("zone").innerHTML = "Received:" + req.responseText;

4) Einen Text bekanntgeben

In diesem Beispiel wird ein Text zum Bediener geschickt und wird zu einer Akte geschrieben. Der Anruf zur „geöffneten“ Methode ändert, ist das Argument PFOSTEN-Methode, und Methode „senden“ hat auch jetzt einen Wert für Argument.

req.open("POST", "ajax-post.xml", true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(document.getElementById("dyn").value);