Tech Blog

Jay's Technical blog

JSON and AJAX

30 March 2006
Jay Kimble

[WARNING! This is an archived post and as such there may be things broken/missing here.. you have been warned.]

[Ok, Jeremy, requested a fuller post on JSON, so I thought I would comply, and try to do the brain dump].

As mentioned before, I  recently ran into some compatibility issues; specifically with the Mac.  My JAAJAX Library as you all know uses pure XML because… hey, it’s XML… XML rules! (just call me JayXML… although that nickname might be trademarked <grin />).  Seriously, XML is great for transferring data between systems.  So it seemed like the perfect answer for AJAX (note: that the X is for XML).

So when everything broke on the Mac it was back to the drawing board.  I put my career on the line with this code, it had better work… (My boss had recommended Ajax.Net)

Ok, so I ended up at Apple’s Developer’s site (a place I know too well for my own comfort).  There was a reference to JSON on the site.  So if you clicked the link you came to the very cryptic looking description of the format.  As mentioned before it’s really not that hard to understand, but the presentation really stinks.  Let’s try a different link… Take a look at the JSON in Javascript link.  Now it’s real clear, hunh? (I’m doing the brain dump… part of the dump is getting you to where I got).

Ok, enough surfing. let’s start looking at the format a little better (don’t worry I’ll tell you how to use it with AJAX).

Examples

In my case I have a simple object that I want to return.  It looks like this

JAAJAX Return Object
Error Property – String
ReturnValue Property – ?? (this could be a string, it could be an int, it might be an object)

So to see this in action.  Let’s assume that we want to return a string in the return value property.  The JSON string looks like this:
{"Error":"", "ReturnValue":"My String"}

That’s probably not too hard.  Let me break that down. The curly braces tell javascript that this is an object with properties only (you can’t give it code), so this is more like a classic c struct or a VB Type or… well you probably get it… there’s no code here, just data.  Now let’s break things apart at the comma.  Which gives us two items:
"Error":""
"ReturnValue":"My String"
Again this isn’t too hard.  The colon separates the property name and it’s value. So Property Error="" (which is good no error), and the ReturnValue="My String" (also good we have a return value).

Ok, that was easy.  So let’s do something a little more complex.  Let’s say that we want to have that ReturnValue property actually return some kind of object.  Here’s a real world scenario.  This return value is the result of a call that is populating a database table and we need to get an success True/False and the new id if it was successful, so the ReturnValue is going to be an object with a WasSuccessful property and a NewId property.  Here’s the JSON (BTW, this is all coming off the top of my head, so someone will need to test… maybe me.. Ok, before publishing I did test… my code was fine, BlogJet introduce the fancy quotes which screwed me up.)
{"Error":"", "ReturnValue": {"WasSuccessful":true, "NewId":1001} }

Alright so I can skip over to the ReturnValue, see that it’s value is contained within curly braces?  That means that ReturnValue is an object and it will return a complex value.  The only real differences with this object is that we aren’t returning strings.  The first property is a boolean (well, actually it contains the boolean true value) and then second property is a number). 

So now you see by nesting you can build some pretty crazy constructs.  But what about arrays?  Well, now the fun begins!  Arrays are signified by Square Brackets, so let’s return some ints.  Here’s the JSON:
{"Error":"", "ReturnValue":[ 1, 2, 3 ] }

Not sure an explanation is needed, but we are returning an array of 3 numbers to the ReturnValue Property.  Let’s do something useful like return an array of option-like objects.  An option object for a select box contains a text property and a value property.  So that looks like this:
{"Error":"", "ReturnValue":[ { "text":"My Text", "value":1 }, { "text":"My Text2", "value":2 } ] }

I’m done explaining at this point… just look at the last two examples; this last one combines them both (it’s an array where each element contains an object).

Implementation in an AJAX world

Ok, so how do you take JSON string and reconstitute it as an object.  It’s drop dead simple:
var MyObject = eval(JSONString);

Yep, the eval function works great.  There’s another option I discovered (on another site which I’ve lost the URL to)
var MyObject = new Function("return " + valueString)();

This both creates a temporary function that returns the object and executes it in one shot.  This will protect you somewhat from a string that you don’t trust 100% (like one coming from a different server than the one the original page is from).  The upcoming release of JAAJAX will use this method for code safety.

So on the server you really have just a couple things you have to do:

  1. Set the content type to application/json (like this in ASP.Net C# syntax – Response.ContentType ="application/json";)
  2. Return only the JSON string

Yes, this means that it’s not really XML coming down, So you want the responseText property of the xmlHttpRequest object and not the responseXML.


After Blog Mint - I know I don't do these often, but I thought I should mention that have been playing with Thycotic's coolSecret Server. They just released their 1.1 version. It's free for a single user. It's a web site, BTW, that you can use it to store all kinds of secrets like password, account numbers, etc.


JSON on XMLHTTP

26 March 2006
Jay Kimble

[WARNING! This is an archived post and as such there may be things broken/missing here.. you have been warned.]

So this week had a painful technology ending… I’m preparing a site for a beta launch.  My check list for Friday had an item on the list.: Test Ajax on the Mac (using Safari).  We had been testing the Mac all through our dev cycle, but somehow I managed to not test the couple of places I’m using jaajax to enable AJAX callbacks. In the process I discovered a very important thing (and I hope I’m wrong).  Sarissa.js doesn’t work with the Mac.  Or rather if you are using Sarissa DOMParser for consistent XML XPathing, you will discover that Safari doesn’t work.  I’m not sure if it’s version 2.0 of Safari (which is what my Mac uses… yes, I own one.. please forgive me, it’s only for testing scenarios like this one).

My first reaction was “Great… I hate Safari!  Why can’t it come up to full standards… the marketing hype says it is… but why is it that the Mozilla-based browsers support a much wider array of programmable features!”  Ok, you get the idea… I was living up to my boss’s monicker

So what did I do… well, I want surfing to see if others had face the Safari/Ajax demon and killed it.  Nope XmlHttp has been around since version 1.2 of Safari.  And the Mac Marketing guys will note that “Hey you can actually use it for all the examples on Mozilla.com except of course the ones that use the DOMParser.”  I really, really wanted to use XML under the covers.

I have a deadline and need to get this fixed, so I caved and came across a really cool little technology: JSON.  It’s actually a really old technology that dates back to the standardizing of Javascript as ECMAScript.  JSON is actually a shorthand notation for creating objects.  So for instance my original jaajax source XML looked like this (sorry I don’t have the old source right in front of me)
<return>
  <functionName_Return>return value as string</functionName_Return>
  <functionName_Error>error string</functionName_Error>
</return>

I had to go through DOMParser gyrations to parse all this…  Here’s the JSON version of the above:
{ “_Return”: “return value”, “_Error”: “Error string” }
You can parse this with a simple eval and it gives you an object with 2 properties: “_Return” and “_Error.”  Did it work on the Mac?  Yes, it did (although there were some other issues that I had to deal with in my original site).

Needless to say I am abandoning Sarissa and XML for future versions of my JAAJAX library (yep there is a future version coming soon!  I haven’t abandoned it yet…I have big plans for the library going forward!)

[UPDATE: I guess I missed mentioning the major point here... COMPATIBILITY!  This should be a fairly compatible way to transfer data and manipulate it via XMLHttp.  Plus you get the added benefit of reconstituting a message (stealing from the SOAP guys) as a data object that is easily used within Javascripts]


Is your first (second, third,... tenth) Offshoring attempt DOOMed?

15 March 2006
Jay Kimble

[WARNING! This is an archived post and as such there may be things broken/missing here.. you have been warned.]

Ben’s post made me think about something I’ve been meaning to write about.  I recently left a company (who shall remain nameless to protect me from lawsuits… if you remember the name keep it to yourself) that was trying to do offshoring because someone at a much higher level than CIO had read all the hype that it was cheaper, and was demanding that IT prove that they were cost effective by investigating and hiring a company for offshore work.  I would tell you the name of the offshore company (and they are one of the better ones I’m told), but lawsuits… remember??

Before I proceed to tell you how it worked out.  I want you to know that I have known many Indian programmers in the states and all them have been really good at what they do (read they work hard and were extremely competent… and the ones I’ve known were way better than the average US-born programmer).  So don’t accuse me of bigotry!

So back to the story… The nameless company had tried 4 times on 4 different projects.  They first quoted it in house and then got the offshore company to quote it.  The offshore company usually would take an extra month or so to do the project with a price of $50k less than doing the project internal.  So that sounds like a good deal! Except one thing… when we got the project we were expected to pay immediately (which we did); after close scrutiny the project was never fully completed by my standards (there were always critical features missing as well as horrible bugs… not to mention that it rarely was coded to anything close tothe corporate standard); the offshore company was gone.  So we would have to fix the project so it could go live; the amount of time to do this usually equalled the original time estimate given for the project if it had been done internally.   

I wonder if other companies are having the same kind of luck, and if they are why are they doing it?.  It seems to me that having to pay twice the amount is not getting something cheaper… it smells fishy to me.