Lehmann Enrico

Dynamische Website mit Ajax/JSON

Im folgenden beschreibe ich die Möglichkeit, wie Daten zwischen Server und Client auf Basis von reinem Javascript und JQuery ausgetauscht werden können ohne ein erneutes Aufrufen der Website zu provozieren. Dies ist z.B. notwendig bei Fomularen, deren Auswahlboxen erst nach einer Benutzereingaben spezifisch mit weiteren Daten aus einer Datenbank befüllt werden.

Die Daten werden vom Client per POST-Request an den Server vermittelt, dort reagiert ein PHP-Script auf die Anfrage und generiert ein JSON-Array, dieses wird Clientseitig empfangen und weiterverarbeitet. Statt JSON wäre auch eine reine Textantwort möglich.

Ich verwende diese Technik z.B. beim Geochecker meiner Rätsel an, die Anwort wird zusammen mit den Cachenamen gesendet, auf dem Server per PHP auf Richtigkeit geprüft, und ein 'Falsch' oder 'Richtig' sowie die Gesamtzähler zurückübermittelt bzw. auf den Server gespeichert.

Ajax per JQuery

JQuery ist fast überall von Hause aus dabei und bietet eine Funktion für unseren Zweck an. Die Funktion Request() könnte hierbei durch ein Click- oder Change-Event ausgelöst werden. In dem Falle entspricht der Aufruf folgender URL als POST-Request: getdata.php?name=xxxx&pass=xxxx

Die Anwort würde unterhalb der ID 'Ausgabe' in die Bereiche mit der jeweiligen Klasse als Text ausgegeben werden.

Request({
  'name': $('input.name').val(),
  'pass': $('input.pass').val()
});

function Request(post) {
  $.ajax({
    url: 'getdata.php',
    type: 'post',
    data: post,
    dataType: 'json',
    success: function(data) {
      $('#ausgabe .ort').html(data[0].ort);
      $('#ausgabe .plz').html(data[0].plz);
      $('#ausgabe .str').html(data[0].str);
    },
    error: function(xhr, desc, err) {
      console.log(xhr);
      console.log("Details: " + desc + "\nError:" + err);
    }
  });
}

Ajax per Javascript

Request(
  'name=' + form.name.value +
  '&pass=' + form.pass.value
);

function Request(send) {
  var data,
      xmlhttp = (window.XMLHttpRequest)
              ? new XMLHttpRequest()
              : new ActiveXObject("Microsoft.XMLHTTP");

  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      data = JSON.parse(xmlhttp.responseText);
      //...
      //ort = data.ort;
      //plz = data.plz;
      //str = data.str;
    } else {
      console.log("Error", xmlhttp.statusText);
    }
  }
  xmlhttp.open('POST','getdata.php',true);
  xmlhttp.setRequestHeader(
    'Content-type',
    'application/x-www-form-urlencoded'
  );
  xmlhttp.send(send);
}