Lessons learned in JavaScript, Part 1: Cross domain JSON and Firebug logging

Firebug has a little utility feature where you can log messages in your Javascript code to Firebugs console. This works a lot better than using a heap of alert() calls, but only works if you have Firebug running. Of course I found out the hard way when showing my work with Firebug turned off, at which time the code broke due to this undefined (actually undeclared) «console» variable.

Lesson learned: if you want to produce logs to see in Firebug, check to see if the console variable is declared. Now of course, you could check this before every call like this

if( typeof(console) != "undefined" )
  {console.log("graphBuilder(): success");}

The stupid with this approach is that you cannot move this bit into a function since the undeclared variable would throw a runtime error the moment you tried to pass it as an argument. What does work (for me), is that I define my own log() method and do the check within this. If console is not defined (e.g. Firebug is not loaded), I define both the console and the log function so they don’t throw a runtime error. The code looks like this:

function log(log_message) {
  /* check to see if Firebug is loaded. */
  if( typeof(console) == "undefined" ) {
    /* Avoid runtime errors by defining 
        the console object and its associated functions 
    */
    console = {}
    console.log = function(arg){;}
  }
  else console.log(log_message);
}

BTW, to those new to Javascript, variables have function scope, not block scope, so declaring a variable in the if statement works ;)

The other tidbit of knowledge I recently learned concerns JSON and the same origin policy. In theory, most modern browsers should not allow a script to call a service residing on a domain different from the page. So why does the following call work?

service = 'http://ws.geonames.org/postalCodeLookupJSON?'
parameters = {
postalcode:1540,
country:'NO'
}
$.getJSON(service, parameters, function(data) {
  alert(data.postalcodes[0].adminName2);
});

After posting the question on StackOverflow I found about a new header that is supported by newer browsers (for instance Firefox 3.5+) called  «Access-Control-Allow-Origin». If this header is set to allow * (meaning all domains), the request is let through by the browser to the calling script. You can also use this to whitelist specific domains. AFAI can tell, this could be a way of avoiding JSONP if your site has public, non-sensitive information.

About these ads

Legg igjen en kommentar

Fyll inn i feltene under, eller klikk på et ikon for å logge inn:

WordPress.com-logo

Du kommenterer med bruk av din WordPress.com konto. Logg ut / Endre )

Twitter picture

Du kommenterer med bruk av din Twitter konto. Logg ut / Endre )

Facebookbilde

Du kommenterer med bruk av din Facebook konto. Logg ut / Endre )

Google+ photo

Du kommenterer med bruk av din Google+ konto. Logg ut / Endre )

Kobler til %s

Følg med

Få nye innlegg levert til din innboks.

Bli med 687 andre følgere

%d bloggers like this: