在 IE9 中解析 xml/json 响应 [英] Parsing xml/json response in IE9
问题描述
我认为这个问题 已解决 但不幸的是它没有解决，虽然它这次似乎是一个不同的问题.
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 响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
