Question

I have been working with JavaScript and AJAX for quite sometime, I would like to understand how Cross Domain XHR really work and how JQuery handles it, for some reason I have never bothered to think about how it really works. I have read Wikipedia JSONP article and I am more confused. I am not sure what is that I am not understanding.

I am aware that using JSONP I can consume JSON data directly in JavaScript. For example this JS Fiddle example. Here I am using JSON to display list of images. Can I achieve the same thing using XML data instead? Please read rest of the analogy before you answer this part of the question.

1) If I try something like below or Fiddle link I get error Uncaught ReferenceError: jsonFlickrFeed is not defined

​$.ajax({
    url: "http://api.flickr.com/services/feeds/photos_public.gne",
    data: {
        format: "json"
    },
    dataType: "jsonp",
    success: function(d) {
        console.log(d);
    }
});​

2) Example below or fiddle link works fine

$.ajax({
    url : "http://api.flickr.com/services/feeds/photos_public.gne",
    data: {format: "json"},
    dataType: "jsonp"
});
jsonFlickrFeed = function(d){
    console.log(d);
}

Q) I suppose between 1 and 2 since returned data is in format like jsonFlickrFeed({}) we need to write jsonFlickrFeed callback function to make it work?

Q) Why does it never invoke success callback?

Q) Is it Flickr end point that does the job of returning JSONP(by which I mean data in format jsonFlickrFeed({}))? Or does it just return the actual JSON and JQuery pads it?

3) With $.getJSON the code is something like below or fiddle

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
    format: "json"
}, function(d) {
    console.log(d)
});​

Q) How does JQuery take care of it in case 3)? I see that returned data is in format jQuery1820349100150866434_1355379638775({}) So if I assume that JQuery does the job of associating the JSON with the callback is it correct?

Q) For the above reason it is called shorthand method of JQuery?

From whatever I tried I have failed to consume XML data. I have not been able to think of a way to consume XML data instead of JSON.

Q) Is it possible to use XML data instead of JSON in similar way?

Q) The only way I can think of doing this otherwise is proxying the data through same domain. Is this understanding correct?

If it helps here is XML example I have on dropbox. Which is to demonstrate that it XML data can be parsed when it originates from the same domain.

Answer 1

@adeneo answered the question but in comment. So my understanding about JSONP was fundamentally flawed. When JSONP request is made, it is not an XHR request. Rather, caveat is to insert script tag dynamically and fetch the JSON. So even though, the call looks like XHR(at least IMO JQuery), it is not. XMLHttpRequest object is not used at all.

This question has already been answered What is JSONP all about? but I somehow missed it before. Another good resource explaining Cross Domain request is at devlog

Rest of the issues I have raised become redundant!