A JSON Load Object without using Eval

Tagged:  

After 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 the JSON with DOM manipulation. So below is the code for the object.

//JSON Dom Code
var jsonload=new Object();
jsonload.CreateObject=function(codeholderid, jsoncode){
	this.codeholderid=codeholderid; //This is the id (as a string) of the element to hold the script code
	this.jsoncode=jsoncode;
	this.loadJSON(codeholderid, jsoncode);
};
jsonload.CreateObject.prototype={
	loadJSON:function(codeholderid, jsoncode){
		var JSONCode=document.createElement("script");
		JSONCode.setAttribute('type', 'text/javascript');
		JSONCode.text = jsoncode;
		document.getElementById(codeholderid).appendChild(JSONCode);	       
	}
};

This code works by passing in the id of the element that should hold the script and the text of the code that should be run (this could also be used to dynamically load code). This code is great if you are going to use an Ajax call that calls content from the same domain (or if you use a server side proxy that tricks it into working). However, if you want to get your JSON from a cross domain you could use the below code.

//JSON Dom Code
var jsonload=new Object();
jsonload.CreateObject=function(codeholderid, jsoncode, url){
	this.codeholderid=codeholderid; //This is the id of the element to hold the script code
	this.jsoncode=jsoncode;
	this.url = url;
	this.loadJSON(codeholderid, jsoncode, url);
};
jsonload.CreateObject.prototype={
	loadJSON:function(codeholderid, jsoncode, url){
		var JSONCode=document.createElement("script");
		JSONCode.setAttribute('type', 'text/javascript');
	        JSONCode.setAttribute("src", url);
		document.getElementById(codeholderid).appendChild(JSONCode);	       
	}
};

In this code you would pass in the same arguments as the first example plus the additional url argument. The url can be to server side code that would create the JSON that could be based on parameters that are passed in through the url.

Below is an example that shows how the first example code would work with an Ajax call.

//Ajax Object Code
var net=new Object();
net.READY_STATE_UNINITIALIZED=0;
net.READY_STATE_LOADING=1;
net.READY_STATE_LOADED=2;
net.READY_STATE_INTERACTIVE=3;
net.READY_STATE_COMPLETE=4;
net.ContentLoader=function(url, onload, onerror, callingobject){
	this.url=url;
	this.req=null;
	this.callingobject=callingobject;
	this.onload=onload;
	this.onerror=(onerror) ? onerror : this.defaultError;
	this.loadXMLDoc(url);
};
net.ContentLoader.prototype={
	loadXMLDoc:function(url){
	        if(window.XMLHttpRequest){
	                this.req=new XMLHttpRequest();
	                if (this.req.overrideMimeType) {
          			 this.req.overrideMimeType('text/xml');
		        }
	        } else if (window.ActiveXObject){
	                try {
           			this.req=new ActiveXObject("Msxml2.XMLHTTP");
			} catch (err) {
				try {
					this.req=new ActiveXObject("Microsoft.XMLHTTP");
			} catch (err) {}
			}
	        }
	        if(this.req){
	                try{
				var loader=this;
	                        this.req.onreadystatechange=function(){
	                                loader.onReadyState.call(loader);
	                        };
	                        var TimeStamp = new Date().getTime();//This fixes a cache problem
	                        if(url.indexOf("?")<0){
		                        this.req.open('GET', url+"?timestamp="+TimeStamp, true);
	                        }else{
	                                this.req.open('GET', url+"×tamp="+TimeStamp, true);
	                        }
	                        this.req.send(null);
	                } catch (err){
	                        this.onerror.call(this);
	                }
	        }
	},
	onReadyState:function(){
	        var req=this.req;
	        var ready=req.readyState;
	        if(ready==net.READY_STATE_COMPLETE){
	                var httpStatus=req.status;
	                if(httpStatus==200||httpStatus===0){
	                        this.onload.call(this);
	                } else {
	                        this.onerror.call(this);
	                }
	        }
	},
	defaultError:function(){
	        alert("error fetching data!" + "\n\nreadyState: "+this.req.readyState + "\nstatus: "+this.req.status+"\nheaders: "+this.req.getAllResponseHeaders());
	}
};

//JSON Dom Code
var jsonload=new Object();
jsonload.CreateObject=function(codeholderid, jsoncode){
	this.codeholderid=codeholderid; //This is the id of the element to hold the script code
	this.jsoncode=jsoncode;
	this.loadJSON(codeholderid, jsoncode);
};
jsonload.CreateObject.prototype={
	loadJSON:function(codeholderid, jsoncode){
		var JSONCode=document.createElement("script");
		JSONCode.setAttribute('type', 'text/javascript');
		JSONCode.text = jsoncode;
		document.getElementById(codeholderid).appendChild(JSONCode);	       
	}
};

function StartJSONLoad(url, callingobject){
	//url is the url of the server side script to get the JSON
	//callingobject is the id of the element that is making the ajax call
	var AJAXConnection = new net.ContentLoader(url, FinishJSONLoad, JSONError, callingobject);
}
function FinishJSONLoad(){
	var codeholderid="DivHolder"; //Where DivHolder is the id of the element where the script should be created.
	var JSONObject = new jsonload.CreateObject(codeholderid, this.req.responseText);
}
function JSONError(){
        alert("There was an issue getting the data.");
}

To use this code you simply have to call the StartJSONLoad function and pass in the URL for the Ajax call (this would go to some server side code that would return the JSON) and the element that is calling the code [you have to use the document.getElementById('idofelement')] which could be the element that will hold the script. In the FinishJSONLoad function you will need to change the DivHolder string to the id of the element that you would like to hold the JSON code.

I hope this code makes it easy to start using JSON in your web applications without using the "evil" eval!

For more information on JSON visit json.org.

[...] the JavaScript. For those of you who have read my post on the JSON Load Object without using Eval (Click here to read the article) the following code will look very familiar as the methods are very [...]

[...] code he uses DOM manipulation instead of eval (you can read my post on using JSON without eval by clicking here) to bring the code into the [...]

[...] it into a script tag (if you haven’t already read my post on using JSON without using eval click here to read the post). The power of this is that you can use the data in JavaScript without any parsing [...]

The script at http://www.json.org/json2.js contains a parse method that is more secure than a simple eval() since it only returns a valid JS object if the JSON syntax is legal.

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.