Help! Javascript/JSON!

Teh Russ

I posted this in the Programming forum, but didn't get much response. Thought it might do better over here.

Can any of you clever people help me with something?

I've got an assignment to create some code to import and display JSON data in Javascript - this bit I can do, and I've written a function to do it.

The bit I'm struggling with is that they want the function split into methods, which I'm not that well up on.

My current code looks like this:

function loadJSON(fname) 
{
	var request= new XMLHttpRequest;
	request.open("GET", fname,true);
	request.onreadystatechange=function() 
	{
		if (request.readyState == 4) 
		{
			if (request.status != 404) 
			{
				//document.getElementById("ServerData").innerHTML = request.responseText+"<br>";
				var data=eval("(" + request.responseText + ")");
				htmlString = "<table>";
				for(i = 0; i<4; i++)
				{
					htmlString += "<tr><td>" + data.table.rows[i].columns[0] + "</td><td>" + data.table.rows[i].columns[1] + "</td><td>" + data.table.rows[i].columns[2] + "</td></tr>";
				}
				htmlString +="</table>";
				document.getElementById("ServerData").innerHTML=htmlString;
			} 
			else 
			{
				document.getElementById("ServerData").innerHTML = fname + " not found";
			}
		}
	}
	request.send(null);
}

Now, this works... but they want it so they can call separate parts of it using these methods, like this:

var JSONRequest = new loadJSON("jsondata.json");
	JSONRequest.get();
	var Response = JSONRequest.response; // should contain the JSON code
	var jsonObject = Convert(Response); // this should be a function that formats the JSON into HTML

I've kinda done it, but my method doesn't seem to be returning an object that I can use in another function. This is how far I've got:

function loadJSON(filename) {
	this.filename = filename;	
	
	this.get = function(response){
		var JSONrequest= new XMLHttpRequest;
		JSONrequest.open("GET",this.filename,true);
			if (JSONrequest.readyState == 4) {
						if (JSONrequest.status != 404) {						
							this.response=JSONrequest.responseText;
						} else {
							this.response="error 1";
						}
				} else {
					this.response="error 2";
				}
		}	
}

... this seems to throw my "error 2" response every time I try it. Where am I going wrong? Am I even doing this right?

Any help you could give me would be invaluable.

BRENSH

There seems to be a couple of errors in your initialisation of the XMLHTTPREQUEST OBJECT. First of all you should try out and test the XHR object and see if it works normally. I could see a baltent error just by looking at the code.

When declaring the making a new xmlhttprequest object. You sould use

var JSONrequest= new XMLHttpRequest();

instead of

var JSONrequest= new XMLHttpRequest;

like you did

also when building an xhr object you should build it initially to be browser independent. Try throwing a few try/catch statements into the code so you can gracefully detect what browser is using it. Or even if it is working at all.

I think the area of JSONrequest.readyState == 4 is failing as the JSONrequest aint an object at all.

Try using this code

/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
@end @*/

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

Thanks to IBM

If its still not working I can give you a couple of tips on how to debug it quicker.