0

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.

ch4nd4n
  • 4,110
  • 2
  • 21
  • 43
  • 2
    There's a simple answer to all of the above questions; JSONP works by inserting a script tag in the page, just like any script tag, and that's why some of the regular functions don't work since it's not really a XMLHttpRequest. As for getting XML the same way, nope, that's not possible (getting XML is of course possible, just not the same way as JSONP). – adeneo Dec 13 '12 at 06:36
  • Have you looked at CORS? http://en.wikipedia.org/wiki/Cross-origin_resource_sharing If your browser requirements aren't too broad (http://caniuse.com/cors) then it is a much more straightforward way to do cross domain XHR. – joshuacronemeyer Dec 13 '12 at 06:37
  • @joshuacronemeyer yes I have. It does not help in most of the situation. For me JSON is not the problem, its consumption of XML. – ch4nd4n Dec 13 '12 at 06:39
  • I believe @adeneo answered it spot on. – ch4nd4n Jan 17 '13 at 14:17

2 Answers2

1

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

no because JSONP is not json ,it is javascript.The client is requiring a a script from the server , that get executed on the client. "JSONP" is a trick that uses a script tag to get a javascript object. You could , send a XML in a string though in a javascript object.

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

or make the server support CORS

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

My point is , if the domain doesnt allow X-origin requests by defaults coming from client scripts , you cant do anything about it. Some browsers may allow it , but it is not a default behavior.in that case The only option is a proxy on the same domain.

mpm
  • 20,148
  • 7
  • 50
  • 55
  • You did answer my question (+1 for that) but I feel it lacks clarity, so I did not accept your answer. – ch4nd4n Jan 17 '13 at 14:29
0

@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!

Community
  • 1
  • 1
ch4nd4n
  • 4,110
  • 2
  • 21
  • 43