Question

我认为这个问题是was resolved，但不幸的是它不是，虽然这次似乎是一个不同的问题。

我想通过跨域XHR使用imgur API照片共享服务，显然，它工作正常。我发起一个请求，他们发送一个xml，我需要做的就是处理它。但是，尽管有多个建议（在Chrome，Firefox中有效），我无法在Internet Explorer 9中正确执行此操作。这是我尝试过的最简单的代码：

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响应有什么问题。）

我正在使用Jquery Form Plugin来管理文件上传。

XML：

这是我测试过的最简单的代码。通常，我们需要帮助Internet Explorer独立解析xml，这就是我有parseXml的原因。

使用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...');
     }
});

据说{p> dataType: ($.browser.msie) ? "text" : "xml"告诉IE返回文本回复。尽管有这些保证，但Content Type的回复是application/xml（我被告知这不是问题）。作为一个xml，我收到了这个：

<?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中得到的内容时，看起来我什么都没得到。

此外，success甚至没有触发，这是IE9无法解析xml的信号。 complete正在解雇，但它没有收到data的任何内容。那么我做错了什么？

您可以在此处拥有fiddle（包括Jquery表单插件）。

更新

JSON

为了将来参考，在这种情况下，JSON将无法使用Jquery Form Plugin。来自文档：

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.

想法？

谢谢！

Answer 1

这是由于跨域安全性，称为同源策略。

此插件使用文件API，如果它由浏览器实现（例如在Chrome中），如果没有，它使用一个巧妙的技巧来创建隐藏的iframe并向其发布数据。如果地址在另一个域上，则插件无法从iframe获取数据，因此失败。

尝试使用以下代码启用插件的调试模式：$.fn.ajaxSubmit.debug = true;，您将看到幕后发生的事情。

<击> Unfortunataly，进行上传的唯一方法是在HTML中使用隐藏的iframe，而不是通过脚本添加，并通过使用此iframe的选择器传递参数iframeTarget来强制发布帖子，但是你不会能够获取响应，因为上面提到的问题（我不知道为什么插件生成的iframe不发布数据）：

<强> JS：

$('#uploadForm').ajaxForm({ iframeTarget: ($.browser.msie) ? "#iframeTarget" : false, ...

<强> HTML：

<iframe name="iframeTarget" id="iframeTarget">This iframe can be hidden with CSS</iframe>

您还可以使用条件注释来隐藏其他浏览器中的iframe：



~~关于这一点的说明是success回调不会触发。~~

修改

此网站是否与JSON响应选项进行通信？

如果有，可以使用jsonp作为dataType参数，将?callback=someFunction添加到网址的末尾，然后编写接收数据的someFunction(data){}并解析它与success回调的方式相同。

在IE9中解析xml / json响应

1 个答案: