了解跨域 XHR 和 XML 数据

问题描述

我使用 JavaScript 和 AJAX 已经有一段时间了，我想了解 Cross Domain XHR 是如何工作的以及 JQuery 是如何处理它的，出于某种原因，我从来没有想过它是如何工作的.我已阅读 Wikipedia JSONP 文章，我更加困惑.我不确定我不明白什么.

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.

我知道使用 JSONP 我可以直接在 JavaScript 中使用 JSON 数据.例如 这个 JS Fiddle 示例.这里我使用 JSON 来显示图像列表.我可以使用 XML 数据来实现同样的目的吗?在回答这部分问题之前，请阅读类比的其余部分.

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) 如果我尝试类似下面的方法或 Fiddle link 我得到错误 未捕获的 ReferenceError:未定义 jsonFlickrFeed

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) 下面的示例或 小提琴链接 工作正常

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) 我想在 1 和 2 之间，因为返回的数据格式类似于 jsonFlickrFeed({}) 我们需要编写 jsonFlickrFeed 回调函数来使其工作?

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) 为什么它从不调用成功回调?

Q) Why does it never invoke success callback?

Q) 是否是 Flickr 端点负责返回 JSONP(我的意思是格式为 jsonFlickrFeed({}) 的数据)?还是它只是返回实际的 JSON 和 JQuery 填充它?

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) 使用 $.getJSON 的代码如下所示或 fiddle

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) 在情况 3) 中，JQuery 如何处理它?我看到返回的数据格式为 jQuery1820349100150866434_1355379638775({}) 所以如果我假设 JQuery 完成了将 JSON 与回调关联的工作，是否正确?

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) 由于上述原因，它被称为 JQuery 的速记方法?

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

无论我尝试什么，我都无法使用 XML 数据.我一直想不出一种使用 XML 数据代替 JSON 的方法.

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) 是否可以以类似的方式使用 XML 数据而不是 JSON?

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

Q) 我能想到的唯一方法是通过同一域代理数据.这种理解正确吗?

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

如果有帮助的话，我在 Dropbox 上有 XML 示例.这是为了证明当XML数据来自同一个域时，它可以被解析.

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.

推荐答案

@adeneo 回答了这个问题，但在评论中.所以我对 JSONP 的理解从根本上是有缺陷的.当发出 JSONP 请求时，它不是 XHR 请求.相反，需要注意的是动态插入 script 标签并获取 JSON.因此，即使调用看起来像 XHR(至少 IMO JQuery)，它也不是.根本没有使用 XMLHttpRequest 对象.

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

这个问题已经回答了 JSONP 到底是什么? 但我不知何故之前错过了.另一个解释跨域请求的好资源是 devlog

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!

这篇关于了解跨域 XHR 和 XML 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！