I have a simple web service that outputs a JSON object to a client.
If accessed with a plain browser it outputs the JSON string. However when accessed with $.getJSON it always return a empty response although there is a response header:
Content-Type application/json; charset=utf-8
Content-Length 122
Connection keep-alive
The code for the call is like this:
$.getJSON('http://192.168.0.1/api/v1/search', { query : $('#searchfield').val() },
function(data){
$.log("Response: %s", data.some_field);
}
);
Also the callback function is not invoked.
Any ideas?
Related
There is a URL I am using in a project of mine, that is working just fine. I make a request from one web server, to a different IP address, invoking a page that outputs data in this format:
[{"PhoneNumber":"+123456789","Name":"Mark"},
{"PhoneNumber":"+123456789","Name":"Josh"},
{"PhoneNumber":"+123456789","Name":"Alex"},
{"PhoneNumber":"+123456789","Name":"John"},
{"PhoneNumber":"+123456789","Name":"Sean"}]
And I can get and process that data with a function call such as this:
$.ajax({
url: serverAddress + "/getpeople",
dataType: "jsonp",
timeout: 4000,
success: function(response) {
for(var i in response) {
alert(response[i].Name);
}
}
});
Here is what's confusing me. From what I've learned about JSONP so far, it isn't actually data, but is instead a function. So the response should be wrapped in a function call, such as callback(), and then I could implement a function callback(data) {} in my project to process the data.
But in this case, the data seems to be just JSON data, which I think should cause a cross-origin error to be generated? But it doesn't.
When I try to call another URL from the same server, fetching an ordinary plain text file, then I do get a cross-origin error, which complains in the console:
Reason: CORS header 'Access-Control-Allow-Origin' missing
But the original getpeople URL does not have that header either. When I examine the response headers in Firefox's document inspector, all of the headers are:
Connection: "close"
Content-Type: "text/html;charset=utf-8"
Date: "Mon, 5 Oct 2015 08:29:07 GMT"
Server: "ServerName/1.1.10011.2211"
So:
The data is not formatted as a JSONP callback
It is served from a different IP address than the web application
The response doesn't have a Access-Control-Allow-Origin header
Why does this work?
I have a jqGrid edit form that contains a date field. I want to implement exception handling so that error messages from the server will be displayed in the edit form. Example response:
HTTP/1.1 400 Bad Request
Server: Apache-Coyote/1.1
Date: Fri, 28 Jun 2013 15:47:21 GMT
Content-Type: application/json
Transfer-Encoding: chunked
Connection: close
11
"Bad Date format"
0
jqGrid only displays "error status:'Bad Request' Error Code: 400", at the top of the form. How can I have it also display the error message: "Bad Date format" ?
You should use errorTextFormat callback of form editing. As the parameter the callback get jqXHR object which is wrapper on XMLHTTPRequest object. It's responseText property represent the body of the response (11\n"Bad Date format"\n0 in your case). The status property gets you the HTTP status code (400 in your example). You can use getResponseHeader and getAllResponseHeaders to examine all HTTP headers.
By the way I find very strange that the response contains Content-Type: application/json, but the body of the response don't contains JSON string.
Assume that your response contains 2 fields: status (OK, ERROR,..) and message then you should write a function like this:
validateAfterSubmit = function(response, postdata){
var json = response.responseText; // response text is returned from server.
var result = JSON.parse(json); // convert json object into javascript object.
return [result.status == 'OK', result.message, null];
};
and specify in the edit/add options:
//edit options
{ url: '...',
afterSubmit: validateAfterSubmit
},
//add options
{ url: '...',
afterSubmit: validateAfterSubmit
},
hopefully this can help
I'm writing a chrome extension that uses AJAX to talk to a server. I want to read the KEY in set-cookie from AJAX response, but I cannot find a way to do this.
I have tried document.cookie and xhr.getAllResponseHeaders()
$.get(myURL,
function (output, status, xhr) {
console.log(document.cookie); //empty
console.log(xhr.getAllResponseHeaders());
//Only Connection and Content-Type shows
}
);
The raw response header is:
Connection:Close
Content-Type:text/html
Set-Cookie:KEY=DFDSFDCB; PATH=/;
I know that according to spec, getAllResponseHeaders() is supposed to filter out set-cookie field. Is there any workaround?
I'm trying to get a list of Cities by sending the State name through Ajax in my SpringMVC 3.0 project.
For the purpose, I've used the following call (using jQuery) in my JSP:
<script type="text/javascript">
function getCities() {
jq(function() {
jq.post("getCities.html",
{ stateSelect: jq("#stateSelect").val()},
function(data){
jq("#cities").replaceWith('<span id="cities">Testing</span>');
});
});
}
</script>
And here's my Controller code:
#RequestMapping(value = "/getCities", method = RequestMethod.POST)
public #ResponseBody List<StateNames> getCities(#RequestParam(value="stateSelect", required=true) String stateName,
Model model) {
// Delegate to service to do the actual adding
List<StateNames> listStates = myService.listCityNames(stateName);
// #ResponseBody will automatically convert the returned value into JSON format
// You must have Jackson in your classpath
return listStates;
}
But I get HTTP 406 error stating the following when i run it:
406 Not Acceptable
The requested resource is only capable of generating content not acceptable according to the Accept headers sent in the request.
I've used Jackson in my Maven dependencies & have defined in my context file.
I've googled extensively & I guess the problem is #ResponseBody is not automatically converting my List to appropriate JSON object.
My Firebug says:
Response Headers
Server Apache-Coyote/1.1
Content-Type text/html;charset=utf-8
Content-Length 1070
Date Sat, 12 Feb 2011 13:09:44 GMT
Request Headers
Host localhost:8080
User-Agent Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13
Accept */*
Accept-Language en-us,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/MyApplication/
Content-Length 17
Cookie JSESSIONID=640868A479C40792F8AB3DE118AF12E0
Pragma no-cache
Cache-Control no-cache
Please guide me. What am i doing wrong?? HELP!!
As Peter had written in his comment, the cause of the problem is inability of Spring to load Jackson. It is not loaded by dependencies by default. After I've added the dependency
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-jaxrs</artifactId>
<version>1.9.2</version>
</dependency>
the JSON was returned after typing the address in the browser, without any tricks with Accept headers (as it is supposed to do).
Tested on Tomcat 7.0.
You have incorrect response content type it supposed to be application/json.
You need to add jackson to your /lib directory.
and you should have
<mvc:annotation-driven />
In your serlvet-name.xml file.
In addition I recommend you to map your request as get and try to browse it with Google Chrome,to see if it returns correct result. It has very good json representation.
The problem is not on server side, but on the client one.
Take a look at the error message carefully: The requested resource (generated by server side) is only capable of generating content (JSON) not acceptable (by the client!) according to the Accept headers sent in the request.
Examine your request headers:
Accept */*
Try this way:
function getCities() {
jq(function() {
jq.post(
"getCities.html", // URL to post to
{ stateSelect: jq("#stateSelect").val() }, // Your data
function(data) { // Success callback
jq("#cities").replaceWith('<span id="cities">Testing</span>');
},
"json" // Data type you are expecting from server
);
});
}
This will change your Accept header to the following (as of jQuery 1.5):
Accept: application/json, text/javascript, */*; q=0.01
This will explicitly tell the server side that you are expecting JSON.
Using jQuery , you can set contentType to desired one (application/json; charset=UTF-8' here) and set same header at server side.
REMEMBER TO CLEAR CACHE WHILE TESTING.
I too had a similar problem while using the Apache HTTPClient to call few services. The problem is the client and not the server. I used a HTTPRequester with header accepting application/json and it worked fine.
I've got code that makes a simple get request to Twitter (search) using jQuery's Ajax method. The code works fine on Safari, but fails on Firefox (3.6.3). In the Firefox case, my jQuery.ajax parameters 'success' method is invoked, but the supplied data is null. (In Safari, I receive a lot of JSON data.)
My Ajax call is:
$.ajax({
url: 'http://search.twitter.com/search.json?q='+searchTerm,
dataType: 'json',
async: true,
beforeSend: function(request) {
window.console.log('starting AJAX request to get Twitter data');
},
success: function(data, textStatus, request) {
window.console.log('AJAX request to get Twitter succeeded: status=' + textStatus);
callback(data);
},
error: function(request, status, error) {
window.console.log('Ajax request to get user data --> Error: ' + status);
errback(request, status, error);
}
});
Firebug shows Response headers:
Date Sun, 11 Apr 2010 22:30:26 GMT
Server hi
Status 200 OK
X-Served-From b021
X-Runtime 0.23841
Content-Type application/json; charset=utf-8
X-Served-By sjc1o024.prod.twitter.com
X-Timeline-Cache-Hit Miss
Cache-Control max-age=15, must-revalidate, max-age=300
Expires Sun, 11 Apr 2010 22:35:26 GMT
Vary Accept-Encoding
X-Varnish 1827846877
Age 0
Via 1.1 varnish
X-Cache-Svr sjc1o024.prod.twitter.com
X-Cache MISS
Content-Encoding gzip
Content-Length 2126
Connection close
The HTTP status is OK (200), the Content-Type is properly application/json, and the Content-Length of 2126 (gzip'd) implies data came back. Yet, Firebug shows the Response to be empty, and a test of the supplied data shows it to be 'null.'
I am aware of a similar post on Stack Overflow, jQuery $.get() function succeeds with 200 but returns no content in Firefox and from that would assume this problem is possibly related to cross-domain security, but... I know there are many JavaScript widgets and whatnot that Ajax get data from Twitter. Is there something I need to enable to allow this?
You are attempting to make a cross domain Ajax call. For this to happen you need to use JSONP.
JQuery understands JSONP and it will handle all the underlying tricks for you.
You only need to add the parameter &callback=? to your URL and JQuery will make the request as a Cross domain call. More important is, it will understand and handle the JSONP response from the server, so for you it will be transparent.