My Portal Project

JSON for Dummies Part 1 covered the basics of how JSON can be used to return literal javascript to an AJAX client for local execution, thereby simplifying the local code required to process the AJAX responses. Part two will expand upon that and cover how functions can be returned and used locally.

I realized that I covered JSON only from an AJAX perspective last time, but the notation is the same except for the additional quotes around the name:value pairs. With normal JSON notation these are not needed, but from an AJAX response, it appears that they are needed to differentiate between what is a string, and what is a function, which we will look at now.

So Jake Howlett pointed out that I could simplify my code execution by making my error alert (that is returned from the AJAX call) into a function and then simply calling that function, and he is right. So how would we do this? Here is a sample of the way I had done it in the previous post:

{"ajaxReturn": 
     {
          "actionToTake": 
               "alert('The description and category fields are required.')"
     }
}

Which would be processed by this function when the AJAX response returns:

function processJsonResponse(originalRequest){
     var domText = originalRequest.responseText;
     var jsonResult = eval("(" + domText + ")");
     eval( jsonResult.ajaxReturn.actionToTake );
}

Ths requires the use of two EVAL statements which by itself is not a horrible thing, but simply not elegant. So let’s change the JSON response so that we have a method called “actionToTake”, and call it directly:

{"ajaxReturn":
     {"actionToTake" : 
          function(){
               alert('The description and category fields are required.');
          }
     }
}

In the above sample we created the “actionToTake” object as a function, with no parameters. Also notice how “actionToTake’s” value is not wrapped in quotes as it was with the old sample. Since it is no longer a simple string, it does not work if you wrap it in quotes. Now we can use the following code to process our action:

function processJsonResponse(originalRequest){
     var domText = originalRequest.responseText;
     var jsonResult = eval("(" + domText + ")");
     jsonResult.ajaxReturn.actionToTake();
}

Although it may seem like just two different ways to do the same thing, it is really just a very simple example of another JSON strength. Not only can a simple EVAL statement create easily accessible object properties, but also object methods. I originally though I would cover arrays this time around, but I felt that the methods were more important. Next will definitely be arrays.

This entry was posted on Tuesday, June 13th, 2006 at 8:50 pm and is filed under Code Bin, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.