Asynchronous JavaScript and XML

• Konzept der asynchronen Datenübertragung zwischen Browser und Server
• Ermöglicht es, aus einer bereits geladenen HTML-Seite HTTP-Anfragen duchzuführen und die Seite zu verändern, ohne sie komplett neu zu laden

Vor- / Nachteile

Anwendung

const states = ['nicht init.', 'lade', 'geladen', 'interaktiv', 'fertig'];
const http_request = new XMLHttpRequest();

http_request.onreadystatechange = () => {
   alert(states[http_request.readyState]);
};
http_request.open('GET', 'http://domain.de/folder/file.php', true);
http_request.send(null);
// auch wichtig
http_request.responseText // Antwort des Servers als Textstring
http_request.readyState == 4 // fertig
http_request.status == 200 // alles ok

Quelle: AJAX-Einführung

Anwendung

httpRequest.onreadystatechange = () => { alert(":-)"); };
httpRequest.open('POST', url);
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send('userName=' + encodeURIComponent(userName));

// andere Funktionen
httpRequest.open(method, url, async, user, password);
httpRequest.withCredentials = true // Cookies oder Auth-Infos mitschicken
httpRequest.abort();
httpRequest.setRequestHeader(name, value);
httpRequest.getResponseHeader(name);
httpRequest.getAllResponseHeaders();

Quelle: AJAX-Einführung

SOP

• Same-Origin-Policy
• Sicherheitskonzept, das beispielsweise JavaScript und CSS untersagt, auf Objekte zuzugreifen, die von einer anderen Webseite (Origin) stammen
• Origin: Kombination aus Protokoll, Domain und Port
• Stellt ein wesentliches Sicherheitselement in allen modernen Browsern zum Schutz vor Angriffen dar

JSONP

• JSON mit Padding
• Übertragung von (JSON-)Daten über Domaingrenzen hinweg
• Sicherheitsrisiko, da beliebige Inhalte übermittelt werden können
• Bei strikter REST-Umsetzung nur lesender Zugriff möglich

JSONP

function callMe(text) {
   alert("Dateiinhalt: " + text);
   // andernfalls JSON.parse(text);
}

var script = document.createElement("script");
script.src = "/path/to/my.js";
document.body.appendChild(script);

// my.js
callMe("Lorem ipsum dolor sit amet");

CORS

• Cross-Origin Resource Sharing
• Mechanismus, um Webbrowsern Cross-Origin-Requests zu ermöglichen
• Wird durch speziellen HTTP-Header vom Server gestattet
• Mit XHR 2 möglich

Access-Control-Allow-Origin: http://example.de

Access-Control-Expose-Headers: X-Custom-Header, X-Another-Header
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: HEAD, PUT, DELETE

Successor: fetch

fetch('/some/url')
  .then(response => {
     // success
  }).catch(err => {
     // something went wrong
  });

Quelle: deanhume.com

fetch

async function getUser() {
  try {
    const response = await fetch('https://api.example.com/user/1');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching user:', error);
  }
}

fetch

async function createPost(title, content) {
  try {
    const response = await fetch('https://api.example.com/posts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title, content })
    });
    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error creating post:', error);
    throw error;
  }
}

Links

• json.org
• jQuery.ajax()
• apigee.com