問題描述
我認為這個問題 已解決 但不幸的是它沒有解決，雖然它這次似乎是一個不同的問題.
I thought this issue was resolved but unfortunately it's not, although it seems to be a different problem this time.
我想通過跨域 XHR 使用 imgur API 照片共享服務，顯然，它工作正常.我開始一個請求，他們發送一個 xml，我需要做的就是處理它.但是，盡管有多個建議(適用于 Chrome、Firefox)，但我無法在 Internet Explorer 9 中正確執行此操作.這是我嘗試過的最簡單的代碼:
I want to use imgur API photo sharing service via cross domain XHR, and apparently, it works fine. I start a request, they send an xml and all I need to do is processing that. However, I can't do it properly in Internet Explorer 9 despite multiple suggestions (works in Chrome, Firefox). This is the most simple code I tried:
HTML:
<!DOCTYPE html>
<html>
<body>
<form id="uploadForm" action="http://api.imgur.com/2/upload.xml" method="POST" enctype="multipart/form-data">
<input type="hidden" name="key" value="00ced2f13cf6435ae8faec5d498cbbfe"/>
File: <input type="file" name="image"/>
Return Type: <select id="uploadResponseType" name="mimetype">
<option value="xml">xml</option>
</select>
<input type="submit" value="Submit 1" name="uploadSubmitter1"/>
</form>
<div id="uploadOutput"></div>
</body>
</html>
在那里你可以看到一個 Imgur API 的密鑰(你可以使用它，如果你想......它只是用于測試目的，但我不認為我收到的 xml 響應有任何問題).
There you can see a key to Imgur API (you can use it, if you want... it's only for testing purposes, but I don't thing there is anything wrong with the xml response I receive).
我正在使用 Jquery Form Plugin 來管理文件上傳.
I'm using Jquery Form Plugin to manage the file uploads.
XML:
這是我測試過的最簡單的一段代碼.通常，我們需要幫助 Internet Explorer 獨立解析 xml，這就是我有 parseXml 的原因.
This is the simplest piece of code that I have tested. Usually, we need to help Internet Explorer to parse xml independently, that's why I have parseXml.
Javascript:
Javascript:
function parseXml(xml) {
if (jQuery.browser.msie) {
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.loadXML(xml);
xml = xmlDoc;
}
return xml;
}
$('#uploadForm').ajaxForm({
dataType: ($.browser.msie) ? "text" : "xml",
accepts: {
xml: "text/xml",
text: "text/xml"
},
// has been received
success: function(data) {
$('#uploadOutput').html('Submitting...');
data = parseXml(data);
console.log(data);
alert(data);
},
complete: function(data) {
$('#uploadOutput').html('Complete...');
}
});
dataType: ($.browser.msie) ?"text" : "xml" 應該告訴 IE 返回一個文本響應.盡管有所有這些保證，響應的 Content Type 是 application/xml(有人告訴我這不是問題).作為一個 xml 我收到這個:
dataType: ($.browser.msie) ? "text" : "xml" supposedly tells IE to return a text response. Despite all these assurances, the Content Type of the response is application/xml (I was told that wasn't a problem). As an xml I receive this:
<?xml version="1.0" encoding="utf-8"?>
<upload><image><name/><title/><caption/><hash>087Y0</hash><deletehash>gUcgywjXoJyAJp6</deletehash><datetime>2012-06-02 21:59:35</datetime><type>image/jpeg</type><animated>false</animated><width>1024</width><height>768</height><size>297623</size><views>0</views><bandwidth>0</bandwidth></image><links><original>http://i.imgur.com/087Y0.jpg</original><imgur_page>http://imgur.com/087Y0</imgur_page><delete_page>http://imgur.com/delete/gUcgywjXoJyAJp6</delete_page><small_square>http://i.imgur.com/087Y0s.jpg</small_square><large_thumbnail>http://i.imgur.com/087Y0l.jpg</large_thumbnail></links></upload>
我認為它看起來不錯，我可以在其他瀏覽器中使用 $($.parseXml(xml)).find('original').text() 之類的東西解析它，但不能在IE9.所以基本上，我收到了響應，但我無法解析那個 xml，盡管當我試圖弄清楚我在 IE 中得到了什么時，看起來我什么也沒得到.
I think it looks ok and I can parse it in other browsers using something like $($.parseXml(xml)).find('original').text(), but not in IE9. So basically, I'm receiving a response but I can't parse that xml, although when I try to figure out what I'm getting in IE, looks like I get nothing.
此外，success 甚至沒有觸發，這是 IE9 無法解析 xml 的信號.complete 正在觸發，但它沒有收到任何作為 data 的內容.那我做錯了什么?
Furthermore, success is not even firing which is a signal that IE9 couldn't parse the xml. complete is firing but it doesn't receive anything as data. So what am I doing wrong?
在這里您可以擁有 fiddle(包括 Jquery 表單插件).
Here you can have a fiddle (includes Jquery Form Plugin).
更新:
JSON
為了將來參考，JSON 在這種情況下將無法使用 Jquery Form Plugin.來自文檔:
For future reference, JSON will not work using Jquery Form Plugin in this situation. From the documentation:
The iframe element is used as the target of the form's submit operation
which means that the server response is written to the iframe. This is fine
if the response type is HTML or XML, but doesn't work as well if the response
type is script or JSON, both of which often contain characters that need to
be repesented using entity references when found in HTML markup. To account
for the challenges of script and JSON responses when using the iframe mode,
the Form Plugin allows these responses to be embedded in a textarea element
and it is recommended that you do so for these response types when used in
conjuction with file uploads and older browsers.
想法?
謝謝！
推薦答案
這是由于跨域安全，稱為同源策略.
This is due to the Cross-domain security, called Same Origin Policy.
如果該插件由瀏覽器實現(例如在 Chrome 中)，則該插件使用 File API，如果不是，它使用創建隱藏 iframe 并向其發布數據的巧妙技巧.地址在另一個域的情況下，插件無法從iframe中獲取數據，所以會失敗.
This plugin uses the File API if it's implemented by the browser (as in Chrome for example) and, if not, it uses a neat trick of creating a hidden iframe and posting data to it. In the case of the address being on another domain, the plugin can't get the data from the iframe, so it fail.
嘗試使用以下命令啟用插件的調試模式:$.fn.ajaxSubmit.debug = true;，您將看到幕后發生的事情.
Try enabling the debug mode of the plugin with: $.fn.ajaxSubmit.debug = true; and you will see what is happening behind the scenes.
<罷工>不幸的是，上傳的唯一方法是在您的 HTML 中使用隱藏的 iframe，而不是由腳本添加，并通過使用此 iframe 的選擇器傳遞參數 iframeTarget 來強制發布到它，但是由于上述問題，您將無法獲取響應(我不知道為什么插件生成的 iframe 不發布數據):
Unfortunataly, the only way of doing the upload is by using a hidden iframe in your HTML, not added by script, and force the post to it by passing the parameter iframeTarget with the selector for this iframe, but you will not be able to grab the response, because of the above mentioned problem (I don't know why the iframe generated by the plugin don't post the data):
JS:
$('#uploadForm').ajaxForm({
iframeTarget: ($.browser.msie) ? "#iframeTarget" : false,
...
HTML:
<iframe name="iframeTarget" id="iframeTarget">This iframe can be hidden with CSS</iframe>
您還可以使用條件注釋來隱藏 iframe 對其他瀏覽器:
You can also make use of conditional comments to hide the iframe from other browsers:
<!--[if IE]>
<iframe name="iframeTarget" id="iframeTarget">This iframe can be hidden with CSS</iframe>
<![endif]-->
請注意，success 回調不會觸發.
A note on this is that the success callback will not fire.
您是否使用 JSON 響應選項與此站點進行通信?
Has this site you are communication with a JSON response option?
如果有，可以使用jsonp作為dataType參數，在url末尾添加?callback=someFunction并寫someFunction(data){} 接收數據并以與 success 回調相同的方式對其進行解析.
If it has, you can use jsonp as the dataType parameter, add ?callback=someFunction to the end of the url and write the someFunction(data){} that receives the data and parses it the same way your success callback.
這篇關于在 IE9 中解析 xml/json 響應的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！