Using JSON in AJAX without using Eval

JSON (JavaScript Object Notation) is a great way to return small amounts of data that is already in a usable JavaScript object format. However, one common use of JSON is to use an eval statement to execute the code. I personally try to stay away from eval whenever possible for various reasons including security concerns.

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('type', 'text/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('type', 'text/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('type', 'text/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.

JSON

[...] check the full story here [...]

[...] writing my article on using JSON in Ajax without using Eval (click here to read the original article) I thought that it would be easier to have an object that could create [...]

Programming Tutorials...

I couldn't understand some parts of this article, but it sounds interesting...

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.