JsonP call from jQuery, how this works? : The Official Microsoft ASP.NET Forums

The each function will iterate over every array item, and call your callback method against each item in the list. i is the index, item is the actual item in the list.

When you do $("<img />"), jquery will create an element for you: document.createElement("img")

The .attr method sets an attribute, in this case, its "src".

Jquery uses the chaining pattern. This means every method returns a reference to what originally called it, so you can chain calls onto calls. Like how you are doing $().attr().appendTo()

That is saying "make images of every result item, that has an src equal to .media.m, and then append that image to the element with an id "images" and wrap it in a link tag that links to .link

Returning false inside any jquery iterator will tell it to exit early. So after 4 items (0,1,2,3) it will stop iteration. This makes a max of 4 results at a time.

jsoncallback=? is a special query lookup in jquery. It'll fill in the ? with a long value like jqueryCallback23434234223434

You could also do jsonCallback=something

Edited by digitalpacman on May 03, 2012 07:38 PM
Edited by digitalpacman on May 03, 2012 07:39 PM

Reply

SCV

Member

27 Points

23 Posts

Re: JsonP call from jQuery, how this works?

May 03, 2012 08:54 PM|LINK

@digitalpacman,

Thanks a lot for detail information. It makes more sense.

I still have question on following..

1. For this to work, should jsonp be supported by Server side (api.flickr.com)?

2. In url, if we pass callback=?, that 'get' call with random jquery function name (jQuery162021000680637728164_1336077718590&_=1336077718627), but that function doesn't exist.

so when we get response back, it'll go to Success callback 'function(data) automatically?

If that's the case, then where jsonP is in picture?
Does any url works with corss domain if we put 'callback=?'

Reply

SCV

Member

27 Points

23 Posts

Re: JsonP call from jQuery, how this works?

May 04, 2012 04:07 AM|LINK

More investigation:

To answer my own question (1), yes: jsonp should be supported by both Server side and client side.
I've created Custom JsonP Formatter for my webapi project (server side).

Then i'm trying to see which clientside (jQuery) call works, and i've used all 3
$.getJson()
$.ajax()
$.jsonp()

1.Using $.getJson

$.getJSON("http://localhost:64009/api/courses?callback=?", function (data) {
            var list = $('#courses');
            for (var i = 0; i < data.length; i++) {
                var course = data[i];
                list.append('<li>' + course.name + '</li>');
            }
        });

It worked.

1.2

function jsonpCallback(data) {
        var list = $('#courses');
        for (var i = 0; i < data.length; i++) {
            var course = data[i];
            list.append('<li>' + course.name + '</li>');
        }
    }

$.getJSON("http://localhost:64009/api/courses?callback=?", null, jsonpCallback);

It worked!

2. Using $.ajax

function jsonpCallback(data) {
        var list = $('#courses');
        for (var i = 0; i < data.length; i++) {
            var course = data[i];
            list.append('<li>' + course.name + '</li>');
        }
    }

$.ajax({
            url: "http://localhost:64009/api/courses",
            dataType: "jsonp",
            jsonp: "callback",
            jsonpCallback: "jsonpCallback"
        });

It Worked!

3. Using $.jsonp

Download jQuery plugin from https://github.com/jaubourg/jquery-jsonp, add this external js file

function jsonpCallback(data) {
        var list = $('#courses');
        for (var i = 0; i < data.length; i++) {
            var course = data[i];
            list.append('<li>' + course.name + '</li>');
        }
    }

$.jsonp({
            "url": "http://localhost:64009/api/courses?callback=jsonpCallback",
            "success": function (userProfile) {
                alert("success");
            },
            "error": function (d, msg) {
                alert("Could not find user " + userId);
            }
        });

It worked!

Hope this helps how we can use multiple jquery method to call jsonP

Edited by SCV on May 04, 2012 04:17 AM
Marked as answer by SCV on May 04, 2012 04:21 AM

JsonP call from jQuery, how this works? RSS

3 replies

SCV