Alexander Stelter - foo, bar, baz » Javascript

JSON Strings debuggen mit www.jsonlint.com

Alexander — Fri, 05 Sep 2008 11:01:06 +0000

Wer ab und an mal was mit JSON machen muss, der ist darauf angewiesen, dass die Tools, die man verwendet, um JSON Output zu generieren, valide arbeiten. Ist dies nicht der Fall, steht man idr. vor einem Rätsel, denn die Daten sind mitunter ja recht komplex und zusätzlich auch ewig lang. Vor diesem Problem stand ich heute auch. Der JSON Output, den mir meine Solr Schnittstelle liefert, wollte und wollte nicht durch den PHP JSON Parser decodiert werden. Auf der Suche nach einer Lösung fand ich (wie so oft) in den Kommentaren des PHP Manuals nützliche Hinweise. Es gibt ein Webseite, auf der man seinen JSON Output eingeben kann, und dann erfährt, ob der Code valide ist und wenn nicht, wo der Fehler liegt. Einfach wunderbar! Zu finden hier: www.jsonlint.com. Man solle evtl. dazu sagen, dass es sich hierbei um einen fremden Server handelt, wo man am besten keine vertraulichen Daten hinschicken sollte, auch wenn man diese validieren muss .

YUI 3 Preview Release veröffentlicht

Alexander — Thu, 14 Aug 2008 08:43:22 +0000

Wie heute bei golem zu lesen war haben die Entwickler von YUI eine Previewversion des neuen Releases 3 zur Verfügung gestellt. Besonderes Merkmal dabei ist, dass diese Version schneller und sicherer sein soll, als seine Vorgänger. Die Entwickler geben dem Anwendungsentwickler mehr Möglichkeiten die Eventsteuerung selbst zu übernehmen und wollen das Framework modularer aufbauen. Viele weitere Neuerungen finden sich auf der YUI Webseite.

Ein Einschnitt dabei ist sicherlich, dass Code, der für YUI 2 entwickelt worden ist, unter YUI 3 wohl nicht mehr funktionieren wird. Es wird wohl einen Kompatibilitätslayer geben, der die wichtigsten Parts weiterhin verfügbar macht.

Das macht für mich einen sehr guten Eindruck. Ich war ja zuvor schon begeistert von YUI und habe auch schon recht viel damit gemacht. Ich bin mal gespannt, was zum Release alles im Paket enthalten sein wird und freue mich die neuen Komponenten bei neuen Projekten auszuprobieren. Solange YUI 2 keine gravierenden Bugs aufweist, würde ich davon absehen bestehende Projekte auf die neue Version 3 zu portieren. Aber warten wir erstmal den Release ab .

YUI statt json.js

Alexander — Thu, 15 May 2008 08:48:00 +0000

Wie ich vor einer Weile berichtete, kann man mit JSON eine Menge anstellen. Was mich immer ein wenig geärgert hat, wenn wir JSON und YUI gemeinsam eingesetzt haben, dass es keine integrierte Lösung gab. Man mußte immer die YUI API laden und zusätzlich die json.js. Dies ist nun seit der Version 2.5.0 vorbei, denn YUI integriert die JSON API in deren eigenen Code und stellt einen Wrapper zur Verfügung.

Mit folgenden Code-Schnipseln kann man einen JSON-String in ein Array umwandeln:

try
{ 
var prod = YAHOO.lang.JSON.parse(jsonString); 
}
catch (e)
{
alert("Invalid product data"); 
}

Ebenfalls ist es möglich aus einem Array einen JSON String umzuwandeln. Das Beispiel findet sich im JSON Manual der YUI Seite. Wer YUI und JSON gemeinsam verwendet, kann sich nun getrost zurücklehnen und alles aus einem Guß verwenden .

Neue YUI Version 2.5.0

Alexander — Thu, 21 Feb 2008 20:11:39 +0000

Wie heute bei Golem zu lesen war, wurde heute die neue Version der YAHOO User Interface Library (YUI) veröffentlicht. Die mitlerweile sehr gewachsene Komponentensammlung unterstützt nun auch endlich einen Multiuploader, mit dem man mehrere Dateien in einem Prozess hochladen kann. Dies geschieht mit einer ähnlichen Technik wie bei SWF Upload.
Wer viel und komplex mit Javascript entwickeln muss findet mit YUI eine gute Sammlung an Komponenten, die das Leben doch schon sehr erleichtern und viel Arbeit abnehmen. Eine komplexe Anwendung als Beispiel der Praxistauglichkeit von YUI kann man hier bewundern. Besonders herrauszuheben sind die Connection-, Dom- und Event-Komponente, mit der sich in wenigen Schritten eigene Ajax-Anwendungen stricken lassen.
Einziges Manko bei YUI ist für mich die doch sehr komplexe Code-Struktur, die ziemlich große Javascript-Files zur Folge hat. Allerdings “erkauft” man sich damit eine hohes Maß an Flexibilität bei der Entwicklung von Javascript-Applikationen.

Events ohne embedded Javascript: Behaviours

Alexander — Sun, 03 Jun 2007 10:55:08 +0000

Im Zeitalter von BITV muss sich der Webmaster Gedanken darüber machen, wie er seinen Code strukturiert, damit auch z.B. Browser für Sehbehinderte den Seiteninhalt korrekt wieder geben können. Hierbei ist ein Schritt eingebettes Javascript aus dem HTML Quellcode zu entfernen,.
Hierzu verwenden wir CSS Klassen und Ids um anhand deren Werte Javascript Funktionen zu verdrahten. Browser, die kein Javascript und / oder CSS unterstützen interpretieren diese Anweisungen schlichtweg nicht und können trotzdem den Inhalt der Seite wiedergeben.

Diese kleine Vorführung erhebt keinen Anspruch auf Vollständigkeit. CSS ist in diesem Beispiel eingebettet. Dies sollte in der Regel auch ausgelagert werden . Hier nur der Einfachheit halber, da es für die Demonstration nur untergeordnete Bedeutung hat. Wichtiger sind die Klassen und IDs der HTML-Elemente.
Als Basis unserer kleinen Übung verwenden wir folgende HTML-Seite:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 

	
		Untitled
		
	
	
		
			
				01 Element
				02 Element

Zunächst macht diese Seite noch garnichts. Das Ziel ist es, möglichst einfach zu konfigurierende Events hinzufügen zu können und diese mit den jeweiligen Elementen zu verdrahten. Hier in unserem Beispiel möchten wir, dass ein Element onclick ausgeblendet wird.
Dazu legen wir jetzt ein Array mit Regeln in der Javascript-Datei an:

var CommonBehaviourRules = new Array();
CommonBehaviourRules['li'] = new Array();
CommonBehaviourRules['li']['DELETE'] = function ()
{
	this.style.visibility = 'hidden';
	this.style.display = 'none';
}

Wir erzeugen ein Array, welches in der ersten Dimension den Namen des HTML-Elements enthält und in der zweiten Dimension den Namen der CSS-Klasse. Diese CSS-Klasse hat als Wert eine Funktion, die das Element ausblendet.

Sehen wir uns nun die Funktion an, die später die Arbeit für uns verrichten wird:

var executeOnClickBehaviourRules = function ( RootNode , BehaviourRules )
{
	RootNode = document.getElementById ( RootNode );
 
	if ( RootNode )
	{
		if ( BehaviourRules )
		{
			for ( Element in BehaviourRules )
			{
				Elements = RootNode.getElementsByTagName ( Element );
 
				if ( Elements.length > 0 )
				{
					for ( i = 0; i < Elements.length; i++)
					{
						className = Elements[i].className.split(' ')[0];
 
						if ( BehaviourRules[Element][className] )
						{
							Elements[i].onclick = BehaviourRules[Element][className];
						}
					}
				}
			}
		}
	}
}

Die Formatierung leidet ein wenig unter der Darstellung. Die Funktion erwartet zwei Parameter. Zum einen den HTML-Node, an dem die Transformierung beginnen soll und zum anderen die Regeln, die angewendet werden sollen. Wir können beliebig viele Funktionen als Regeln definieren. Für unseren Test verarbeiten wir hier nur onclick-Events.
Nach dem Aufruf prüft die Funktion zunächst, ob der RootNode und die jeweiligen BehaviourRules vorhanden sind. Dann werden die Elemente nach und nach durchgegangen und die entsprechenden Funktionen auf die Elemente gelegt.
Jetzt hilft uns diese Funktion noch nicht weiter, weil sie noch nicht aufgerufen wird, dies erledigen wir so:

var construct = function()
{
	executeOnClickBehaviourRules ( 'container' , CommonBehaviourRules );
}
 
 
window.onload = construct;

Wir legen eine neue Funktion “construct” an und rufen übergeben diese an window.onload. Diese wird dann analog zum Body-Attribut onload=”" aufgerufen. In ihr rufen wir dann unsere Funktion auf. Jetzt können wir auch sehen, dass wir beliebig viele Regeln auf unterschiedliche Ebenen beschränken können. Getestet ist dies im IE 6 und im FFX 2.

Ich hoffe dieser kleine Exkurs hat gezeigt, wie mächtig dieses Werkzeug ist. Frameworks wie Prototype oder Yui bieten dafür natürlich fertige Lösungen, aber ich bin der Meinung, dass man für Kleinigkeiten nicht unbedingt die großen Bibliotheken einbinden muss, bzw. das es auch gut ist zu wissen, wie diese Techniken funktionieren .

Bei Fragen, Anregungen etc. einfach einen Kommentar hinterlassen.

JavaScript Entwicklung mit Prototype

Alexander — Wed, 07 Mar 2007 19:26:15 +0000

Heute möchte ich ein interessantes Framework vorstellen, welches die Entwicklung mit JavaScript extrem vereinfacht und dem Entwickler (größtenteils Cross-Browser) viele Dinge vereinfacht. Hierbei handelt es sich um Prototype. Entstanden ist es ursprünglich aus dem Framework Ruby on Rails.

Als Beispiel nehmen wir ein Formular, welches eine Anfrage via AJAX an den Server schickt und die Antwort des Servers wieder in das Script zurückholt. Hierzu verwenden wir die eingebettete JSON-Funktionalität. Hierbei sei zu beachten, dass Prototype auf einem JSON-Objekt auch nur mit eval() operiert. Hier besteht also bei Produktivanwendungen noch Prüfungsbedarf. Mit Prototype kann man auf jeden Fall vor der Ausgabe Script-, HTML-Tags etc. entfernen lassen, wenn man das möchte. Das schützt allerdings nicht vor dem Angriff durch JavaScript, welches sich in der Response des Servers befindet und direkt ausgeführt werden könnte.
JSON kann bei Prototype via Header und “normaler” Übergabe übertragen werden. Bei der Übergabe per Header muss der X-JSON-Header gesendet werden. Bei größeren Datenmengen empfielt sich jedoch wieder das echo. Dies wird von Prototype erkannt, wenn der Content-Type text/javascript ist. Ich stelle hier die Lösung mit X-JSON-Header vor. Wichtig ist hier wieder, dass die JSON-Extention[3] für PHP installiert ist, bzw. eincompiliert[2] ist.

Beginnen wir also mit dem AJAX-Beispiel. Vorrausgesetzt ist hier, dass die Datei prototype.js korrekt im Header der HTML-Seite eingebunden ist, ich denke das muss ich nicht erklären . Für die eigenen Funktion verwende ich eine weitere JavaScript-Datei article-prototype.js. Falls das doch jemandem nicht ganz klar sein sollte, verweise ich jetzt mal frech auf selfhtml[4]. Ich verwende hier auch Inline-JavaScript, was ich eigentlich mittels Behaviours verstecken würde, aber das wird evtl. Thema eines neuen Artikels sein .

Zunächst basteln wir uns eine HTML-Seite, die eine FORM enthält, in der man mittels einer Selectbox einen oder alle Datensätze wählen kann:

Daten wählen
 

	Datensätze ausgeben



 
Ausgabe
 
 
Keine Daten ausgewählt

Jetzt legen wir eine Funktion an, die unseren AJAX-Aufruf beherbergt:

var RequestData = function ()
{
   new Ajax.Request
   (
      '/test/prototype-server.php',
	{
	   method:'post',
	   parameters: { datensatz: parseInt($('datensatz').value) },
	   onSuccess: function(transport, json)
	   {
		handleSuccess(json);
	   },
		onFailure: function()
		{
			handleFailure();
		}
	}
   );
}

Wir haben jetzt eine Funktion, die ein AJAX-Objekt angelegt und die Methode POST verwendet, implementiert. Über parameters: kann man die einzelnen Parameter angeben, die man an den Request übergeben will. Hier verwende ich die von Prototype implementierte Kuzform für document.getElementById(‘datensatz’) ($(‘id-name’)). Möchte man eine komplette Form übergeben, bietet Prototype eine Serialisierung der Daten:

$('id_of_form_element').serialize(true)

Als nächstes definieren wir die vorgegebenen Funktionen onSuccess und onFailure. Verwendet man JSON, werden zwei Variablen an onSuccess übergeben, die zweite enthält dann die Response-Daten als JSON-Objekt. Die Bedeutung der Funktionen sollte selbsterklärend sein. Der Übersicht halber machen diese Funktionen nichts anderes, als eine andere Funktion aufzurufen. Die Fehler-Funktion ist hier recht unspektakulär und wird nur aufgerufen, wenn ein Timeout beim Request eintritt:

var handleFailure = function()
{
   alert('Ein Problem ist aufgetreten, die Daten konnten nicht abgeholt werden');
}

Jetzt geben wir einfach die abgeholten Daten aus. Hierzu leeren wir zunächst den Content-Container. Danach laufen wir mit einer Schleife durch das Result:

var handleSuccess = function(response)
{
	$('output').innerHTML = '';
 
	for(i = 0; i &lt; response.length; i++)
	{
		$('output').innerHTML += i+1;
		$('output').innerHTML += ' => '
		$('output').innerHTML += response[i];
		$('output').innerHTML += '';
	}
}

Danach können wir unsere Ausgabe bestaunen . Der Server dazu sieht übrigens so aus:

$AryData = new ArrayObject ( array( 'PHP','Perl', 'Python', 'C++' , 'C#') );
 
if((int)$_POST['datensatz'] == 0)
{
	$Output = $AryData;
}
else
{
	$Output = $AryData [ (int)$_POST['datensatz'] – 1];
}
 
header('X-JSON: '.json_encode((array) $Output));

Das Ganze ist beliebig erweiterbar und auf jeden Fall recht mächtig. Prototype nimmt einem an vielen Stellen eine Menge Arbeit ab und es läuft großteils auch alles in fast allen gängigen Browsern . Das war natürlich nur ein Feature von vielen, die Prototype bietet, mehr findet man auch auf der Webseite[1].

Bei Fragen, Problemen etc. einfach einen Kommentar hinterlassen . Die Sourcen versende ich auf Anfrage. Interessenten können auch gerne einen Kommentar hinterlassen; ist vielleicht weniger Arbeit, als alles hier rauszukopieren.

Links
[1] http://www.prototypejs.org
[2] http://de.php.net/json
[3] http://pecl.php.net/package/json
[4] http://de.selfhtml.org

JavaScript Object Notation (JSON)

Alexander — Wed, 21 Feb 2007 19:09:00 +0000

Web 2.0 ist in aller Munde und dabei fällt auch meist im nächsten Satz das Wort AJAX. AJAX steht für Asynchronous JavaScript and XML. Bei dieser Technologie wird mittels eines HTTP-Requests per Active-X oder Javascript eine Seite oder ein Script aufgerufen und dessen Daten übertragen, ohne dass die Seite neu geladen werden muss. Mit AJAX kann man also eine Webanwendung stricken, die das Look an Feel einer Desktopanwendung hat. So kann man zum Beispiel eine Tabelle mit Daten dynamisch nach einer Spalte sortieren, ohne die Seite neu zu laden.

(Quelle: de.wikipedia.org)

Zur Übertragung der Daten gibt es einige Formate, die sich in der Praxis bewiesen haben. Hierzu gehören u.a. XML, reST, JSON und SOAP.

Was ist JSON?
JSON steht für JavaScript Object Notation. Hierbei wird auf Anforderung mit einem Algorithmus serverseitig aus einem Objekt (z.B. einem PHP-Array) ein JSON-Objekt serialisiert. JSON-Objekte haben den Vorteil gegenüber XML, dass sie wenige Bytes für die eigenen Strukturinformationen verwenden und somit wenig Overhead beim Übertragen von Daten erzeugt wird. Will man natürlich komplexe Datenstrukturen übertragen, sollte man sich überlegen XML zu verwenden, denn hier sind die Methoden zum Zugriff auf die Baumstruktur der Daten ausgereift und verschwenden weniger Rechenleistung des Clients. Zum Übertragen von Arrays mit überschaubarer Verschachtelung ist JSON aber die richtige Wahl.

Bei der Wahl des Datenformats sollte man bedenken, dass auf Seiten des Clients zusätzlich Rechenleistung von Nöten ist, um die Daten zur Ausgabe aus dem Format zu extrahieren.

Verarbeitung
Erhält man nun von Serverseite ein JSON-Objekt, hat man zwei Methoden zur Auswahl um aus diesem Objekt ein verwendbares Javascript-Objekt zu erzeugen:

1. eval()
Mittels eval() kann man ein JSON-Objekt direkt ausführen und so zu einem benutzbaren Javascript-Objekt machen. Das hat den gewaltigen Nachteil, dass nicht vertrauenswürdige Daten ausgeführt würden könnten und somit auch schadhafter Code ausgeführt werden kann. Daher sollte man darauf verzichten.

2. JSON-Parser
Ein JSON-Parser[1] bietet ebenso die Möglichkeit aus einem JSON-Objekt ein brauchbares Javascript-Objekt zu erzeugen. Hierbei kann man entscheiden, was man mit im JSON-Objekt vorhandenen Methoden vorgeht. Man kann sie umwandeln oder auch nicht. Der hier verwendete JSON-Parser überläd bei Einbindung alle Strings, Arrays etc. und ergänzt nötige Methoden für das umwandeln in ein Javascript-Objekt. Bei Bedarf können diese dann aufgerufen werden.

Ein Beispiel:
Wir haben ein PHP-Array. Dieses wird dann mittels der in PHP 5.2 enthaltenen JSON-Bibliothek[2] codiert. Für Versionen < PHP 5.2 ist eine Extention in PECL vorhanden [3].

$Data = array
(
	array
	(
		'name' => 'Stephan',
		'ort' => 'Bonn'
	),
	array
	(
		'name' => 'Thomas',
		'ort' => 'Köln'
	)
);
echo json_encode($Data);

Diese Daten werden nun via AJAX übertragen. In der Callback-Funktion des AJAX-Objekts haben wir dann folgende Code-Stelle:

var Data = response.responseText.parseJSON();

Der Funktion parseJSON können auch noch zusätzliche Filter übergeben werden, mit denen man entscheiden kann, wie mit Methoden etc. umgegangen werden soll. Dies lassen wir hier mal außen vor. Jetzt können wir einzelne Daten hiervon ausgeben:

alert(Data[0]['name']);

Der JSON-Parser erkennt, dass es sich hierbei um ein Array handelt und wandelt es um. Es ist also recht einfach die Daten zurückzuwandeln.

So kann man einfach und schnell Daten von PHP nach Javascript übertragen und diese dort weiterverarbeiten ohne ein externes Framework einzubinden (welche natürlich auch ihre Vorteile haben).

Demnächst werde ich in einem eigenen Artikel auf AJAX mit Prototype eingehen, lasst Euch überraschen .

Links
[1] http://www.json.org/
[2] http://de.php.net/json
[3] http://pecl.php.net/package/json