了解跨域 XHR 和 XML 数据-前端问题

Understanding Cross domain XHR and XML data(了解跨域 XHR 和 XML 数据)

本文介绍了了解跨域 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.