Correct use of JSONP

Question

To successfully use JSONP (e.g. via jquery - $.ajax ... etc.) must always be that the requested page is designed to provide data corresponding to this format?

In other words, if I perform a request to a page with a pure static content (i.e. no php, aspx, and so on), also will I get an error?

This question might seem trivial to some users, but I'm starting right now to learn these technologies, and the matter is a bit complicated.

Based on these (ref1 ref2) references it would seem that there must be consistency between the request with JSONP and implementation of the server response.

Edit

I have this jQuery request

$.ajax({
    url: "https://sites.google.com/site/problemsstore/javascript/test.js",
    type: 'GET',
    crossDomain: true,
    dataType: 'jsonp',
    dataCharset: 'jsonp',
    success: function (result) {
        console.log('request succeed');
    },
    error: function (result) {
        console.log('failed');
    }
});

And I have loaded in https://sites.google.com/site/mysite/javascript/test.js?attredirects=0&d=1 this test.js file:

function myCall(data) {
console.log('succeed');
}
myCall({ some : "data" });

When I am connected I hope to obtain as console's output: succeed succeed.

Instead this is what I get:

succeed 
failed

Edit2

$.ajax({
    url: "https://sites.google.com/site/bentofelicianolopez/jscript-jsonp/test.js?attredirects=0&d=1",
    type: 'GET',
    crossDomain: true,
    dataType: 'jsonp',
    dataCharset: 'jsonp',
    jsonp: 'myCall',
    //contentType: 'application/json',
    success: function (result) {
        console.log('request succeed');
    },
    error: function (result) {
        console.log('failed');
    }
});

The .js file:

myCall({ some : "data" });

The output:

failed test4.html:94:9
ReferenceError: myCall is not defined /*this is the syntactical error of which I said*/
 test.js:1:1

JSONP is a hack to get around the Same Origin Policy by exploiting the fact that scripts can be loaded across different origins. For the hack to work, there must be agreements between the server and the client. — Derek 朕會功夫, Apr 29 '16 at 08:01
`crossDomain: true,` stops jQuery from adding headers to XHR that it only adds for same origin requests (in case the same origin does an HTTP redirect to a different origin). It is pointless for a request that starts out being cross origin and never has any effect on JSONP requests (since there is no way to control the headers there) — Quentin, Apr 29 '16 at 13:56
`dataCharset` is not a property accepted by the jQuery ajax settings object — Quentin, Apr 29 '16 at 13:57

score 1 · Accepted Answer · answered Apr 29 '16 at 07:59

1

To successfully use JSONP (e.g. via jquery - $ .ajax ... etc.) must always be, that the requested page is designed to provide data corresponding to this format?

Yes. A request for JSONP will only work if the response is expressed as JSONP.

In other words, if I perform a request to a page with a pure static content (i.e. no php, aspx, and so on), also I will get an error?

You can have a static JavaScript program that conforms to the JSONP format (it requires hardcoding the callback function name), so not necessarily.

answered Apr 29 '16 at 07:59

Quentin

914,110
126
1,211
1,335

So is it not possible use such a method for simply checking the existence of a network connection (using an arbitrary domain)? will be always returned an error by the request? – Bento Apr 29 '16 at 08:14
Could you provide me a reference to an example, as regards the second part of your answer? – Bento Apr 29 '16 at 08:20
@Bento — Err. Contents of *example.js*: `someCallbackName({ "some: "data" })` – Quentin Apr 29 '16 at 08:21
Do you mean that if the resource contains that simple script the GET will not return an error?? – Bento Apr 29 '16 at 08:25
Since it is JSONP, correct. As I said, when you request JSONP you have to get JSONP (well, technically you just have to get arbitrary JavaScript, which is why JSONP is terrible when compared to CORS). It doesn't matter how the server decides to send the JSONP. – Quentin Apr 29 '16 at 08:26
So if I require a simple blank page with inside just a script of that type, will I not get an error? (I had just stumbled into "SyntaxError: expected expression, got '<'") – Bento Apr 29 '16 at 08:38
@Bento — I said *example.js*: `someCallbackName({ "some: "data" })`. I didn't say *example.html*: ` HTML document`. – Quentin Apr 29 '16 at 08:41
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/110616/discussion-between-bento-and-quentin). – Bento Apr 29 '16 at 08:50
okay.. if I have well understood I have to point at that .js resource on an arbitrary site, is it right? – Bento Apr 29 '16 at 08:56
1

The site has to provide a URL that returns JSONP data. That JavaScript program is JSONP data. – Quentin Apr 29 '16 at 09:03
I think the second part of the answer is incorrect because the call in the JS file will not be seen in the requesting script: In the JS file there must be the definition of the call (otherwise we get a syntactical error), and it will be this definition that will be executed. This problem indicates that both JS and jQuery do not allow the execution of the defined function - in the JS case - and of the anonymous one - in jQuery $ .ajax (....... – Bento Apr 29 '16 at 12:58
@Bento — You're wrong. JS lets you define functions. It's a fairly fundamental part of the language. jQuery lets you assign the anonymous function you pass to `success` to a named function using the `jsonp` property of the settings object. To quote [the docs](http://api.jquery.com/jquery.ajax/): *Override the callback function name in a JSONP request. This value will be used instead of 'callback' in the 'callback=?' part of the query string in the url.* (See also `jsonpCallback`, I'm not sure how the two interact with each other as I've never had cause to actually use them). – Quentin Apr 29 '16 at 13:01
`https://sites.google.com/site/mysite/javascript/test.js?attredirects=0&d=1 ` gives a 404 error. – Quentin Apr 29 '16 at 13:46
`function myCall(data) { console.log('succeed'); } myCall({ some : "data" });` has a function definition (one that will override the callback function from the calling page, if it was defined correctly in the first place, which it isn't) before the JSONP, so it isn't JSONP. – Quentin Apr 29 '16 at 13:46
Your Ajax call doesn't use `jsonp` or `jsonpCallback` to override the callback name. – Quentin Apr 29 '16 at 13:47
Throws the error `Refused to execute script from 'https://sites.google.com/site/bentofelicianolopez/jscript-jsonp/test.js?att…ects=0&d=1&myCall=jQuery21403000442920646582_1461939808151&_=1461939808152' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.` because the server claims it is an HTML document. You need to serve it as JavaScript. – Quentin Apr 29 '16 at 14:26
Does this mean that on google sites it is not possible to perform the request? has the type to be something as text/javascript or application/javascript? – Bento Apr 29 '16 at 14:35
1

Since you can't put a real JavaScript file there, it looks that way. – Quentin Apr 29 '16 at 14:37
I really don't know which free websites service of that kind allow to put js file (and also php, nodejs etc.)..... any suggestion? – Bento Apr 29 '16 at 14:41

Correct use of JSONP

1 Answers1