AJAX

Teil 1

Was bedeutet AJAX?

Ajax [ˈeidʒæks] (auch AJAX; Apronym von engl. Asynchronous JavaScript and XML) bezeichnet ein Konzept der asynchronen Datenübertragung zwischen einem Browser und dem Server.

XML

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<verzeichnis>
     <titel>Wikipedia Städteverzeichnis</titel>
     <eintrag>
          <stichwort>Genf</stichwort>
          <eintragstext>Genf ist der Sitz von ...</eintragstext>
     </eintrag>
     <eintrag>
          <stichwort>Köln</stichwort>
          <eintragstext>Köln ist eine Stadt, die ...</eintragstext>
     </eintrag>
</verzeichnis>

AJAX History

Ursprünglich von Microsoft entwickelt als ActiveX plugin für Internet Explorer 5 (1999)
XML wurde als Sprache für die Übermittlung vorgesehen, wird aber heute kaum mehr verwendet
Es geht eigentlich nur über die asynchrone Übermittlung von Daten

XMLHttpRequest

API wurde von Microsoft entwickelt im Zusammenhang mit AJAX und Internet Explorer 5 (1999)
Obwohl es keine Rolle spielt welche Daten geladen werden, beinhaltet der API Name das Wort XML
Sehr veraltete API und mühsam zu implementieren

var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET', 'meine-daten.xml', true);

Asynchronous JavaScript and XML

Fetch API

The 2015 Way of Doing Things

fetch('data.json').then(function(response) { 
  return response.json();
}).then(function(data) {
  console.log(data); 
});

Node.js

https://nodejs.org

First Node.js Application

console.log('Hello World');

Wait... That seems familiar!

Let's build a server!

https://github.com/saezh/sae-json-server

Country List

http://localhost:9009/countries?q=switz

Anhand q kann die Länderliste gefiltert werden

JSBins

http://jsbin.com/qezegax/1/edit