在IE9中解析xml/json响应

Parsing xml/json response in IE9

本文关键字：json 响应 xml IE9      更新时间：2023-09-26

我以为这个问题已经解决了，但不幸的是它没有，尽管这次似乎是一个不同的问题。

我想通过跨域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表单插件来管理文件上传。

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

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.那我做错了什么呢？

在这里你可以有一个小提琴（包括Jquery Form Plugin）。

更新：

杰伦

为了将来参考，在这种情况下，JSON 将无法使用 Jquery Form 插件工作。从文档中：

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.

想法？。

谢谢！

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

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

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

不幸的是，上传的唯一方法是在您的 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：

<!--[if IE]>
<iframe name="iframeTarget" id="iframeTarget">This iframe can be hidden with CSS</iframe>
<![endif]-->

需要注意的是，success回调不会触发。

编辑：

您正在与JSON响应选项通信的此站点吗？

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

相关文章：