Webentwicklung - Webarchitekturen

Dipl.-Inform. Thomas Ziemer

Webarchitektur (Frontend und Backend)

JSON

Die JSON-Syntax wurde von der JavaScript Object Notation abgeleitet, also derjenigen Notation, mittels der man auf JavaScript-Objekte zugreift:

• JSON ist eine Syntax zum Speichern und Austauschen von Daten
• JSON ist Text im gewohnten Format der JavaScript Object Notation:
  • Daten sind Schlüssel-/Werte-Paare
  • Daten werden durch Kommata voneinander getrennt
  • Geschweifte Klammern umschließen Objekte
  • Eckige Klammern umschließen Arrays

JavaScript Object Notation

var person = {
  "name": "John", // Strings erfordern doppelte Anführungszeichen!
  "age": 30,
  "rich": true,
  "cars": { // ein Objekt
    "car1": "BMW",
    "car2": "Audi"
  }
}

var person = {
  "name": "John",
  "age": 30,
  "rich": true, 
  "cars": ["BMW", "Audi"] // ein Array
}

JSON-Typen

Um in ein JSON-Objekt umgewandelt werden zu können, müssen die Werte eines JavaScript-Objekts einen der folgenden Typen besitzen:

• String
• Zahl
• ein JavaScript-Objekt
• ein Array
• Boolean
• null
• kein Datum

JSON-Elementzugriff (lesend)

var person = {
  "name": "John",
  "age": 30,
  "rich": true,
  "address": {
    "street": "Oxford Street",
    "city": "London"
  },
  "cars": ["BMW", "Audi"]
}

var name = person.name; oder var name = person["name"];
var street = person.address.street;

JSON-Elementzugriff (schreibend)

var person = {
  "name": "John",
  "age": 30,
  "rich": true,
  "address": {
    "street": "Oxford Street",
    "city": "London"
  },
  "cars": ["BMW", "Audi"]
}

person.name = "Jane"; oder person["name"] = "Jane";
delete person.name; // der delete-Operator löscht Objekt-Eigenschaften

JSON-Elementzugriffe (Array)

var person = {
  "name": "John",
  "age": 30,
  "rich": true,
  "address": {
    "street": "Oxford Street",
    "city": "London"
  },
  "cars": ["BMW", "Audi"]
}

var car = person.cars[0];
person.cars[1] = "Mercedes";

JSON-Elementzugriffe (Array iterierend)

var person = {
  "name": "John",
  "rich": true,
  "address": {
    "street": "Oxford Street",
    "city": "London"
  },
  "cars": ["BMW", "Audi"]
}

// Autos iterieren und in HTML-Element schreiben
var carsListRef = document.getElementById("cars");
for (i in person.cars) {
  carsListRef.innerHTML += person.cars[i] + " ";
}

JSON-Typumwandlung (sozusagen type casting)

Es wird in JavaScript mittels Methoden der JSON-Klasse zwischen JavaScript- und JSON-Objekten hin und her konvertiert:

var jsObject = JSON.parse(jsonObject);
var jsonObject = JSON.stringify(jsObject);

Die stringify()-Methode kann auch mit JavaScript-Arrays umgehen:

var jsArray = ["John", "Peter", "Sally", "Jane"];
var jsonArray = JSON.stringify(jsArray);

Datum als JSON-Eigenschaft (JSON → JS)

Der Datumstyp wird in einem JSON-Objekt nicht unterstützt.
Datumswerte müssen deshalb als String repräsentiert werden:

var jsonObject = '{"name": "Jane", "birth": "1969-01-04"}';

var jsObject = JSON.parse(jsonObject);
jsObject.birth = new Date(jsObject.birth);

Hier erkennt man deutlich, dass JavaScript alles andere ist, aber keine typsichere Sprache!

Datum als JSON-Eigenschaft (JS → JSON)

Die Methode JSON.stringify() konvertiert Datumswerte in einem JavaScript-Objekt automatisch in JSON-Strings:

var jsObject = {"name": "Jane", "today": new Date()};
var jsonObject = JSON.stringify(jsObject );

JavaScript-Funktionen sind in JSON-Objekten übrigens ebenfalls nicht erlaubt. Die stringify()-Methode ignoriert diese bei der Konvertierung eines JavaScript-Objekts.

reviver-Parameter in JSON

Der reviver-Parameter der parse()-Methode ist eine Funktion, die jede JSON-Eigenschaft prüft, und bei Bedarf eine Konvertierung des danach zurückgelieferten Wertes vornehmen kann:

var jsonObject = '{"name": "Jane", "birth": "1969-01-04"}';

var jsObject = JSON.parse(jsonObject, function(key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});

Webarchitektur (Frontend-Backend-Schnittstelle)

REST-Zugriff mittels JavaScript

var xmlHttpRequest = new XMLHttpRequest();
var url = "https://host/rest/api/v1/aRestMethod/" + aParam;

// XMLHttpRequest.open(method, url[, async][, user][, password])
xmlHttpRequest.open("POST", url);
xmlHttpRequest.setRequestHeader("Content-type", "application/json");
xmlHttpRequest.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    var jsResponseObject = JSON.parse(this.responseText);
    …
  }
};

// XMLHttpRequest.send([body]);
xmlHttpRequest.send(JSON.stringify(jsRequestObject));

REST-Zugriff mittels JavaScript (readyState)

REST-Zugriff auslösen (event-getriggert)

HTML-Code:

<html>
  <body>
    <a onclick="saveProject();">Projekt speichern</a>
  </body>
</html>

JavaScript-Code (der korrespondierende Event-Listener):

function saveProject() {
  var xmlHttpSaveProject = new XMLHttpRequest();
  …  
}

Andere JavaScript-Events nutzen

Es gibt viele JavaScript-Events (hier finden Sie mehr), mit deren Hilfe man eine Funktionalität auslösen kann:

• Wenn die Maus geklickt wurde (onmousedown, onmouseup, onclick)
• Wenn eine Webseite, ein Bild etc. geladen wurde (onload, onunload)
• Wenn die Maus über ein HTML-Element bewegt wurde (onmouseover, onmouseout)
• Wenn ein Eingabefeld verändert wurde (onchange)
• Wenn ein HTML-Formular übertragen wurde (onsubmit)
• Wenn eine Taste gedrückt wurde (onkeydown)

REST-Zugriff auslösen (timer-/event-getriggert)

// Event feuert nach 5.000 Millisekunden
var autoSaveEvent = setTimeout(saveProject, 5000);

function saveProject() {
  var xmlHttpSaveProject = new XMLHttpRequest();
  …  
}

Mit der Methode setInterval(function, milliseconds) kann man einen regelmäßigen Timer erstellen.
Die Methoden clearTimeout(timeoutVariable) bzw.
clearInterval(timerVariable) beenden einen Event bzw. Timer.

Document Object Model (DOM)

HTML-Dokument

<html>
  <head>
    <title>Document Object Model</title>
  </head>
  <body>
    <h1>Beispiel</h1>
    <p>Das ist ein <a href="demo.html">einfaches</a> Beispiel.</p>
    <!-- Dies ist ein Kommentar. -->
  </body>
</html>

Document Object Model

└─ html
   ├─ head
   │ ├─ #text: ↵
   │ ├─ title
   │ │  └─ #text: DOM
   │ └─ #text: ↵
   ├─ #text: ↵
   └─ body
      ├─ #text: ↵
      ├─ h1
      │  └─ #text: Document Object Model
      ├─ #text: ↵
      ├─ p
      │  ├─ #text: Das ist ein
      │  ├─ a href="demo.html"
      │  │  └─ #text: einfaches
      │  └─ #text: Beispiel.
      ├─ #text: ↵
      ├─ #comment: Dies ist ein Kommentar.
      └─ #text:

Document Object Model

Quelle:
wiki.selfhtml.org/wiki/JavaScript/DOM

DOM-Manipulation

Das Document Object Model ist nicht statisch, sondern kann durch DOM-Manipulation ausgelesen, verändert und erweitert werden:

DOM-Manipulation

Das document-Objekt in JavaScript hält darüber hinaus verschiedene Collections mit den Referenzen von HTML-Elementen bestimmter Typen:

• document.forms mit allen HTML-Formularen (<form>-Elementen)
• document.images mit allen Bildern (<img>-Elementen)
• document.links mit allen Hyperlinks (<a>-Elementen)

DOM-Manipulation

DOM-Manipulation

DOM-Element können ausgelesen und verändert werden:

• element.innerText = "Hello world!" spricht einen Textknoten an,
• element.innerHTML = "<strong>Huhu</strong>" einen Elementknoten,
• element.style.color = "red" das CSS des Elementknotens.

Local Storage

Mittels Local Storage aus dem Web Storage API werden Schlüssel-/Wertpaare persistent (dauerhaft) im Browser abgelegt:

• War ursprünglich für HTML5 vorgesehen, bekam dann aber eigene W3C-Spezifikation
• Werte können von allen JavaScripts derselben Domäne geschrieben und gelesen werden
• Mittels localStorage.setItem("key", "value") einen Wert schreiben
• Mittels localStorage.getItem("key") einen Wert lesen
• Mittels localStorage.removeItem("key") Wert löschen
• Mittels localStorage.clear() alle Werte der Domäne löschen

Session Storage vs. Local Storage

WebSockets

WebSockets

WebSockets helfen, das klassische MVC-Konzept in Web-Applikationen zu realisieren. Zuvor musste mit asynchronem Polling (MVC Model 2) "geschummelt" werden. Nunmehr lässt sich realisieren:

• Bidirektionale Full-Duplex-Verbindung zwischen Browser und Server
• Ermöglicht (auch) Push-Mitteilungen vom Server zum Browser
• Läuft mittels TCP über den normalen HTTP- (80 oder 8080) bzw. HTTPS-Port (443)
• Müssen sowohl im Browser als auch im Backend realisiert werden
• Callback-Methoden werden automatisch aufgerufen

WebSockets

var url = "ws://localhost:8080/swxercise/ws/api/v1/anEndpoint";
var webSocket = new WebSocket(url);
 
// Callback-Methoden für die WebSocket-Kommunikation
webSocket.onopen =    function(e) { onWebSocketOpen(e) };
webSocket.onclose =   function(e) { onWebSocketClose(e) };
webSocket.onmessage = function(e) { onWebSocketMessage(e) };
webSocket.onerror =   function(e) { onWebSocketError(e) };

function onWebSocketMessage(e) {
   var data = JSON.parse(e.data);
}
function sendMessage(message) {
   if (webSocket.readyState === 1)
      webSocket.send(message);
}

WebSockets (readyState)

WebSockets

Eine WebSocket-Verbindung wird durch die Methode
webSocket.close([code,] [reason]) geschlossen.

Mit code kann ein optionaler Statuscode angegeben werden. Standardmäßig wird 1000 (Normal Closure) übertragen.

Mittels optionalem reason kann der Grund angegeben werden, aus dem die WebSocket-Verbindung geschlossen wird (maximal 123 Bytes of UTF-8 Text).

Weitere Statuscodes sind hier dokumentiert.

WebSocket-Sicherheitsmodell

• WebSocket-Anforderung aus verschlüsselter Webseite muss mittels wss:// erfolgen
• WebSocket-Anforderung aus unverschlüsselter Webseite muss mittels ws:// erfolgen
• Möglicherweise gibt es Workarounds für einzelne Browsers:
  • "Chrome used to have an Allow insecure WebSocket from https origin option, but that was intentionally removed a couple of years ago." [stackoverflow]

WebSocket-Handshaking

Puh, fertig!

Nächster Foliensatz...