問題描述

我使用 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模板網！