Can I make a jQuery JSONP request without adding the '?callback=' parameter in URL?

Question

The server won't accept any parameters in a request URL, so I need to remove all the extra parameters in the URL and of course I can't control the server.

jQuery:

$.ajax({
    type: 'GET',
    url: 'http://cross-domain.com/the_jsonp_file,
    jsonpCallback: 'jsonCallback',
    contentType: 'application/json',
    cache: 'true',
    dataType: 'jsonp',
    success: function(json) {
        console.log(json);
    },
});

The JSONP file:

jsonCallback({"test": "hello"});

When I send that Ajax request, the URL looks like this:

http://cross-domain.com/the_jsonp_file?callback=jsonCallback

But I need this (without parameters):

http://cross-domain.com/the_jsonp_file

EDIT:

Here is my whole situation:

function MyClass(imgs) {
    // imgs is array of URLs
    this.imgs = imgs;

    this.submit = function() {
        // button click event triggers this method
        this._show();
    };

    this._show = function() {
        var _this = this;

        for (var i = 0; i < _this.imgs.length; i++) {
            (function($, j) {
                $.ajax({
                    type: 'GET',
                    url: _this.imgs[j],
                    jsonp : false,
                    jsonpCallback: 'jsonCallback',
                    cache: 'true',
                    dataType:'jsonp',
                    success: function(json) {
                      console.log(_this.imgs[j]);
                    },
                });
            })(jQuery, i);
        };
    };
};

And I got this error message:

Uncaught TypeError: Property 'jsonCallback' of object [object Window] is not a function

Weird thing is few requests are successfully calling jsonCallback.

Solution 1

Check the jQuery docs - they say to say jsonp: false and jsonpCallback : 'callbackFunction' in the ajax args....like:

$.ajax({
    url: 'http://cross-domain.com/the_jsonp_file',
    jsonp : false,
    jsonpCallback: 'jsonCallback',
    // contentType: 'application/json', -- you can't set content type for a <script> tag, this option does nothing for jsonp | KevinB
    cache: 'true',
    dataType : 'jsonp'
});

http://api.jquery.com/jQuery.ajax/

Solution 2

Every requests calls the same callback jsonCallback, so I thought that's the problem.

First, Javascript in document:

<script type="text/javascript">
    new Gallery([
        ['http://cross-domain.url/whatever', '27b2afa5c77c2510'],
        ['http://cross-domain.url/whatever', '13df51b2f2801bc1'],
        ['http://cross-domain.url/whatever', '4de326fc9a2c5a24'],
        ['http://cross-domain.url/whatever', '60c266a73ba699bc'],
        ['http://cross-domain.url/whatever', '3db01e95aaf2b9f2'],
        ['http://cross-domain.url/whatever', '94eb17f9b0e1be9c'],
        ['http://cross-domain.url/whatever', 'ca8c5c3c0b8cd5ae'],
        ['http://cross-domain.url/whatever', '6b0f5c5737ee88fd'],
        ['http://cross-domain.url/whatever', '318d8ebb51a97a15'],
        ['http://cross-domain.url/whatever', 'f5028c8b62e81a8b'],
    ]);
</script>

Client uploads JSONP file(just another Javascript file) to the server like this:

jsonCallback_27b2afa5c77c2510({"test": "hello"});

Added random hex string after jsonCallback_ to separate each requests like jQuery's default callback does.

Read random hex string from input and set as jsonpCallback:

function Gallery(imgs) {
    // imgs is array of URLs
    this.imgs = imgs;

    this.submit = function() {
        // button click event triggers this method
        this._show();
    };

    this._show = function() {
        var _this = this;

        for (var i = 0; i < _this.imgs.length; i++) {
            (function($, j) {
                $.ajax({
                    type: 'GET',
                    url: _this.imgs[j][0],
                    jsonp : false,
                    jsonpCallback: 'jsonCallback_' + _this.imgs[j][1],
                    cache: 'true',
                    dataType:'jsonp',
                    success: function(json) {
                      // Process
                      console.log(json.test);
                    },
                });
            })(jQuery, i);
        };
    };
};

Thank you @Adam @Kevin B @Dcullen and everyone! :D

p.s: I typed every sources above only for example, it may not correct.

Comments

[Jonypoins]

Thanks. it seems working but I got this error message: Uncaught TypeError: Property 'jsonCallback' of object [object Window] is not a function. tho few elements are successfully calls the callback function.

[Kevin B]

@Jonypoins Are you using jQuery 1.5+?

[Jonypoins]

Yes, the server does not support JSONP but I want to use resources from the server using JSONP.

[Dcullen]

Unfortunately you the server has to support JSONP in order for it to work. Otherwise you get the script error mentioned above. You have 2 other options: 1. Setting up a proxy. 2. CORS (this requires server configuration also)

[Adam]

That's because you haven't defined a function named jsonCallback. The value of the jsonpCallback property needs to be a globally available function to be executed when the response is returned.

[offset]

"Every requests calls the same callback jsonCallback, so I thought that's the problem." - this was my problem. thanks. +1