<Präsentation>

<p>Über Ajax</p>

Inhalt

• Wofür steht AJAX
• Programmfluss (Diagramm)
• Beispiel
• Anwendungsfälle
• HTTP
• Ein Beispiel mit POST
• Sicherheit
• XMLHttpRequest
• AJAX mit JQuery

AJAX

steht für

Aber es kann jedes Datenformat, nicht nur XML, benutzen

Beispiel

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var demo = document.getElementById("demo");
        demo.innerHTML = this.responseText;
    }
};
xhttp.open("GET", "ajax_demo.php", true);
xhttp.send();
      

Anwendungsfälle

• Warenkorb in Webshops
• Schnelle Suchergebnisse
• Bilder nachladen
• ... unendlich viele Möglichkeiten

HTTP

GET /ajax-info.txt HTTP/1.1
Host: example.com
...

Methoden: GET, POST und theoretisch noch andere

GET wenn erneut ausführbar
POST wenn Daten verändert werden

Ein Beispiel mit POST

var item = document.getElementById("eingabe").value;

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE
            && xhr.status == 200) {
         warenkorb = document.getElementById("warenkorb");
     warenkorb.innerHTML = xhr.responseText;
    }
}
daten = new FormData();
daten.append('item', item);
xhr.open("POST", "warenkorb.php", true);
xhr.send(daten);

Nachteile

Sicherheit

Same Server Policy: Zugriff nur auf den gleichen Server, von dem das HTML ist

Internet Explorer

if (window.XMLHttpRequest) {
    // andere Browser
    xhttp = new XMLHttpRequest();
 } else {
    // IE-Browser bis Version 6
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequest

AJAX mit JQuery

Text in ein Element laden:

$("#div1").load("demo_test.txt");

GET:

$.get("ajax_demo.php", function(daten, status) {
    ...
}); 

POST:

$.post("warenkorb.php", { item: "Kaffee" },
       function(daten, status) {
    ...
});

</Präsentation>

<p>Vielen Dank für Ihre Aufmerksamkeit!</p>