Using JSON in AJAX without using Eval ...

In an AJAX (I know that some would say that an application that uses JSON is not AJAX because it does not use XML, but I will still refer to it as AJAX.) application the JSON object will be returned from the server side as text through the XMLHTTPRequest object. Below is an example of what might might be sent from the server.

    var myJSONObject = {"bindings": [
            {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
            {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
            {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
        ]
    };

    Once this is returned it would often be passed into the eval statement. However I suggest that it is better to use DOM manipulation to create a script tag and place the code into that tag. Below is an example of this (codeholer is a div to hold the code, but this could be any tag that could hold the script tag).

            var JSONCode=document.createElement("script");
            JSONCode.setAttribute( ype, ext/javascript);
            document.getElementById(codeholder).appendChild(JSONCode);

Once you create the object you could insert the code via the text object (below it is this.req.responseText, but it may be different in your code) and it will then be available to your JavaScript code. Below is the above example with the added code for inserting the code.

           var JSONCode=document.createElement("script");
           JSONCode.setAttribute( ype, ext/javascript);
           JSONCode.text = this.req.responseText;
           document.getElementById(’codeholder’).appendChild(JSONCode);

Another option would be to pass information into the server side code using the url and not bother using the XMLHTTPRequest object. This will return the same as above but you cut out the middle man. It may be useful to use this in some instances although the above would be used more often. Below is an example of this option.

            var JSONCode=document.createElement("script");
            JSONCode.setAttribute( ype, ext/javascript);
            JSONCode.setAttribute("src", "returnsite.php?user=userid&Loggedin=0&timestamp=" + TimeStamp)
            document.getElementById(codeholder).appendChild(JSONCode);

JSON is a great option in certain situations where you want to transfer a small amount of information over the web. I would say that if you need to return a JavaScript object that would be used in some code then I would recommend using JSON over XML. If you are returning data and just want to display it I would use XML with XSLT (or even pre-formatted HTML). If cross domain is a concern JSON is a great option as you don’t need a server side proxy to get the data. As with anything what you decide to use will depend on the needs of your application, but whatever you do if you use JSON please don’t eval.
source: ajaxonomy

 View Full Story.

3 Comments |Add your comment.

Drakim said:

I have to say Im confused. How is your method any different from eval, other than possibly being slower?This whole blog post is about how you can avoid using eval with JSON, but you havent included any justification or reasoning as to why your method is better.

Posted at October 29, 2008 02:02:26 pm

Alex said:

I agree with Louis - how is placing the JSON inside a script tag any more secure than using eval?Ive been using eval as it doesnt cause any cross browser problems, and with the proliferation of browsers onto devices other than PCs, this is significant. Creating a script block that produces the same result in all browsers may not be so simple...

Posted at June 19, 2008 04:07:53 am

Louis said:

When you insert the JSON-object as the contents of a SCRIPT block, wont the engine do the same thing, i.e. eval-uating the text as JS code?

Posted at May 10, 2008 10:33:17 pm

Your Comment ...

  Name (required)

  Email (required, hidden)

  Website