json/ajax confusion - ajax

Question

I've got a response that sends back an entire table. N number of rows with 7 cells in each row. So I end up with nX7 responses. Apparently, I should be using JSON to handle the string appropriately. I've found tutorials on how to create a JSON object, but not so much on how to send it via ajax and how in sending it through ajax, the jsp knows to fill the JSON object with the responses... In other words,
I create JSON object in javascript (check)
place JSON object in the ajax code (confused)
response with JSON object filled (confused)
Parse JSON object so I can get at the data easily (maybe confused, we'll see after steps 2/3)
I am not using jquery as I'm still learning and jquery's syntax is confusing currently.
var sweekStart = document.getElementById("weekStart").value;
var smonth = document.getElementById("month").value;
var syear = document.getElementById("year").value;
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "empTableRepop.jsp?weekStart=" + encodeURIComponent(sweekStart)+"&month="+encodeURIComponent(smonth)+"&year="+encodeURIComponent(syear);
xmlhttp.open("POST",url,true);
//alert("made it to open");
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4){
//alert(xmlhttp.responseText);
var test = xmlhttp.responseText;
reFillTable(test);
}
}
xmlhttp.send(null);
The variable "test" (yea, bad name but it's temporary) is the object I want converted from a standard var to a JSONobject. If I understand correctly, JSON will already have the string parsed when it receives the response. I realise I can change "function()" to be directly "reFillTable(test)" but given the path it took me to get it working I ended up with that somehow lol. Will fix once everything is working properly.
EDIT:
This is how I "display" the information from the jsp/java file.
//Name Cell
out.println(empName);
//Mondays Hours
out.println(hoursArr[0]);
//Tuesdays Hours
out.println(hoursArr[1]);
//Wednesdays Hours
out.println(hoursArr[2]);
//Thursdays Hours
out.println(hoursArr[3]);
//Fridays Hours
out.println(hoursArr[4]);
//Total hours Cell
out.println(PTOAmt);

Answer 1

Assuming that your serverresponse is already working, this gives you the JavaScript object from the received JSON.
var test = JSON.parse( xmlhttp.responseText );
To clarify: There is no explicit "JSONObject" in JavaScript. JSON stands for JavaScript Object Notation and is simply a shorthand for writing normal JavaScript objects. It became, however, popular as a means of serializing data to send through AJAX-request.
In the end the server just sends a string in JSON format, which you on the other hand have to parse again (by JSON.parse()) in order to have an object representing the data send.
Just to add: JSON.stringify() is the operation in the other direction. Creating a string out of a JavaScript object.
With respect to the edit:
As said in the comment, this does not create valid JSON (have a look # json.org for an overview).
So now you have some choices:
Use a library like GSON to encode your data.
Parse your data by hand in JavaScript. (I would not recommend this).
Create a valid JSON string manually.
The code for the third option, may look like this:
// start the JSON object
out.print( "{" );
//Name Cell
out.println( "\"empName\":\"" + empName + "\"," );
// start an array for the next few values
out.print( "\"hours\": [" );
out.print(hoursArr[0] + "," );
out.print(hoursArr[1] + "," );
out.print(hoursArr[2] + "," );
out.print(hoursArr[3] + "," );
out.print(hoursArr[4] + "," );
// end the array
out.print( "]," );
//Total hours Cell
out.print( "\"PTOAmt\":\"" + PTOAmt + "\"");
// end the JSON
out.print( "}" );
This assumes that PTOAmt is a string as well.
On the long run you should use a library like mentioned in option (1) to handle the encoding.