<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Alexander Stelter - foo, bar, baz &#187; active-x</title>
	<atom:link href="http://www.alexander-stelter.de/blog/tag/active-x/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.alexander-stelter.de/blog</link>
	<description>PHP, Javascript, Doctrine, Internet, Bücher, Schriesheim, Real-Life</description>
	<lastBuildDate>Fri, 20 Jan 2012 21:01:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>YUI statt json.js</title>
		<link>http://www.alexander-stelter.de/blog/199-yui-statt-json-js/</link>
		<comments>http://www.alexander-stelter.de/blog/199-yui-statt-json-js/#comments</comments>
		<pubDate>Thu, 15 May 2008 08:48:00 +0000</pubDate>
		<dc:creator>Alexander</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Programmierung]]></category>
		<category><![CDATA[active-x]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[json]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[soap]]></category>
		<category><![CDATA[yahoo]]></category>
		<category><![CDATA[yui]]></category>

		<guid isPermaLink="false">http://www.alexander-stelter.de/blog/?p=199</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>Wie ich vor einer Weile <a href="http://www.alexander-stelter.de/blog/archives/9-JavaScript-Object-Notation-JSON.html" >berichtete</a>, kann man mit <a href="http://www.json.org/" >JSON</a> eine Menge anstellen. Was mich immer ein wenig geärgert hat, wenn wir JSON und <a href="http://developer.yahoo.com/yui/" >YUI</a> 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.</p>
<p>Mit folgenden Code-Schnipseln kann man einen JSON-String in ein Array umwandeln:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">try</span>
<span style="color: #009900;">&#123;</span> 
<span style="color: #003366; font-weight: bold;">var</span> prod <span style="color: #339933;">=</span> YAHOO.<span style="color: #660066;">lang</span>.<span style="color: #660066;">JSON</span>.<span style="color: #660066;">parse</span><span style="color: #009900;">&#40;</span>jsonString<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
<span style="color: #009900;">&#125;</span>
<span style="color: #000066; font-weight: bold;">catch</span> <span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Invalid product data&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>Ebenfalls ist es möglich aus einem Array einen JSON String umzuwandeln. Das Beispiel findet sich im <a href="http://developer.yahoo.com/yui/json/" >JSON Manual</a> der YUI Seite. Wer YUI und JSON gemeinsam verwendet, kann sich nun getrost zurücklehnen und alles aus einem Guß verwenden <img src='http://www.alexander-stelter.de/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> .</p>
<div class="tweetthis" style="text-align:left;"><p> <a target="_blank" class="tt" href="http://twitter.com/intent/tweet?text=YUI+statt+json.js+http%3A%2F%2Falexander-stelter.de%2Fblog%2F%3Fp%3D199" title="Post to Twitter"><img class="nothumb" src="http://www.alexander-stelter.de/blog/wp-content/plugins/tweet-this/icons/en/twitter/tt-twitter-micro3.png" alt="Post to Twitter" /></a> <a target="_blank" class="tt" href="http://delicious.com/post?url=http://www.alexander-stelter.de/blog/199-yui-statt-json-js/&amp;title=YUI+statt+json.js" title="Post to Delicious"><img class="nothumb" src="http://www.alexander-stelter.de/blog/wp-content/plugins/tweet-this/icons/en/delicious/tt-delicious-micro3.png" alt="Post to Delicious" /></a> <a target="_blank" class="tt" href="http://digg.com/submit?url=http://www.alexander-stelter.de/blog/199-yui-statt-json-js/&amp;title=YUI+statt+json.js" title="Post to Digg"><img class="nothumb" src="http://www.alexander-stelter.de/blog/wp-content/plugins/tweet-this/icons/en/digg/tt-digg-micro3.png" alt="Post to Digg" /></a> <a target="_blank" class="tt" href="http://www.facebook.com/share.php?u=http://www.alexander-stelter.de/blog/199-yui-statt-json-js/&amp;t=YUI+statt+json.js" title="Post to Facebook"><img class="nothumb" src="http://www.alexander-stelter.de/blog/wp-content/plugins/tweet-this/icons/en/facebook/tt-facebook-micro3.png" alt="Post to Facebook" /></a></p></div>]]></content:encoded>
			<wfw:commentRss>http://www.alexander-stelter.de/blog/199-yui-statt-json-js/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JavaScript Object Notation (JSON)</title>
		<link>http://www.alexander-stelter.de/blog/9-javascript-object-notation-json/</link>
		<comments>http://www.alexander-stelter.de/blog/9-javascript-object-notation-json/#comments</comments>
		<pubDate>Wed, 21 Feb 2007 19:09:00 +0000</pubDate>
		<dc:creator>Alexander</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[active-x]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[json]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[soap]]></category>

		<guid isPermaLink="false">http://www.alexander-stelter.de/blog/?p=9</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://de.wikipedia.org/wiki/Web_2.0"  title="Web 2.0">Web 2.0</a> ist in aller Munde und dabei fällt auch meist im nächsten Satz das Wort <a href="http://de.wikipedia.org/wiki/Ajax_%28Programmierung%29"  title="AJAX">AJAX</a>. 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.<span id="more-9"></span><!-- s9ymdb:16 --><img width='450' height='434' style="border: 0px; padding-right: 5px;" src="/blog/uploads/programmierung/Ajax-vergleich.png" alt="" /></p>
<div class="serendipity_imageComment_txt">(Quelle: <a href="http://de.wikipedia.org" >de.wikipedia.org</a>)</div>
<p>Zur Übertragung der Daten gibt es einige Formate, die sich in der Praxis bewiesen haben. Hierzu gehören u.a. <a href="http://de.wikipedia.org/wiki/XML"  title="XML">XML</a>, <a href="http://de.wikipedia.org/wiki/ReStructuredText"  title="reST">reST</a>, <a href="http://de.wikipedia.org/wiki/JSON"  title="JSON">JSON</a> und <a href="http://de.wikipedia.org/wiki/SOAP"  title="SOAP">SOAP</a>.</p>
<p><strong>Was ist JSON?</strong><br />
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. </p>
<p>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.</p>
<p><strong>Verarbeitung</strong><br />
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:</p>
<p><strong>1. eval()</strong><br />
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.</p>
<p><strong>2. JSON-Parser</strong><br />
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.</p>
<p><strong>Ein Beispiel:</strong><br />
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 <a href="http://pecl.php.net"  title="PECL">PECL</a> vorhanden [3].</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$Data</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span>
<span style="color: #009900;">&#40;</span>
	<span style="color: #990000;">array</span>
	<span style="color: #009900;">&#40;</span>
		<span style="color: #0000ff;">'name'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'Stephan'</span><span style="color: #339933;">,</span>
		<span style="color: #0000ff;">'ort'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'Bonn'</span>
	<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
	<span style="color: #990000;">array</span>
	<span style="color: #009900;">&#40;</span>
		<span style="color: #0000ff;">'name'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'Thomas'</span><span style="color: #339933;">,</span>
		<span style="color: #0000ff;">'ort'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'Köln'</span>
	<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">echo</span> <span style="color: #990000;">json_encode</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$Data</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

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

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> Data <span style="color: #339933;">=</span> response.<span style="color: #660066;">responseText</span>.<span style="color: #660066;">parseJSON</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>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:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>Data<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'name'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>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.</p>
<p>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). </p>
<p>Demnächst werde ich in einem eigenen Artikel auf AJAX mit <a href="http://www.prototypejs.org/"  title="Prototype">Prototype</a> eingehen, lasst Euch überraschen <img src='http://www.alexander-stelter.de/blog/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> .</p>
<p><strong>Links</strong><br />
[1] <a href="http://www.json.org/"  title="http://www.json.org/">http://www.json.org/</a><br />
[2] <a href="http://de.php.net/json"  title="http://de.php.net/json">http://de.php.net/json</a><br />
[3] <a href="http://pecl.php.net/package/json"  title="http://pecl.php.net/package/json">http://pecl.php.net/package/json</a></p>
<div class="tweetthis" style="text-align:left;"><p> <a target="_blank" class="tt" href="http://twitter.com/intent/tweet?text=JavaScript+Object+Notation+%28JSON%29+http%3A%2F%2Falexander-stelter.de%2Fblog%2F%3Fp%3D9" title="Post to Twitter"><img class="nothumb" src="http://www.alexander-stelter.de/blog/wp-content/plugins/tweet-this/icons/en/twitter/tt-twitter-micro3.png" alt="Post to Twitter" /></a> <a target="_blank" class="tt" href="http://delicious.com/post?url=http://www.alexander-stelter.de/blog/9-javascript-object-notation-json/&amp;title=JavaScript+Object+Notation+%28JSON%29" title="Post to Delicious"><img class="nothumb" src="http://www.alexander-stelter.de/blog/wp-content/plugins/tweet-this/icons/en/delicious/tt-delicious-micro3.png" alt="Post to Delicious" /></a> <a target="_blank" class="tt" href="http://digg.com/submit?url=http://www.alexander-stelter.de/blog/9-javascript-object-notation-json/&amp;title=JavaScript+Object+Notation+%28JSON%29" title="Post to Digg"><img class="nothumb" src="http://www.alexander-stelter.de/blog/wp-content/plugins/tweet-this/icons/en/digg/tt-digg-micro3.png" alt="Post to Digg" /></a> <a target="_blank" class="tt" href="http://www.facebook.com/share.php?u=http://www.alexander-stelter.de/blog/9-javascript-object-notation-json/&amp;t=JavaScript+Object+Notation+%28JSON%29" title="Post to Facebook"><img class="nothumb" src="http://www.alexander-stelter.de/blog/wp-content/plugins/tweet-this/icons/en/facebook/tt-facebook-micro3.png" alt="Post to Facebook" /></a></p></div>]]></content:encoded>
			<wfw:commentRss>http://www.alexander-stelter.de/blog/9-javascript-object-notation-json/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

