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​

AJAX - Teil 1

By Gion Kunz

Made with Slides.com

AJAX - Teil 1

  • 2,987

More from Gion Kunz