Wofür steht AJAX?
Asynchronus
Java Script
And
Xml
AJAX ist die Kombination verschiedenster Techniken
bsp. HTML, JavaScript und PHP
Java Script
And
Xml
AJAX ist die Kombination verschiedenster Techniken
bsp. HTML, JavaScript und PHP
Was passiert wenn JavaScript abläuft?
Läuft JavaScript ab, ist der Browser blockiert.
-> Kann man mit Asynchronus umgehen
-> Kann man mit Asynchronus umgehen
HTML + CSS + JavaScript?
HTML = Hypertext Markup Language
Textbasierte Auszeichnungssprache zur Strukturierung digitaler Dokumente wie Texte mit Hyperlinks, Bildern und anderen Inhalten
CSS = Cascading Style Sheets
CSS ist für das Design von Websites zuständig
JavaScript = Skriptsprache, ursprünglich für dynamisches HTML in Webbrowsern entwickelt, um Benutzerinteraktionen auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren und so die Möglichkeiten von HTML und CSS zu erweitern. Heute findet JavaScript auch außerhalb von Browsern Anwendung, so etwa auf Servern und in Microcontrollern.
Textbasierte Auszeichnungssprache zur Strukturierung digitaler Dokumente wie Texte mit Hyperlinks, Bildern und anderen Inhalten
CSS = Cascading Style Sheets
CSS ist für das Design von Websites zuständig
JavaScript = Skriptsprache, ursprünglich für dynamisches HTML in Webbrowsern entwickelt, um Benutzerinteraktionen auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren und so die Möglichkeiten von HTML und CSS zu erweitern. Heute findet JavaScript auch außerhalb von Browsern Anwendung, so etwa auf Servern und in Microcontrollern.
XmlHttpRequest?
XmlHttpRequest (XHR)= Programmierschnittstelle für JavaScript zum Übertragen von Daten über das HTTP-Protokoll. XMLHttpRequest bildet einen Grundbaustein der Ajax-Technik.
XML + JSON?
XML = Extensible Markup Language = KEINE Sprache!
Auszeichnungssprache zur Darstellung hierarchisch strukturierter Daten in Form von Textdateien. / Möglichkeit in einer einfachen Textdatei Daten zu strukturieren
schlankes Datenaustauschformat, das für Menschen einfach zu lesen und zu schreiben und für Maschinen einfach zu parsen (Analysieren von Datenstrukturen) und zu generieren ist
(gleich wie JSON -> JavaScript Object Notation)
Auszeichnungssprache zur Darstellung hierarchisch strukturierter Daten in Form von Textdateien. / Möglichkeit in einer einfachen Textdatei Daten zu strukturieren
schlankes Datenaustauschformat, das für Menschen einfach zu lesen und zu schreiben und für Maschinen einfach zu parsen (Analysieren von Datenstrukturen) und zu generieren ist
(gleich wie JSON -> JavaScript Object Notation)
DOM?
DOM = Document Object Model
ist eine Spezifikation einer Schnittstelle für den Zugriff auf HTML- oder XML-Dokumente.
ist eine Spezifikation einer Schnittstelle für den Zugriff auf HTML- oder XML-Dokumente.
ASYNCHRON?
Die Seite muss nicht neu geladen werden sondern es werden Seitenbestandteile neu geladen und dann neu dargestellt
Vorgehensweise, um AJAX auf Seite zu nutzen?
- HTML vorbereiten
- Seite in JavaScript initialisieren
- ein Request-Objekt erstellen
- die Details vom Server abrufen
- die Details auf der Seite anzeigen
- Seite in JavaScript initialisieren
- ein Request-Objekt erstellen
- die Details vom Server abrufen
- die Details auf der Seite anzeigen
1. HTML vorbereiten:
Klick auf CD Album, alle Titel werden geladen. Was sagt dieser Code aus? script src
1. HTML vorbereiten
Klick auf CD Album, alle Titel werden geladen. Was sagt dieser Code aus? table id
Klick auf CD Album, alle Titel werden geladen. Was sagt dieser Code aus? table id
1. HTML vorbereiten
Klick auf CD Album, alle Titel werden geladen. Was sagt dieser Code aus? div id
Klick auf CD Album, alle Titel werden geladen. Was sagt dieser Code aus? div id
2. Seite in JavaScript initialisieren
Was macht window.onload = initPage();?
Was macht window.onload = initPage();?
In dem Moment, wo die Seite vollständig geladen WORDEN ist, soll die Funktion initPage() aufgerufen werden
3. Request-Objekt erstellen
Was macht ein Request-Objekt?
Was macht ein Request-Objekt?
Es steuert die Verbindung vom Browser zu einer angeforderten Datei
Bsp.
Bsp.
5. Details auf der Seite anzeigen
Was macht die Funktion displayDetails()
Was macht die Funktion displayDetails()
Die Details auf der Seite anzeigen
Aufgabe: Erstelle function checkEmail() {..................}
function checkEmail ( ) {
request = createRequest ( ) ;
if (request == null) {
alert("unable to create request");
}
else {
var email = document.getElementById("email").value;
var val = escape(email);
var url = "php/validate.php?tape=email&val=" + val +
"&label=email";
request.open("GET", url, true);
request.onreadystatechange = updateEmailStatus;
request.send(null);
}
}
request = createRequest ( ) ;
if (request == null) {
alert("unable to create request");
}
else {
var email = document.getElementById("email").value;
var val = escape(email);
var url = "php/validate.php?tape=email&val=" + val +
"&label=email";
request.open("GET", url, true);
request.onreadystatechange = updateEmailStatus;
request.send(null);
}
}
Was ist ein Mashup?
...Und wie kommen die Daten ins Mashup?
...Und wie kommen die Daten ins Mashup?
Seite wird mit verschiedenen Datenquellen (z.B. Webservices) zusammen neu kombiniert und dargestellt
Definition Webservices
Unterstützt die Zusammenarbeit zwischen verschiedenen Anwendungsprogrammen auf verschiedenen Plattformen.
Software-Anwendung, welche eindeutig identifizierbar ist.
Direkte Interaktion
Software-Anwendung, welche eindeutig identifizierbar ist.
Direkte Interaktion
Was ist eine API?
Programmierschnittstelle
application programming interface
Anwendungs|programmier|schnittstelle
...
application programming interface
Anwendungs|programmier|schnittstelle
...
Mit DOM kann man...
...den Inhalt einer Seite ändern
...den Inhalt einer Seite abfragen
...die Struktur einer Seite ändern
Browser übersetzt HTML in das DOM.
JavaScript kann auf alles im DOM zugreifen.
...den Inhalt einer Seite abfragen
...die Struktur einer Seite ändern
Browser übersetzt HTML in das DOM.
JavaScript kann auf alles im DOM zugreifen.
DOM Rezepte?
HTML-Element ansprechen:
- id
- Tag-Name
Achtung: Es werden ALLE Elemente mit diesem Tagnamen angesprochen
Eigenschaften lesen:
Eigenschaften ändern:
- id
- Tag-Name
Achtung: Es werden ALLE Elemente mit diesem Tagnamen angesprochen
Eigenschaften lesen:
Eigenschaften ändern:
DOM Rezepte? zum 2ten
Knoten erstellen:
Textknoten erstellen:
Knoten anhängen:
Attribut festlegen:
Textknoten erstellen:
Knoten anhängen:
Attribut festlegen:
Definition Events
Event = Ereignis
dient zur Steuerung des Programmflusses.
Ereignishandlungsroutinen (listener) werden nur ausgeführt, wenn ein bestimmtes Ereignis eintritt (z.B. click, mouseOver)
dient zur Steuerung des Programmflusses.
Ereignishandlungsroutinen (listener) werden nur ausgeführt, wenn ein bestimmtes Ereignis eintritt (z.B. click, mouseOver)
Möglichkeiten für Eventverarbeitungen?
in HTML (nicht so gut):
direkt im DOM:
mit EventListener:
direkt im DOM:
mit EventListener:
Vorteil EventListener?
Mehrere EventListener können auf ein und das selbe Objekt angewendet werden
EventListener können wieder entfernt werden:
Das funktioniert direkt im DOM nicht
EventListener können wieder entfernt werden:
Das funktioniert direkt im DOM nicht
Was ist ein Framework?
In Bezug auf Webdesign ist ein responsive Web Framework ein Baukasten mit vorgefertigten, dynamischen Gestaltungselementen.
z.B. Bootstrap
z.B. Bootstrap
Was bedeutet "parsen"?
Dateien mit strukturiertem Inhalt (=XML/JSON) lesen, filtern und für die eigenen Bedürfnisse verwenden.
Unterschied XML / JSON
XML (Extensible Markup Language)
XML stellt Daten hierarchisch strukturiert in Form von Textdateien dar. Wird zum Austausch zwischen Computersystemen eingesetzt.
JSON (JavaScript Object Notation)
JSON ist ein kompaktes Datenformat in einer einfach lesbaren Textform, zwecks Datenaustausch zwischen Anwendungen
XML stellt Daten hierarchisch strukturiert in Form von Textdateien dar. Wird zum Austausch zwischen Computersystemen eingesetzt.
JSON (JavaScript Object Notation)
JSON ist ein kompaktes Datenformat in einer einfach lesbaren Textform, zwecks Datenaustausch zwischen Anwendungen
Kartensatzinfo:
Autor: Karin Zeller
Oberthema: Interaktive Medien (INTMED)
Thema: AJAX
Schule / Uni: HTW Chur
Ort: Chur
Veröffentlicht: 21.01.2015
Schlagwörter Karten:
Alle Karten (70)
keine Schlagwörter
