How to make a jsonp request

Question

I need to do some cross site scripting. The block of code below contains the method of jsonp, the method returns as if it failed, but when I change it to be a get request I then have success. I need to be able to a successful response using the jsonp method. The following can be ruled out. The response is valid json and this param is in the url ?callback=JSON_CALLBACK. Here is the json I receive from doing the http request and the code block that executes this code.

http response status code 200

[{"cube":"1" ,"points":"160"},{"cube":"2","points":"690"},{"cube":"3","points":"331"}]

code block

 var myApp = angular.module('test', []);

    myApp.controller('UserCtrl', function($scope, users) {
        $scope.usersPerCube = users.getUsers();
    })

    myApp.factory('users', function($http) {
       return {
         getUsers: function() {
           var deferred = $q.defer();
           var url = "http://localhost/api/api/index.php/analytics/UsersPerCube?callback=JSON_CALLBACK";
         $http.get(url).success(function (data, status, headers, config) {
                console.log(data);
                deferred.resolve(data);
            }).error(function (data, status, headers, config) {
                //this always gets called
                console.log(status);
                deferred.reject(status);
            });
            return deferred.promise;

     }
   }

Note that I have edited my server side code and now receive

"angular.callbacks._1( {"cube":"1","points":"160"},{"cube":"2","points":"690"},{"cube":"3","points":"331"})"

UPDATE The above is valid and now the success method is executing. I just need to figure out how to parse the objects. I will post again once I figure out the answer.

Does the server you're requesting against understand JSONP (notably the `callback` query-string value)? — Alxandr, Nov 11 '13 at 21:34
If your response is valid JSON then it is not valid JSONP. JSONP is JSON data wrapped with a function. To the point of @Alxandr, are you sure you're getting back JSONP? — Mike Robinson, Nov 11 '13 at 22:47
I have everything this stack overflow suggests to make it valid jsonp on the server side. http://stackoverflow.com/questions/9519209/how-do-i-set-up-jsonp . Also angular responses with angular.callbacks._1 which means it recognizes it as jsonp. I'm just not sure what I should do with the response now. — raging_subs, Nov 11 '13 at 22:55

score 29 · Accepted Answer · edited May 23 '17 at 11:46

I have decided to give a detailed description of how to do a jsonp request so others will not run into the same troubles as I did.

myApp.factory('users', function($http) {
       return {
         getUsers: function() {
           var deferred = $q.defer();
           var url = "http://localhost/api/api/index.php/analytics/UsersPerCube?callback=JSON_CALLBACK";
         $http.get(url).success(function (data, status, headers, config) {
                console.log(data);
                deferred.resolve(data);
            }).error(function (data, status, headers, config) {
                //this always gets called
                console.log(status);
                deferred.reject(status);
            });
            return deferred.promise;

     }

Notice that the url contains ?callback=JSON_CALLBACK. Here is a nice stackoverflow on that. Once you get the response then you'll receive a json like the one below.

"angular.callbacks._1( {"cube":"1","points":"160"},{"cube":"2","points":"690"},{"cube":"3","points":"331"})"

Here is a nice stackoverflow on that subject

Now the one part that got me is that the server has to return the GET param, callback. Here is a good tutorial for that. http://niryariv.wordpress.com/2009/05/05/jsonp-quickly/ So the json looks like the one above.

Well, I hope this helps someone in the future.

what was your response content type ? i am having one small issue, browser is not able to display response as it forces to download it. and response content type is "application/jsonp" — hardik, Jul 02 '14 at 06:53
Any reason not to use `$http.jsonp()` and to manually create a promise, since the former already returns one? — Dmitri Zaitsev, Aug 11 '14 at 09:34

score 1 · Answer 2 · answered Mar 14 '16 at 12:23

If you want to make several JSONP requests through $http service, you should use a little hack. Agular change JSON_CALLBACK to internal value, and best way to use next solution: put this js code into your returned js-file:

var callbackId = '_' + (angular.callbacks.counter - 1).toString(36);
angular.callbacks[callbackId](/* YOUR JSON */);

To be sure that this code will work for you, please check createHttpBackend method in angular sources.

How to make a jsonp request

2 Answers2

Linked

Related