DOM-Manipulation JavaScript - Praxistutorial 2 - Anfrage starten

1. Die Abschnitte

• Einführung
• Die Initialisierung
• Anfrage vorbereiten
• Daten zusammenstellen
• Anfrage senden
• Der PHP-Code
• Das Ergebnis auswerten
• Die select-Felder manipulieren
• Die Ergebnisse ausgeben
• Die Links generieren
• Noch eine Anfrage
• Inhalte einfügen
• Ein paar Anmerkungen

2. Die Hauptmethode prepareRequest

Damit werden wir die gesamte Anwendung steuern. Und damit sie außerhalb der "Klasse" ajaxTut aufgerufen werden kann, muss sie mit this als öffentlich deklariert werden. Ich hab das natürlich beim Schreiben dieses Tutorials vergessen und mich eine Ewigkeit gewundert, warum ständig ein Fehler ausgeworfen wurde. Ach ja, wundert euch nicht über den zweiten Parameter, den brauchen wir erst später.

function ajaxTut (fields)
{
  this.prepareRequest = function(art, id)
  {
    str = '';
  }
}

Und schon haben wir wieder etwas über JavaScript gelernt. Wenn man eine Methode mit nur einem Parameter aufruft, die aber zwei vorgegeben hat, so führt das nicht zu einem Fehler wie in anderen Sprachen. Eh ich es vergesse. In der Variable str speichern wir uns die Inhalte, die wir dem PHP-Script später übergeben. Und da die sich jedes Mal ändern, "leeren" wir zu Beginn diese Variable. Außerdem lassen wir das var weg, damit auch die anderen Methoden darauf zugreifen können.

3. Fehlerbehandlung

Da bei einem Ajax-Request immer mal was schief gehen kann, bauen wir uns eine zugegebenermaßen sehr einfache Fehlerbehandlung ein. Und alles, was nun folgt, kommt in den try-Block.

this.prepareRequest = function(art, id)
{
  ...
  try
  {
    
  }
  catch (exp)
  {
    alert ('Fehler: Request nicht möglich! siehe ' + exp);
  }
}

Sollte also aus irgendeinem Grund etwas schief gehen, so wird ein Hinweis plus die Fehlermeldung als alert-Box ausgeben und wir wissen, woran wir sind.

4. Das Ajax-Objekt erzeugen

Hier kommt der erste feine Unterschied bezüglich der Implementierung in die einzelnen Browser. Der Internet Explorer 6 benötigt dafür ein ActiveX-Control, bei anderen wird ein so genannter XMLHttpRequest eingesetzt. Ach ja, der Internet Explorer 7 bis 9 beherrscht beide Varianten. Wer also den 6er nicht mehr unterstützt, kann auf die Bedingung getrost verzichten.

try
{
  if ('undefined' != typeof XMLHttpRequest)
  {
    ajax_obj = new XMLHttpRequest();
  }
  else
  {
    ajax_obj = new ActiveXObject("Microsoft.XMLHTTP");
  }
}

weiter zum nächsten Abschnitt