XML im Browser

Transcription

XML im Browser

Interne DOM Repräsentation im Browser
HTML DOM im Browser
■ Eine HTML Seite wird im Browser als DOM abgebildet
■
■
XHTML ist XML -> Standard Repräsentation
HTML DOM wird erstellt
<html>
<html>
<head>
<head>
<title>My
<title>My Title</title>
Title</title>
</head>
</head>
<body>
<body>
<a
<a href="">My
href="">My Link</h1>
Link</h1>
<h1>My
<h1>My Header<h1>
Header<h1>
</body>
</body>
</html>
</html>
■ HTML Dokument als DOM Baum im Browser
■ Zugriffsmechanismen auf die Elemente im HTML Dokument
■ Zugriff vom Browser aus mittels AJAX
http://www.w3schools.com/htmldom/default.asp
School of Engineering
© K. Rege, ZHAW
2 von 54
Zugriff zum HTML DOM
■ FireBug für Firefox (gratis)
■ DOM Inspector für IE (shareware)
Java Script
■ Via COM Schnittstelle (nur IE) von anderen Sprachen aus
■ In Java als Teil
■
■
■
URL u = new URL("http://www.oreilly.com");
JEditorPane jep = new JEditorPane(u);
jep.setEditable(false);
■ Via eingebettetes Java Script
■
document.body.bgColor="yellow"
© K. Rege, ZHAW
3 von 54
© K. Rege, ZHAW
4 von 54
Scripts auf dem Client
Geschichte
A client-side script is a program that may accompany an HTML document or be embedded
directly in it. The program executes on the client's machine when the document loads, or at
some other time such as when a link is activated. HTML's support for scripts is
independent of the scripting language (W3C: HTML 4.01)
■Von Netscape entwickelt
■
Erstmals 1995 in den Netscape Navigator 2.0
integriert
■Hiess ursprünglich LiveScript
Scripts may be triggered by events that affect the document, such as loading, unloading,
element focus, mouse movement, etc.
■ Scripts may be linked to form controls (e.g., buttons) to produce graphical user interface
■ECMA Standard für Internet-Scriptsprachen
■1997 ECMA-262 ist eine Teilmenge von
JavaScript 1.3
■1999 ECMA-262 Edition 3
angepasst für JavaScript 1.5
■Firefox 1.5
JavaScript 1.6
■Firefox 2:
JavaScript 1.7
■Internet Explorer
unterstützt JScript; in vielen
Teilen nahe an aber nicht
identisch mit ECMA Script
elements.
■HTML
Unterstützung für Client-Scripts zwar
unabhängig von der Scriptsprache
■Praktisch
im Web aber nur JavaScript einsetzbar
JavaScript Language Resources
http://www.mozilla.org/js/language/
Quelle: Kapitel "Scripts" der HTML Spezifikation (W3C)
http://www.w3.org/TR/html4/interact/scripts.html
© K. Rege, ZHAW
5 von 54
Rolle von Client Scripting
© K. Rege, ZHAW
6 von 54
Anwendung
■ Client-side Scripting fügt Webseiten eine dritte Komponente hinzu:
■ Überprüfung von Formulardaten
HTML/XHTML
→ Struktur und Inhalt
Stylesheets
→ Darstellung, Aussehen
Client Scripts
→ Verhalten auf dem Klient
■ Programme, die komplett im Browser ausgeführt werden
■ Dynamisches Anpassen des Seiteninhalts
■ Zusätzliche Bedienungselemente
■ Die verschiedenen Aspekte soweit als möglich trennen
■ Asynchrone Client-Server Kommunikation (AJAX)
■ Ein paar Überschneidungen aber vorhanden
■ Animationen
DHTML: Dynamic HTML
→ Kombination von HTML, CSS, JavaScript/DOM
■ Vorteile:
■
■
Scripte werden im Browser ausgeführt-> es wird kein Roundtrip bei fehlenden/fehlerhaften Eingaben
notwendig.
Die Seite reagiert "agiler" auf Benutzerinteraktionen
© K. Rege, ZHAW
7 von 54
© K. Rege, ZHAW
8 von 54
Mögliche Probleme
JavaScript und HTML-Datei
■ Inkompatibilitäten in den Implementationen
<script type="text/javascript">
<!-alert("Oh je, ein Meldungsfenster...");
//-->
</script>
■
Funktionen aus Script (Hilfs-) Bibliotheken verwenden z.B. Prototype, Scriptaculous
■ Sicherheitsmängel wegen fehlerhafter Implementierung
■
Regelmässiges Update erforderlich
Besser: JavaScript in separater Datei:
■ Verfügbarkeit von JavaScript sollte nicht vorausgesetzt werden
■
Seiten müss(t)en auch ohne JavaScript eingeschränkt "funktionieren";
JavaScript nur als optionale "Erweiterung" ansehen
■
Heute aber bereits viele Seiten die NUR noch MIT JavaScript funktionieren
■
<script type="text/javascript" src="quadrat.js">
</script>
© K. Rege, ZHAW
9 von 54
© K. Rege, ZHAW
noscript
User Scripts (neu)
■ Das noscript-Element erlaubt eine Alternative anzugeben, für den Fall, dass keine
Scripts ausgeführt werden
■ Scripts, die im Browser installiert werden
■ Der Inhalt des noscript-Elements wird ignoriert, falls der Browser JavaScript unterstützt
und es eingeschaltet ist
■ Mögliche Anwendung:
■ Diese Scripts modifizieren bestimmte oder alle Webseiten, die besucht werden
■
■
■ Andernfalls wird der Inhalt des noscript-Elements ausgewertet
10 von 54
■
Bessere Lesbarkeit oder Benutzbarkeit einer Seite
Korrigieren von Fehlern auf einer Seite
Einfügen von Daten aus anderen Quellen
■ Unterstützt in
■
■
■
© K. Rege, ZHAW
11 von 54
Opera ab Version 8.0
Firefox mit Greasemonkey Erweiterung
Internet Explorer mit IE7Pro Erweiterung
© K. Rege, ZHAW
12 von 54
Syntax
■ Angelehnt an die Syntax von Java
■
■
■
■
■
Operatoren wie in Java
Anweisungen mit ; abschliessen
Blöcke mit { ... }
Kommentare mit // oder /* ... */
if, for, while, do while, ...
■ Objektbasiert (mit Prototypen ≠ Klassen à la Java)
■ Keine statischen Typen
Zugriff auf HTML-Dokumente
var a = "hallo";
a = 25;
■ …. siehe andere Vorlesungen oder w3school
http://www.w3schools.com/js/default.asp
© K. Rege, ZHAW
13 von 54
© K. Rege, ZHAW
14 von 54
Zugriff auf HTML-Dokument Objekte
■ Zwei Varianten in JavaScript
■
■
node-Objekte (Standard DOM)
HTML-Elementobjekte
■ Voraussetzung in beiden Fällen: JavaScript 1.5
Standard DOM
Standard DOM
© K. Rege, ZHAW
15 von 54
© K. Rege, ZHAW
16 von 54
Standard DOM
Standard DOM Zugriff Beispiele
■ Allgemeinere, von HTML unabhängige Variante
XMLNode und XMLElement
■ Um Elemente eines HTML Dokuments auszuwählen, gibt es verschiedene Methoden
■ Jedes Element, jedes Attribut, ... stellt ein Objekt
dar
■ Auswahl des Elements mit der id
document.getElementById()
■ Auch für andere XML Sprachen geeignet
■ Beispiel
■ Auswahl der Elemente mit dem Wert des name-Attributs
Nur für Elemente mit name-Attribut; NICHT in IE unterstützt!!!!
bildobjekt = document.getElementById("logo"); // ein Knotenobjekt
document.getElementsByName()
bildobjekt.setAttribute("alt ","Unser Firmenlogo"); // Alternativtext ändern
■ Auswahl der Elemente von diesem Typ
Bsp.: document.getElementsByTagName("p")[0]
document.getElementsByTagName()
© K. Rege, ZHAW
17 von 54
© K. Rege, ZHAW
Suchmethoden des node-Objekts
Attribute des node-Objekts
■ Erlaubt den Zugriff auf einzelne Knoten der Baumstruktur eines XML/HTMLDokuments
attributes
Array der Attribute des Knotens (read only)
childNodes
Array der Kindknoten (read only)
firstChild
Erster Kindknoten (read only)
lastChild
Letzter Kindknoten (read only)
parentNode
Übergeordneter Knoten (read only)
nextSibling
Nachfolgender Knoten auf der gleichen Ebene
(read only)
previousSibling
Vorgänger Knoten auf der gleichen Ebene (read only)
■ Die Navigation in der Baumstruktur erfolgt ausgehend von einem Knoten, der über die
folgenden Methoden ausgewählt werden kann:
■
■
■
■
node.getElementById()
node.getElementsByName()
node.getElementsByTagName()
….
© K. Rege, ZHAW
19 von 54
© K. Rege, ZHAW
18 von 54
20 von 54
… Attribute des node-Objekts
Beispiel
data
Zeichendaten, falls Textknoten (read/write)
<h1 id="header">Knoten in der <i>Baumstruktur</i></h1>
nodeValue
Wert des Knotens (Attributwert, Textinhalt)
(read/write)
nodeName
Name des Knotens, bei Elementen Elementname
(read only)
var elementknoten = document.getElementById("header");
var wertErsterKindknoten = elementknoten.firstChild.nodeValue;
document.write("Der Wert des ersten Kindknotens lautet: <b>"
+ wertErsterKindknoten + "<\/b>");
</script>
nodeType
Typ: 1=Elementknoten, 2=Attributknoten,
3=Textknoten, ... (read only)
© K. Rege, ZHAW
21 von 54
© K. Rege, ZHAW
Knoten erzeugen
Methoden des node-Objekts
■ Für verschiedene Methoden des node-Objekts muss zuvor ein neuer Knoten erzeugt
werden
appendChild()
Als letztes Kindelement einfügen
removeChild()
Wert Kindknoten entfernen
replaceChild()
Kindknoten ersetzen
■ Dazu gibt es drei Methoden des document-Objekts:
document.createElement()
HTML-Elementknoten erzeugen
hasChildNodes()
Test, ob Kindknoten vorhanden
document.createAttribute()
Attributknoten erzeugen
insertBefore()
Einfügen vor einem bestimmten Knoten
document.createTextNode()
Textknoten erzeugen
appendData()
Daten (Text, Attributwert) am Ende
hinzufügen
deleteData(),insertData(),
Daten löschen, einfügen, ersetzen
■ Diese Knoten können dann mit den Methoden des node-Objekts in die Baumstruktur
eingehängt werden
22 von 54
replaceData()
© K. Rege, ZHAW
23 von 54
© K. Rege, ZHAW
24 von 54
… Methoden des node-Objekts
getAttribute()
Attributwert ermitteln
removeAttribute()
Attributwert löschen
setAttribute()
Attributwert setzen
getAttributeNode()
Liefert Attributknoten
removeAttributeNode()
Attributknoten löschen
setAttributeNode()
Attributknoten setzen
getElementsByTagName()
Findet Elemente nach Tag Namen
cloneNode()
Knoten kopieren
© K. Rege, ZHAW
Beispiel
function setText () {
document.getElementById("Text").firstChild.nodeValue
= document.getElementById("Eingabe").value;
}
</script>
<form name="Formular" action="">Text:<br />
<textarea id="Eingabe" rows="10" cols="50" onkeyup="setText()">
</textarea>
</form>
<div id="Text" style="font-size:1.4em; background-color:#FFFFCC; padding:10px;
border:solid 1px red">  
</div>
25 von 54
© K. Rege, ZHAW
26 von 54
HTML Elementobjekte
■ HTML Variante des Document Object Models
(DOM)
■ Jedes Element im Baum stellt ein spezifisches Objekt dar
■ Je nach Element bestimmte Attribute oder
Methoden definiert
■ Beispiel
HTML Elementobjekte
bildobjekt = document.getElementById("logo"); // ein img Objekt
bildobjekt.alt = "Unser Firmenlogo"; // Alternativtext ändern
Hinweis: Browser-Unterstützung unterschiedlich, Tests mit verschiedenen Browser
notwendig
© K. Rege, ZHAW
27 von 54
© K. Rege, ZHAW
28 von 54
Auswahl von HTML-Elementen & node-Objekten
HTML Elementobjekte
■ Eine Reihe von Elementen sind ausserdem über vordefinierte Arrays auswählbar
■ Universaleigenschaften:
■
■
■
■
■
■
document.forms
document.images
document.links
document.anchors
document.applets
window.frames
className
dir
id
lang
title
Achtung: className, nicht class
■ Diese Attribute werden von praktisch allen HTML Elementobjekten unterstützt
■ Diese Variante stammt bereits aus den ersten JavaScript Versionen und wird daher von
allen Browsern gut unterstützt
MeinFormular =document.forms["Anmeldung"];
MeinFormular.elements["Eingabe"].value = 0;
© K. Rege, ZHAW
■ Sie können durch Scripts gelesen und geändert werden
■ Zusätzlich sind auch die Event Handler als Attribute der Elemente zugänglich
Element
Elementmit
mitIdIdoder
oderName*
Name*
(*deprecated)
(*deprecated)
29 von 54
© K. Rege, ZHAW
HTML Elementobjekt a
HTML Elementobjekt form
■ Zugriff auf die Attribute des a-Elements
■ Zugriff auf die Attribute des form-Elements
■
href, name, rel, ...
■
■ Methoden
■
action, name, method, ...
■ Zugriff auf die Elemente des Formulars
focus(), blur()
■
■ Beispiel
■
30 von 54
elements
■ Methoden
document.getElementById("zhaw").href = "http://www.zhwin.ch";
■
reset(), submit()
■ Beispiel
■
© K. Rege, ZHAW
31 von 54
document.getElementsByName('loginform')[0].submit();
© K. Rege, ZHAW
32 von 54
HTML Elementobjekt img
Weitere Elementobjekte
■ Zugriff auf die Attribute des img-Elements
■ Formularelemente wie textarea und input haben Attribute value, size, disabled, ... und
Methoden focus(), select(), ...
■
alt, height, name, src, width, ...
■ Möglichkeit, die Eigenschaften von Bildern zu ändern, oder Bilder dynamisch
auszutauschen
■ Tabellen (table) haben haben Attribute rows, tBodies, tFoot, tHead, ... und Methoden
createCaption(), insertRow, deleteRow(), ...
■ Tabellenzeilen (tr) haben Methoden wie deleteCell(), insertCell()
■ Eine komplette Zusammenstellung der Elementobjekte und ihrer Attribute und
Methoden ist im SelfHTML zu finden
http://de.selfhtml.org/javascript/objekte/htmlelemente.htm
© K. Rege, ZHAW
33 von 54
JavaScript und HTML DOM Anwendungen
© K. Rege, ZHAW
© K. Rege, ZHAW
34 von 54
XSLT Transformation im Browser
35 von 54
© K. Rege, ZHAW
36 von 54
XSLT Transformation im Browser (mit JavaScript)
■ XSLT Stylesheet Direktiven im XML/HTML Header werden direkt ausgeführt
<? xml-stylesheet type= "text/xsl" href="adresse.xsl" ?>
■ Man kann die Transformation auch via JavaScript anstossen und steuern
////Load
LoadXML
XML
var
varoXmlDom
oXmlDom==new
newActiveXObject("Microsoft.XMLDOM")
ActiveXObject("Microsoft.XMLDOM")
oXmlDom.async = false;
oXmlDom.async = false;
oXmlDom.load("adresse.xml")
oXmlDom.load("adresse.xml")
////Load
LoadXML
XML
var
varoXmlDom
oXmlDom==document.implementation.createDocument("",
document.implementation.createDocument("","","",null);
null);
oXmlDom.async
oXmlDom.async==false;
false;
oXmlDom.load("adresse.xml");
oXmlDom.load("adresse.xml");
////Load
LoadXSL
XSL
var
varoXslDom=
oXslDom=new
newActiveXObject("Microsoft.XMLDOM")
ActiveXObject("Microsoft.XMLDOM")
oXslDom.async
oXslDom.async==false;
false;
oXslDom.load("adresse.xsl")
oXslDom.load("adresse.xsl")
////Load
LoadXSL
XSL
var
varoXslDom
oXslDom==document.implementation.createDocument("",
document.implementation.createDocument("","","",null);
null);
oXslDom.async
oXslDom.async==false;
false;
oXslDom.load("adresse.xsl");
oXslDom.load("adresse.xsl");
////Transform
Transform
var
varresXmlDom
resXmlDom==oXmlDom.transformNode(oXslDom);
oXmlDom.transformNode(oXslDom);
document.write(resXmlDom);
document.write(resXmlDom);
////Transform
Transform
var
varoProcessor
oProcessor==new
newXSLTProcessor();
XSLTProcessor();
oProcessor.importStylesheet(oXslDom);
oProcessor.importStylesheet(oXslDom);
var
varresXmlDom
resXmlDom==oProcessor.transformToDocument(oXmlDom);
oProcessor.transformToDocument(oXmlDom);
document.write(new
document.write(newXMLSerializer().serializeToString(resXmlDom));
XMLSerializer().serializeToString(resXmlDom));
AJAX
DomAdapter http://www.alexatnet.com/node/62
http://www.admin-wissen.de/tutorials/eigene-tutorials/webentwicklung/ajax-tutorial/
© K. Rege, ZHAW
37 von 54
■ Ajax ist die Abkürzung für:
■
■
■
■
■
■
■
■
■
■
in XML kodiert
als JSON kodiert
reiner Text
■
■
■
© K. Rege, ZHAW
HTML Seite wird geladen
Daten werden in Formular eingegeben
Daten werden zum Server geschickt
nächste HTML Seite wird geladen, usw.
■ Ajax Modell
■ Die Nachrichten können sein
■
38 von 54
■ Traditionelle Web Anwendung
Asyncronous
JavaScript
and
XML
■ Kombination aus älteren Technologien
■
© K. Rege, ZHAW
Eigenschaften
Einführung
■
39 von 54
HTML Seite wird geladen
Daten werden in Formular eingegeben
schon während/nach der Eingabe werden die Daten
via Java Script zum Server geschickt und validiert
Vorteile
■ verbesserte Benutzerfreundlichkeit
■ in Summe weniger Datentransfer
Nachteile
■ verschiedene Technologien beherrschen
■ Unterschiede der JavaScript Impl. im Browser
© K. Rege, ZHAW
40 von 54
Grundlegender Ablauf
Definieren des Request Objekts
■ JavaScript
var request
■
■
■
Definiere ein Objekt um HTTP Requests zu senden
Initialisiere den Request
■ Hole request Objekt
■ Bestimme eine request Handler Funktion
■ als onreadystatechange attribute des requests
■ löse GET oder POST Request aus
■ sende die Daten
Behandle Antwort
■ warte bis readyState = 4 (und HTTP Status = 200)
■ extrahiere den RückgabeText in responseText oder responseXML
■ verarbeite das Resultat
function getRequestObject() {
if (window.XMLHttpRequest) {
// If IE7, Mozilla, Safari, and so on: Use native object.
if (window.ActiveXObject) {
■
Version
VersionofofInternet
Internet
Explorer
Explorer5.5
5.5ororlater
later
// ...otherwise, use the ActiveX control for IE5.x and IE6.
return (new ActiveXObject('MSXML2.XMLHTTP.3.0'));
}
■ HTML
■
Version
Versionfor
forNetscape,
Netscape,
Firefox,
Firefox,Opera,
Opera,Safari
Safari
return ( new XMLHttpRequest());
}else {
http://msdn.microsoft.com/en-us/library/ms537505%28VS.85%29.aspx
}
lade JavaScript
übergeben Kontrolle um den Aufruf auszuführen
else {
return (null);
}
fail otherwise
fail otherwise
}
© K. Rege, ZHAW
41 von 54
Request auslösen
© K. Rege, ZHAW
42 von 54
Antwort bearbeiten
Response
ResponseHandler
Handler
Funktion
Funktion
Antwort
Antwortdes
desServers
Servers
function sendRequest() {
request = getRequestObject();
function handleResponse() {
request.onreadystatechange = handleResponse;
if (request.readyState == 4) {
request.open("GET","http://localhost:8080/showtime.html",true);
request.send(null);
}
}
POST Data; null für
POST Data; null für
GET
GET
Text der Antwort
Text der Antwort
alert(request.responseText);
URL
URLfür
fürAufruf
Aufruf
}
Warte
Wartenicht
nichtauf
aufAntwort;
Antwort;
sende
sendeasynchron
asynchron
© K. Rege, ZHAW
Pup up Dialog Box
Pup up Dialog Box
43 von 54
© K. Rege, ZHAW
44 von 54
Hello World als AJAX
Erzeugen
Erzeugendes
desAjax
Ajax
Request
RequestObjekts
Objekts
function doIt(){
var req = null;
try{
req = new XMLHttpRequest();
}
catch (ms){
try{
req = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (nonms){
try{
req = new XMLHttpRequest();
}
catch (failed){
req = null;
}
HTML
}
HTMLInhalt
Inhalt
}
<html>
<head .....>
<body>
<div id="eins" style="width: 80%; height: 80%;">
<input type="button" onclick="doIt();" value="Mach was!"/>
</div>
</body>
</html>
Servlet Code
Parameter
Parameterfür
fürAuslösen
Auslösen
des
desasyncronen
asyncronenRequests
Requests
req.open("GET", 'http://localhost/ajax-tutorial/eins/test.txt', true);
package coreservlets;
//Beim abschliessen des request wird diese Funktion ausgeführt
req.onreadystatechange = function(){
switch(req.readyState) {
case 4:
if(req.status!=200) {
Definition
Definitionder
derCallback
Callback
alert("Fehler:"+req.status);
Funktion
Funktion
}else{
import ...
alert(req.responseText);
document.getElementById('eins').innerHTML = '<strong>'+
req.responseText
+'</strong>';
}
break;
default: return false; break;
}
};
Header
Headerund
undDaten
Daten
senden
senden
req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
req.send(null);
}
}
© K. Rege, ZHAW
45 von 54
Bespiel: Übersetzungsservice mit XML Antwort
■ Der Webserver lädt eine WSDL Datei die den Webservice beschreibt.
■ Auf dem Webserver abfrage eines Webservice via Soap.
■ zurücksenden der Antwort als XML
Verarbeitung
Verarbeitungder
der
Antwort
Antwort
■ parsen und schreiben der Ergebnisse.
Aufruf
Aufruf
req.open("GET", url, true);
//Beim abschliessen des request wird diese Funktion
ausgeführt
req.onreadystatechange = handleTranslation;
req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
req.send(null);
function handleTranslation(){
case 4:
}else{
//antwort des servers
xml = req.responseXML;
german_resp = xml.getElementsByTagName("german")[0];
//schreiben des ergebnisses
german_field.value = german_resp.firstChild.nodeValue;
}
break;
}
}
© K. Rege, ZHAW
© K. Rege, ZHAW
46 von 54
Daten als XML
■ Anfrage via Ajax.
//anfrage erstellen (GET, url ist localhost,
//request ist asynchron
var url = 'http://localhost/ajaxtutorial/zwei/ajax.php?translate='+
document.getElementById('myword').value;
public class ShowTime extends HttpServlet {
public void doGet (HttpServletRequest request,
HttpServlerResponse resp) throws ServletException,
IOExeption {
response.setHeader("Cache-Control","no-cache");
response.setHeader("Pragma","no-cache");
response.setContentType("text/html");
PrintWriter out = response.getWriter();
Date gurrentTime = new Date();
String message = String.format("It is now %tr on %tD.", currentTime,
currentTime);
out.print(message);
47 von 54
<html>
<head .....>
HTML
HTMLInhalt
Inhalt
<body>
<div id="eins" style="width: 80%; height: 80%; border: dashed 1px;">
englisch: <input type="text" id="myword" onchange="handleTranslation();" /><br />
deutsch: <input type="text" id="german" /><br />
</div>
</body>
</html>
XML
XMLMeldung
Meldung
<translation>
<english>car</english>
<german> Auto </german>
</translation>
<?php
header("Content-Type: text/xml");
$english = mysql_escape_string($_REQUEST['translate']);
$trans = new SoapClient("http://www.xmethods.net/sd/2001/BabelFishService?wsdl");
try{
$german = $trans->BabelFish("en_de",$english);
}
catch(SoapFault $e){
$english = "not found";
}
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
?>
<translation>
<english><?php echo $english; ?></english>
<german> <?php echo $german; ?></german>
</translation>
© K. Rege, ZHAW
PHP
PHPSOAP
SOAPCall
Call
- -läuft
läuftz.Z.
z.Z.leider
leider
nicht
nicht
48 von 54
JSON
Beispiel Übersetzungsservice mit JSON Antwort
■ Die Abkürzung JSON steht für JavaScript Object Notation
■
<?php
require_once("json.php");
function handleTranslation(){
case 4:
}else{
z.B. in PHP gibt es ein PEAR Paket dafür http://mike.teczno.com/JSON/doc/
■ in JavaScript mit eval() wieder deserialisieren.
■ in JavaScript mit toJSONString () serialisieren (http://www.json.org/json2.js ).
$english = mysql_escape_string($_REQUEST['translate']);
$trans = new SoapClient("http://www.xmethods.net/sd/2001/".
"BabelFishService.wsdl");
//antwort des servers
var translation = eval('(' + req.responseText + ')');
■ Vorteil: kompakter und in JavaScript effizient zu verarbeiten
//schreiben des ergebnisses
german_field.value = translation.german;
}
break;
{"english":"car","german":"Auto "}
■ Weitere Informationen zu JSON sind unter der Website www.json.org oder im Wikipedia
zu finden http://de.wikipedia.org/wiki/JSON
PHP
PHPSOAP
SOAPCall
Call
Verarbeitung
Verarbeitungder
der
Antwort
Antwort
■ Datenstrukturen in einer Programmiersprache, die eine JSON Bibliothek anbietet
serialisieren
© K. Rege, ZHAW
49 von 54
}
try{
$german = $trans->BabelFish("en_de",$english);
}
catch(SoapFault $e){
$english = "not found";
}
$result = array("english" => $english,
"german" => $german,
$myjson = new Services_JSON();
print(trim($myjson->encode($result)));
?>
}
© K. Rege, ZHAW
50 von 54
Java Script Ajax Frameworks
■ Prototype http://www.prototypejs.org/
■ DOM Elemente manipulieren
■ Observer
new Event.observe(
'myword', 'click',
function(){ alert('hello'); },
false
);
getElementById
function init(){
getElementById
$('loading').hide();
new Event.observe(
'myword',
'blur',
function(event){
$('loading').show();
new Ajax.Request('ajax.php',
{
method:'get',
parameters: {translate: $('myword').value},
onSuccess: function(nom, json){
//nom ist der ungeparste response text
getElementById
getElementById
//json ist das object (json)
$('german').value = json.german;
$('loading').hide();
},
onFailure: function(){ alert('Fehler bei Ajax Request') }
});
AJAX Server
},
false
);
}
© K. Rege, ZHAW
51 von 54
© K. Rege, ZHAW
52 von 54
JSON in Java
Zusammenfassung
■ Verschiedene Projekte, z.B. FLEXJSON http://flexjson.sourceforge.net/
■ Eine HTML Seite im Browser ist als HTML DOM Baum via JavaScript zugreifbar
■ Flexjson als leichtgewichtige Bibliothek für die JSON Serialisierung
■ Es kann lesend und schreibend auf den HTML DOM Baum zugegriffen werden
■ ab 1.5 auch Unterstützung von Annotationen, z.B. @JSON(include=false)
■ Das asynchrone Nachladen von Daten und einbinden in den DOM Baum wird als AJAX
bezeichnet
© K. Rege, ZHAW
53 von 54
© K. Rege, ZHAW
54 von 54

XML im Browser

Transcription

Similar documents

Antrag auf Efteilung eines Schengen Visums 6)ö8b)C90 ö366360tr

Mooring lines - Carl Stahl Watersport

UNIVERSITY OF MACEDONIA

XML Extensible Markup Language

AJAX – Tutorial

Die Verwendung der Duration bei der Bewertung und

JavaScript Einführung PDF

Einstieg in JavaScript

Übung zu HTML-CSS

Externe Prozeduren unter Windows mit dem Freeware

Überblick 7. Überladen von Operatoren