jquery, ajax, servlet and null data in callback function

[Wendy Gibbons]

I am using tomcat and running my application on localhost 8080
I have this javascript/jquery call:

<script type="text/javascript">
	function GetBar(idToFind){
		alert("here");
		alert(idToFind);
	     jQuery.post("FindBarAjaxServlet",{id:idToFind},
			function(data){
			alert("in callback");
			alert(data);
			},"text");
	};
</script>

and the servlet is doing (i have taken out any attempt at json and just returning plain text)

resp_.setCharacterEncoding("utf-8");
//			resp_.setContentType("application/json");
resp_.setContentType("text/plain");
PrintWriter out = resp_.getWriter();
//			out.println(jsonObjResult);
out.println("{ name: \"John\", time: \"2pm\" }");
out.close();

I installed fiddler 2 and it says?

POST http://localhost:8080/staging/FindBarAjaxServlet HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12 (.NET CLR 3.5.30729)
Accept: text/plain, */*
Accept-Language: en-gb,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
X-Requested-With: XMLHttpRequest
Referer: http://localhost:8080/staging/pubs.jsp
Content-Length: 5
Cookie: JSESSIONID=79C8FCFDE56A14400963C93C564D3841
Pragma: no-cache
Cache-Control: no-cache

id=20

in the response window:

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Content-Type: text/plain;charset=utf-8
Content-Length: 31
Date: Tue, 09 Nov 2010 16:57:07 GMT

{ name: "John", time: "2pm" }

all of the alerts in the callback function happen but the one alerting about data is just an empty dialog box.
There are no errors in either the firefox error console or the tomcat window.
Does anyone have any ideas what is going wrong?

[Gregg Bolinger]

"text" is not a data type option. You should specify xml, html, script, or json.

[Wendy Gibbons]

when it used to be "application/json" in the servlet (now commented out) and "json" in the jquery
i got the message "data is null" in the firefox console

[Bear Bibeault]

Use Firebug to inspect the request/response to see what's really being returned.

[Wendy Gibbons]

isn't that what the fiddler is showing me?

[Bear Bibeault]

Either. Does the response contain the expected data and headers?

[Filipi Zimermann]

Try using the ajax method for better error details.
In your case, instead of jQuery.post() use:

 
$.ajax({
  type: 'POST',
  url: 'servlet/url',
  data: {id:20},
  success: function (data){ /* your callback here */},
  error : function (XMLHttpRequest, textStatus, errorThrown) {console.log(XMLHttpRequest); console.log(textStatus); console.log(errorThrown)},
  dataType: 'json'
}); 

I can bet the problem is the JSON sintax you are using in your servlet response.
Use quotes on the keys... to return something like:

{ "name": "John", "time": "2pm" } 

[Wendy Gibbons]

interestingly i get exactly the same behaviour when i use this:

	$.ajax({
  		url: "BlatentlyWrong",
  		method:'get',
  		dataType: 'json',
  		data: {id:"20"},
  		success: function(data) {
  				alert("success");
    				alert(data);
  		},
  		error: function(XMLHttpRequest, textStatus, errorThrown) {
  				alert("error");
    				console.log(textStatus, errorThrown);
  		}
	});
	

it goes into success with a null value for data.

[Filipi Zimermann]

Hmmm... very interesting.

My last shot is trying this at your servlet:

resp_.setCharacterEncoding("utf-8");
resp_.setContentType("application/json"); //the content type is one of my shots
PrintWriter out = resp_.getWriter();
out.println("{ \"name\": \"John\", \"time\": \"2pm\" }"); //the quotes arround the keys too
out.flush(); //the flush is another 
out.close();

But if you got null at the data parameter and didn't got the error, I'm not really sure if this will work.
Please let me know how you solved it.

[Wendy Gibbons]

I am testing this using eclipse with debug in the servlet.
I am getting the success response before my breakpoint has been activated.
I went back to the old version

<script type="text/javascript">
	var request = false;
	try {
		request = new XMLHttpRequest();
	} catch (trymicrosoft) {
		try {
			request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (othermicrosoft) {
			try {
				request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (failed) {
				request = false;
			}
		}
	}
	function GetBar(idToFind) {
		alert("here");

		if (request) {
			request.open("GET", "FindBarAjaxServlet?id=20", true);
			request.onreadystatechange = updatePage;
			request.send(null);
		}

	};
	function updatePage() {
		if (request.readyState == 4) {
			if (request.status == 200)
		         alert("Server is done!");
		       else if (request.status == 404)
		         alert("Request URL does not exist");
		       else
		         alert("Error: status code is " + request.status);
		}
	}
</script>

I am getting status code 0. Thank you all for your help. I haven't solved it yet