<?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>Juozas devBlog &#187; json</title>
	<atom:link href="http://dev.juokaz.com/tag/json/feed" rel="self" type="application/rss+xml" />
	<link>http://dev.juokaz.com</link>
	<description>Random ideas, scripts and facts</description>
	<lastBuildDate>Mon, 22 Mar 2010 10:48:42 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Debugging with FirePHP and Firebug</title>
		<link>http://dev.juokaz.com/php/debugging-with-firephp-and-firebug</link>
		<comments>http://dev.juokaz.com/php/debugging-with-firephp-and-firebug#comments</comments>
		<pubDate>Thu, 12 Mar 2009 15:09:43 +0000</pubDate>
		<dc:creator>Juozas</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Websites]]></category>
		<category><![CDATA[console]]></category>
		<category><![CDATA[debug]]></category>
		<category><![CDATA[execution time]]></category>
		<category><![CDATA[firebug]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[firephp]]></category>
		<category><![CDATA[headers]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[json]]></category>
		<category><![CDATA[profile]]></category>
		<category><![CDATA[zend framework]]></category>

		<guid isPermaLink="false">http://dev.juokaz.com/?p=355</guid>
		<description><![CDATA[One may debug his application with print(&#8221;) statements all other the place or alert(&#8221;) for JavaScript. Luckily some years ago Firebug extension for Firefox was introduced, which introduced (?) console. Console works absolutely the same as in Linux and can be used not only to execute commands, but receive information from various sources.
To start with, [...]]]></description>
			<content:encoded><![CDATA[<p>One may debug his application with print(&#8221;) statements all other the place or alert(&#8221;) for JavaScript. Luckily some years ago <a href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug</a> extension for Firefox was introduced, which introduced (?) console. Console works absolutely the same as in Linux and can be used not only to execute commands, but receive information from various sources.</p>
<p>To start with, I just love <a href="https://addons.mozilla.org/en-US/firefox/addon/6149">FirePHP</a>. This extension extends Firebug itself and allows PHP to show messages in the console.</p>
<p><img class="size-full wp-image-356" style="float: right;" title="FirePHP" src="http://dev.juokaz.com/wp-content/uploads/2009/03/firephp.png" alt="FirePHP" width="402" height="127" />FirePHP use special headers to send required information, so browses without FirePHP doesn&#8217;t feel any difference, but others can easily extract information. It doesn&#8217;t mean that DB profiling information should be visible in production server, but it definitely helps in development stages. If you look at normal website&#8217;s headers you would see something like this:</p>
<pre>HTTP/1.x 200 OK
Date: Thu, 12 Mar 2009 14:29:29 GMT
Server: Apache/2.2.9 (Ubuntu) PHP/5.2.6-2ubuntu4.1 ...
X-powered-by: PHP/5.2.6-2ubuntu4.1
Content-Length: 0
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html</pre>
<p>where FirePHP modifies it to:</p>
<pre>HTTP/1.x 200 OK
Date: Thu, 12 Mar 2009 14:28:39 GMT
Server: Apache/2.2.9 (Ubuntu) PHP/5.2.6-2ubuntu4.1 ...
X-powered-by: PHP/5.2.6-2ubuntu4.1
X-Wf-Protocol-1: http://meta.wildfirehq.org/Protocol/JsonStream/0.2
X-Wf-1-Structure-1: http://meta.firephp.org/Wildfire/Structure/FirePHP/FirebugConsole/0.1
X-Wf-1-Plugin-1: http://meta.firephp.org/Wildfire/Plugin/ZendFramework/FirePHP/1.6.2
X-Wf-1-1-1-1: 56|[{"Type":"INFO","File":"","Line":""},"This is a debug!"]|
X-Wf-1-1-1-2: 58|[{"Type":"ERROR","File":"","Line":""},"This is an error!"]|
Content-Length: 0
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html</pre>
<p><a href="http://www.firephp.org/">FirePHP</a> website has libraries for sending these headers, but since I was trying it when using Zend Framework, I chose Zend_Log_Writer_Firebug module. It works as writer interface for Zend_Log and since Zend_Log is (or should be) used for all logging in ZF, you can get very nice access to all information (execution time, queries, warnings, etc.) from browser. For example, to send something with Zend Framework, code would look like this:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// Place this in your bootstrap</span>
<span style="color: #000088;">$writer</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Zend_Log_Writer_Firebug<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$logger</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Zend_Log<span style="color: #009900;">&#40;</span><span style="color: #000088;">$writer</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// Use this in your model, view and controller files</span>
<span style="color: #000088;">$logger</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">log</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'This is a log message!'</span><span style="color: #339933;">,</span> Zend_Log<span style="color: #339933;">::</span><span style="color: #004000;">INFO</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Simple and clean (it won&#8217;t work if Zend_Controller_Front is not used, look at <a href="http://framework.zend.com/manual/en/zend.log.writers.html#zend.log.writers.firebug">manual</a>).</p>
<p>Logging to files still should be used for information which will be required for further analysis, eg. payment gateway errors, but such information as execution time works perfectly in FirePHP. Users doesn&#8217;t care how fast page was rendered, but developers sometimes needs this information and in my opinion, using FirePHP sounds most reasonable. Have you tried it?</p>
]]></content:encoded>
			<wfw:commentRss>http://dev.juokaz.com/php/debugging-with-firephp-and-firebug/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>JSON &#8211; perfect data exchange format for AJAX</title>
		<link>http://dev.juokaz.com/javascript/json-perfect-data-exchange-format-for-ajax</link>
		<comments>http://dev.juokaz.com/javascript/json-perfect-data-exchange-format-for-ajax#comments</comments>
		<pubDate>Sat, 07 Mar 2009 19:46:50 +0000</pubDate>
		<dc:creator>Juozas</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[arraytoxlm]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[json]]></category>
		<category><![CDATA[jsonp]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[response]]></category>
		<category><![CDATA[status message]]></category>
		<category><![CDATA[xml]]></category>

		<guid isPermaLink="false">http://dev.juokaz.com/?p=321</guid>
		<description><![CDATA[If you are using library such as jQuery, it supports AJAX responses in very different formats. For example, jQuery.get supports  &#8220;xml&#8221;, &#8220;html&#8221;, &#8220;script&#8221;, &#8220;json&#8221;, &#8220;jsonp&#8221; and &#8220;text&#8221;. Which to choose?
Let&#8217;s say we have these variables, which we want to pass to JavaScript:

$array = array&#40;
	'status' =&#62; 'OK',
	'message' =&#62; 'My status message',
	'additional' =&#62; array&#40;1, 2, 3, [...]]]></description>
			<content:encoded><![CDATA[<p>If you are using library such as jQuery, it supports AJAX responses in very different formats. For example, <a href="http://docs.jquery.com/Ajax/jQuery.get">jQuery.get</a> supports  &#8220;xml&#8221;, &#8220;html&#8221;, &#8220;script&#8221;, &#8220;json&#8221;, &#8220;jsonp&#8221; and &#8220;text&#8221;. Which to choose?</p>
<p>Let&#8217;s say we have these variables, which we want to pass to JavaScript:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$array</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
	<span style="color: #0000ff;">'status'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'OK'</span><span style="color: #339933;">,</span>
	<span style="color: #0000ff;">'message'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'My status message'</span><span style="color: #339933;">,</span>
	<span style="color: #0000ff;">'additional'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">3</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">4</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">5</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">6</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">7</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">8</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">9</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">10</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>From all available formats XML and JSON can be chosen as two absolutely different formats, since HTML is related to XML, JSONP to JSON. Let XML be our first choice. First, you need to encode this data in <a href="http://en.wikipedia.org/wiki/XML">XML</a> format, here <a href="http://snipplr.com/view/3491/convert-php-array-to-xml-or-simple-xml-object-if-you-wish/">ArrayToXML</a> class can be used. Using given class, output can be generated by:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">echo</span> ArrayToXML<span style="color: #339933;">::</span><span style="color: #004000;">toXml</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$array</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Quite straightforward, but if you know how XML structured, you can image that output is &#8220;huge&#8221;:</p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;data<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;status<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>OK<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/status<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;message<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>My status message<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/message<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;additional<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;unknownNode<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>1<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/unknownNode<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;unknownNode<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>2<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/unknownNode<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;unknownNode<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>3<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/unknownNode<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;unknownNode<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>4<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/unknownNode<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;unknownNode<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>5<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/unknownNode<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;unknownNode<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>6<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/unknownNode<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;unknownNode<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>7<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/unknownNode<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;unknownNode<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>8<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/unknownNode<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;unknownNode<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>9<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/unknownNode<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;unknownNode<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>10<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/unknownNode<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/additional<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;/data<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p>XML result&#8217;s mark-up is probably bigger than data itself &#8211; not very good when response should arrive as soon as possible. Now let&#8217;s compare it to JSON. PHP has native JSON support, so everything can be done with one function: <a href="http://uk3.php.net/json_encode">json_encode</a>. It is used like this:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">echo</span> <span style="color: #990000;">json_encode</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$array</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Neither harder, nor easier to use than ArrayToXML. Main strength of JSON is output size:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">&quot;status&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;OK&quot;</span><span style="color: #339933;">,</span>
<span style="color: #3366CC;">&quot;message&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;My status message&quot;</span><span style="color: #339933;">,</span>
<span style="color: #3366CC;">&quot;additional&quot;</span><span style="color: #339933;">:</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span><span style="color: #CC0000;">3</span><span style="color: #339933;">,</span><span style="color: #CC0000;">4</span><span style="color: #339933;">,</span><span style="color: #CC0000;">5</span><span style="color: #339933;">,</span><span style="color: #CC0000;">6</span><span style="color: #339933;">,</span><span style="color: #CC0000;">7</span><span style="color: #339933;">,</span><span style="color: #CC0000;">8</span><span style="color: #339933;">,</span><span style="color: #CC0000;">9</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#125;</span></pre></div></div>

<p>Thats it. For this example, size of outputs is different, but still so small, that speed increase would be unnoticeable. However, with bigger data sizes output size will start to matter. XML format, in my belief, is simply not the best in storing data efficiently, but still I use it for <a href="http://www.xmlrpc.com/">XML-RPC</a> or <a href="http://en.wikipedia.org/wiki/SOAP">SOAP</a>. </p>
<p>jQuery (probably other libraries also) transforms returned string into object in background (it also does it safe, don&#8217;t evals() blindfolded) &#8211; response data can be used immediately. I haven&#8217;t checked, but transforming XML into object should be remarkably slower. You just need to make sure to specify correct response format and jQuery will do all the work for you:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	$.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span>
		<span style="color: #3366CC;">'server.php'</span><span style="color: #339933;">,</span>
		<span style="color: #009900;">&#123;</span>param <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;value&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		<span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>data<span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>
			<span style="color: #006600; font-style: italic;">// data is now object</span>
			<span style="color: #006600; font-style: italic;">// data.status, data.message,</span>
			<span style="color: #006600; font-style: italic;">// data.additional.0-10 is available</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		<span style="color: #3366CC;">&quot;json&quot;</span> <span style="color: #006600; font-style: italic;">//!!!</span>
	<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>I used to use XML or even HTML for AJAX communications, but as soon as I discovered JSON, I absolutely forgot about all previous methods. In my opinion, <a href="http://www.json.org/">JSON</a> should be used as a default choice. Not only future browsers will have <a href="https://developer.mozilla.org/en/JSON#Using_native_JSON">native JSON support</a>, but it&#8217;s very easy to use even now. Both server-side app&#8217;s and jQuery support for JSON is very good (and fast).</p>
]]></content:encoded>
			<wfw:commentRss>http://dev.juokaz.com/javascript/json-perfect-data-exchange-format-for-ajax/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
