Share

From this page you can share A JSON Load Object without using Eval to a social bookmarking site or email a link to the page.
Social WebE-mail
Enter multiple addresses on separate lines or separate them with commas.
A JSON Load Object without using Eval
(Your Name) has forwarded a page to you from Ajaxonomy
(Your Name) thought you would like to see this page from the Ajaxonomy web site.

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.