Archive for December, 2008

December 17th, 2008 at 12:32 pm

Unclutter array definitions in PHP

Here's a little trick how to print definitions of large arrays in a more beatiful way. Instead of passing a set of strings to the array() function, pass only one string to the explode() function!

For example, consider a section in the WordPress code (/wp-includes/post.php):

PLAIN TEXT
PHP:
  1. // currently
  2. $data = compact( array( 'post_author', 'post_date', 'post_date_gmt',
  3.     'post_content', 'post_content_filtered', 'post_title', 'post_excerpt',
  4.     'post_status', 'post_type', 'comment_status', 'ping_status',
  5.     'post_password', 'post_name', 'to_ping', 'pinged', 'post_modified',
  6.     'post_modified_gmt', 'post_parent', 'menu_order', 'guid' ) );
  7.  
  8. // equals
  9. $data = compact( explode('|', 'post_author|post_date|post_date_gmt|post_content|'.
  10.     'post_content_filtered|post_title|post_excerpt|post_status|post_type|'.
  11.     'comment_status|ping_status|post_password|post_name|to_ping|pinged|'.
  12.     'post_modified|post_modified_gmt|post_parent|menu_order|guid' ) );

Not only is the second part shorter, but it is also easier to edit and to overview. Of course this always depends on how many elements your array has; it's rather ridiculous with small arrays.

Comments: 0 Categories: Codebits Tags: , ,

December 11th, 2008 at 10:28 am

Lightweight JSON fetcher (3rd party capable!)

JSON is a great data transfer format, especially for AJAX style applications (much better than XML for that purpose). Fetching JSON from your server is usually not a big deal these days, since all common browsers provide the XMLHttpRequest.

But: It can be a big problem to fetch data from a third party server, due to the Same Origin Policy. Imagine you want to provide a service where people simply need to include a JS file from your server to make great things happen on their own sites. Fetching JSON with your script via XMLHttpRequest (even from your own server) will not work.

However, there's a great workaround, which I first saw at Jeffrey Sambells' site. His solution is more generic, as it's able to load any JavaScript (not only JSON data) dynamically. Also, it's compatible with the XMLHttpRequest functions. I just needed something to fetch my JSON, and I don't need all of the XMLHttpRequest. Yet I do want to use AJAX indicators and error handling. So I used his code and taylored a lightweight JSON fetcher. If compressed with a JavaScript packer, it is as tiny as 1.4 kB.

The client side

Here's the code for the fetcher. Save it as request.js or something and have it loaded with your other JS. You can also insert into other JS files.

PLAIN TEXT
JAVASCRIPT:
  1. /*
  2.     XssJsonFetch
  3.     (C) 2008 Alex Günsche
  4.     Available under the MIT license
  6.     based on XssHttpRequest (c) 2005 Jeffrey Sambells <info@jeffreysambells.com>
  7.     see info and terms of use: http://jeffreysambells.com/posts/2006/03/06/centralized_ajax_services/
  8. */
  9.  
  10. var XhrCount = 0;
  11. var XhrWatchList = [];
  12. reqjson = [];
  13.  
  14. var Xhr = function() {
  15.     this.ins = ++XhrCount;
  16.     this.u;
  17.     this.so;
  18.     this.w;
  19.     this.wc = 0;
  20.     this.to = 5;
  21.     this.responseText = null;
  22.     this.status = null;
  23.     this.readyState = 0;
  24. };
  25.  
  26. Xhr.prototype.onerror = function() {};
  27. Xhr.prototype.onload = function() {};
  28.  
  29. Xhr.prototype.srs = function(a) {
  30.     if (this.readyState <a || a == 0) {
  31.         this.readyState = a;
  32.  
  33.         if (this.readyState == 2)
  34.         {
  35.             this.srs(3);
  36.             if(typeof reqjson[this.ins] != 'undefined')
  37.             {
  38.                 var re = reqjson[this.ins];
  39.  
  40.                 // this is more secure, but sometimes fails on complex objects
  41.                 //re = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test( re.replace(/"(\\.|[^"\\])*"/g, ''))) && re || false;
  42.  
  43.                 re = re || false;
  44.  
  45.                 this.responseText = re;
  46.                 this.status = (re) ? 'ok' : 'string error';
  47.       }
  48.             else
  49.             {
  50.                 this.status = 'noresult';
  51.                 this.onerror();
  52.             }
  53.  
  54.             this.so.parentNode.removeChild(this.so);
  55.             reqjson = [];
  56.             this.srs(4);
  57.             this.onload();
  58.         }
  59.     }
  60. };
  61.  
  62. Xhr.prototype.load = function(u)
  63. {
  64.     this.u = u;
  65.     this.so = document.createElement('script');
  66.     this.so.id = 'reqjson'+this.ins;
  67.     this.so.charset = 'utf-8';
  68.  
  69.     this.srs(1);
  70.     this.so.type = 'text/javascript';
  71.     this.so.src = this.u + (this.u.indexOf('?') != -1 ? '&': '?') + 'jsonvar=reqjson' + this.ins;
  72.     this.so = document.getElementsByTagName('head')[0].appendChild(this.so);
  73.     XhrWatchList[this.ins] = this;
  74.     this.w = setInterval('XhrWatchList[' + this.ins + '].wl()', 50);
  75. };
  76.  
  77. Xhr.prototype.wl = function()
  78. {
  79.     this.wc++;
  80.     if (typeof reqjson[this.ins] != 'undefined')
  81.     {
  82.         clearInterval(this.w);
  83.         this.srs(2);
  84.     }
  85.     else if ( this.wc>= (this.to*20) )
  86.     {
  87.         clearInterval(this.w);
  88.         this.status = 'timeout';
  89.         this.onerror();
  90.     }
  91. };

The server side

Of course, you need a part on the server to generate the dynamic parts. In this example, we simply output the date, but it can be any data that is expressible with a JSON string (and that's a lot). Save it as ajax.php in the same directory on the server.

PLAIN TEXT
PHP:
  1. <?php
  2.     header("Expires: Mon, 01 Jan 2000 05:00:00 GMT");
  3.     header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
  4.     header("Cache-Control: no-cache, must-revalidate");
  5.     header("Pragma: no-cache");
  6.     header("Content-Type: text/javascript");
  7.  
  8.     // $results could as well be an array or any type of a scalar
  9.     // if you use an array, be sure that the keys and structure match what your JS expects
  10.     $results = date('d.m.Y H:i:s');
  11.  
  12.     $json = json_encode($results);
  13.  
  14.     $reqvar = preg_match('|^reqjson[0-9]+$|', $_GET['jsonvar'])
  15.         ? 'reqjson['.str_replace('reqjson', '', $_GET['jsonvar']).']'
  16.         : 'reqjson[0]';
  17.  
  18.     echo "$reqvar = $json;";
  19. ?>

... and a demo

A little demo to show you the integration into your own project. Save it as demo.html in the same directory as the other two, then load it in your browser.

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4.     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  5.     <script type="text/javascript" src="request.js"></script>
  6.     <style type='text/css'>
  7.         #main { border: 1px solid #888; padding: 10px; margin: 50px auto; width: 30em; }
  8.         #dynfield { color: #090; }
  9.         #button { border: 1px outset #888; padding: 3px; background: #eee; cursor: pointer; }
  10.     </style>
  11.     <script type='text/javascript'>/* <![CDATA[ */
  12.     window.onload = function()
  13.     {
  14.         var $ = function(el) { return document.getElementById(el); };
  15.  
  16.         // the event to trigger the request
  17.         $('button').onclick = function()
  18.         {
  19.             // if you use an indicator, make it appear here
  20.  
  21.             // any URL, relative or absolute, with parameters or without, even from a third-party server
  22.             var url = "ajax.php";
  23.  
  24.             var http = new Xhr;
  25.             http.load(url);
  26.  
  27.             http.onload = function()
  28.             {
  29.                 // hide your indicator
  30.                
  31.                 // here happens everything you need to perform with your fetched JSON
  32.                 var serverdate = http.responseText;
  33.                 if (serverdate) { $('dynfield').firstChild.data = serverdate; }
  34.             };
  35.  
  36.             http.onerror = function() {
  37.                 // some error handling (and hide indicator)
  38.                 alert('Error: ' + http.status);
  39.             };
  40.         };
  41.     };
  42.     /* ]]> */</script>
  43.     <title>AJAX demo</title>
  44. </head>
  46.     <div id='main'>
  47.         <p>The server date is: <strong id="dynfield"> </strong></p>
  48.         <p><span id="button">retrieve</span></p>
  49.     </div>
  50. </body>
  51. </html>

Comments: 0 Categories: Codebits Tags: , , ,