在IE9中解析xml / json响应 [英] Parsing xml/json response in IE9
问题描述
我认为这个问题已经解决，但不幸的是，它不是，尽管它这次似乎是一个不同的问题。
我想通过跨域XHR使用imgur API照片共享服务，显然，它运行正常。我发起一个请求，他们发送一个xml，我需要做的就是处理它。但是，尽管有多个建议（在Chrome，Firefox中有效），我无法在Internet Explorer 9中正确执行此操作。这是我尝试过的最简单的代码：
HTML：
<！DOCTYPE html>
< html>
< body>
< form id =uploadFormaction =http://api.imgur.com/2/upload.xmlmethod =POSTenctype =multipart / form-data>
< input type =hiddenname =keyvalue =00ced2f13cf6435ae8faec5d498cbbfe/>
文件：< input type =filename =image/>
返回类型：< select id =uploadResponseTypename =mimetype>
< option value =xml> xml< / option>
< / select>
< input type =submitvalue =Submit 1name =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;
}
返回xml;
}
$（'＃uploadForm'）。ajaxForm（{
dataType：（$ .browser.msie）？text：xml，
接受：{
xml：text / xml，
text：text / xml
}，
//已收到
成功：函数（数据） ）{
$（'＃uploadOutput'）。html（'Submitting ...'）;
data = parseXml（data）;
console.log（data）;
alert（data）;
}，
complete：function（data）{
$（'＃uploadOutput'）。html（'Complete ...'）;
}
}）;
dataType：（$ .browser.msie）？ text：xml据说告诉IE返回文本响应。尽管有这些保证，但响应的内容类型是 application / xml （我被告知这不是一个问题）。作为一个xml，我收到了这个：
<？xml version =1.0encoding =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< ; /高度><大小> 297623< /大小><视图大于0< /视图><带宽大于0< /带宽>< /图像><链接和GT;<原> HTTP：//我。 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>< /链接和GT;< /上传>
我觉得它看起来不错，我可以使用像
此外， success 甚至没有触发，这是IE9无法解析xml的信号。 完成正在解雇，但它没有收到任何数据。那么我做错了什么？
在这里你可以有一个小提琴（包括Jquery Form Plugin）。
更新：
JSON
为了将来参考，在这种情况下，JSON将无法使用Jquery Form Plugin 。从文档中：
iframe元素用作表单提交操作
的目标，这意味着服务器响应被写入iframe。如果响应类型是HTML或XML，这是好的
，但如果响应
类型是脚本或JSON，则两者都不能正常工作，两者通常都包含需要
的字符在HTML标记中找到时使用实体引用重复。要在使用iframe模式时考虑
以应对脚本和JSON响应的挑战，
Form插件允许将这些响应嵌入到textarea元素
中，建议您这样做这些响应类型在
中与文件上传和旧版浏览器结合使用时。
想法？。
谢谢！
这是由于跨域安全性，称为同源策略。
如果它由浏览器实现（例如在Chrome中），则此插件使用File API，如果没有，则使用创建隐藏iframe并向其发布数据的巧妙技巧。如果地址在另一个域上，则插件无法从iframe获取数据，因此它会失败。
尝试启用插件的调试模式使用： $。fn.ajaxSubmit.debug = true; ，您将看到幕后发生的事情。
Unfortunataly，进行上传的唯一方法是在HTML中使用隐藏的iframe，而不是通过脚本添加，并通过传递参数 iframeTarget <强制发布帖子/ code>使用此iframe的选择器，但由于上述问题，您将无法获取响应（我不知道为什么插件生成的iframe不发布数据） ：
JS：
$ （'#uploadForm'）。ajaxForm（{
iframeTarget：（$ .browser.msie）？＃iframeTarget：false，
...
HTML：
< iframe name =iframeTargetid =iframeT arget>这个iframe可以用CSS< / iframe>隐藏
您还可以使用条件注释来隐藏其他浏览器中的iframe：
<！ - [if IE]>
< iframe name =iframeTargetid =iframeTarget>此iframe可以使用CSS隐藏< / iframe>
<！[endif] - >
关于此的说明是成功回调不会开火。
修改：
是否有此网站你是否使用 JSON 回复选项进行交流？
如果有，你可以使用 jsonp 作为 dataType 参数，将？callback = someFunction 添加到网址的末尾并编写 someFunction（data）{} ，它接收数据并以与 success 回调相同的方式解析它。 / p>
I thought this issue was resolved but unfortunately it's not, although it seems to be a different problem this time.
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>
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).
I'm using Jquery Form Plugin to manage the file uploads.
XML:
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:
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" 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>
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.
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?
Here you can have a fiddle (includes Jquery Form Plugin).
UPDATE:
JSON
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.
Ideas?.
Thanks!
This is due to the Cross-domain security, called Same Origin Policy.
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.
Try enabling the debug mode of the plugin with: $.fn.ajaxSubmit.debug = true; and you will see what is happening behind the scenes.
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>
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]-->
A note on this is that the success callback will not fire.
Edit:
Has this site you are communication with a JSON response option?
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屋！
