IE9拒绝处理XML响应 [英] IE9 refuses to process XML response
问题描述
这是相对于这个的一个问题。
This is a question in relation to this one.
在更新II ，我添加了一个脚本基于杰米的反馈。
In UPDATE II, I added a script based on Jamie's feedback.
更新 - TL;博士
我创建了一个摆弄一个临时密钥，以便你们可以更容易地看到这个问题： http://jsfiddle.net / S6wEN / 。
I created a fiddle with a temporary key so you guys can see the problem more easily: http://jsfiddle.net/S6wEN/.
由于这个问题是越来越太长，这是一个总结。
As this question was getting too long, this is a summary.
- 我试图用imgur API更新通过跨域XHR的图像。
- 在为了在，我使用jQuery插件形式（显然，这是包含在小提琴）的实施抽象的细节。
- 在Chrome浏览器，火狐等伟大的作品，但它不能在IE9工作。
- 在预期的结果是更新的图像和检索图像类型。
您仍然可以找到下面的详细信息。
You can still find the details below.
感谢
我有这样的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="MYKEY">
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>
因此，基本上，我要上传的图片通过跨域XHR到imgur一种形式。为了管理的肮脏细节，我使用 jQuery的表格插件，其中工程井。然而，当我尝试发送图像imgur和接收XML响应，它并没有如预期在IE9工作（我还没有在IE8测试，但我不希望一个好消息）。它在Chrome和Firefox的伟大工程。这是JavaScript的一部分：
So basically, I have a form to upload an image to imgur via cross domain XHR. In order to manage the nasty details, I'm using Jquery Form Plugin, which works well. However, when I try to send an image to imgur and receive an xml response, it doesn't work as expected in IE9 (I haven't tested in IE8 but I don't expect great news). It works great in Chrome and Firefox. This is the javascript part:
(function() {
$('#uploadForm').ajaxForm({
beforeSubmit: function(a,f,o) {
o.dataType = $('#uploadResponseType')[0].value;
$('#uploadOutput').html('Submitting...');
},
complete: function(data) {
var xmlDoc = $.parseXML( data.responseText ),
$xml = $( xmlDoc );
$('#uploadOutput').html($xml.find('type'));
}
});
})();
在IE9中我收到以下错误：
In IE9 I receive the following errors:
SCRIPT5022: Invalid XML: null
jquery.min.js, line 2 character 10890
XML5619: Incorrect document syntax.
, line 1 character 1
我还使用jQuery的表格插件的页面，只使用Javascript的给出的例子，但它并不能帮助。显然，第一个错误指的是Jquery的消失，但我不能获得预期的效果（在这种情况下，为image / jpeg 在DIV与 ID =uploadOutput）。
当我看看IE9控制台，我得到这样的：
When I look at the console in IE9, I get this:
URL Method Result Type Received Taken Initiator Wait Start Request Response Cache read Gap
http://api.imgur.com/2/upload.xml POST 200 application/xml 1.07 KB 7.89 s click 2808 93 5351 0 0 0
和作为身体的反应：
<?xml version="1.0" encoding="utf-8"?>
<upload><image><name/><title/><caption/><hash>xMCdD</hash>
<deletehash>Nb7Pvf3zPNohmkQ</deletehash><datetime>2012-03-17 01:15:22</datetime>
<type>image/jpeg</type><animated>false</animated><width>1024</width
<height>768</height><size>208053</size><views>0</views><bandwidth>0</bandwidth></image
<links><original>http://i.imgur.com/xMCdD.jpg</original
<imgur_page>http://imgur.com/xMCdD</imgur_page>
<delete_page>http://imgur.com/delete/Nb7Pvf3zPNohmkQ</delete_page>
<small_square>http://i.imgur.com/xMCdDs.jpg</small_square>
<large_thumbnail>http://i.imgur.com/xMCdDl.jpg</large_thumbnail></links></upload>
这是所有罚款，但由于某些原因，我不能处理信息到HTML页面。我验证了XML，只是要确定这是不是问题。它当然是有效的，
which is all fine, but for some reason, I can't process that information into the HTML page. I validated the XML, just to be sure that wasn't the problem. It is valid, of course.
那么，什么是与IE9的问题？
So, what's the problem with IE9?.
更新：
另一种方式来获取XML在Chrome和Firefox，但不是在IE9其作品：
Another way to fetch XML which works in Chrome and Firefox but not in IE9:
(function() {
$('#uploadForm').ajaxForm({
dataType: "xml",
beforeSubmit: function(a,f,o) {
o.dataType = $('#uploadResponseType')[0].value;
$('#uploadOutput').html('Submitting...');
},
success: function(data) {
var $xml = $( data ),
element = $($xml).find('type').text();
alert(element);
}
});
})();
更新2
<!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>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script>
(function() {
var options = {
// target: '#output1', // target element(s) to be updated with server response
//beforeSubmit: showRequest, // pre-submit callback
success: afterSuccess, // post-submit callback
complete: afterCompletion,
// other available options:
//url: url // override for form's 'action' attribute
type: 'POST', // 'get' or 'post', override for form's 'method' attribute
dataType: 'xml' // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
function process_xml(xml) {
var type = $(xml).find('type').text() ;
return type;
// Find other elements and add them to your document
}
function afterSuccess(responseText, statusText, xhr, $form) {
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property
// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// is the json data object returned by the server
var $xml = process_xml(responseText);
console.log('success: ' + $xml);
}
function afterCompletion(xhr,status){
if(status == 'parsererror'){
xmlDoc = null;
// Create the XML document from the responseText string
if(window.DOMParser) {
parser = new DOMParser();
xml = parser.parseFromString(xhr.responseText,"text/xml");
} else {
// Internet Explorer
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = "false";
xml.loadXML(xhr.responseText);
}
}
console.log('complete: ' + process_xml(xhr.responseText));
}
$('#uploadForm').ajaxForm(options);
})();
</script>
在此先感谢。
Thanks in advance.
推荐答案
IE是出了名挑剔的，当涉及到接受XML和解析它。尝试是这样的：
IE is notoriously fussy when it comes to accepting XML and parsing it. Try something like this:
function process_xml(xml) {
var type = $(xml).find('type').text() ;
$('#type').html(type) ;
// Find other elements and add them to your document
}
$(function() {
$('#uploadForm').ajaxForm({
dataType: "xml", // 'xml' passes it through the browser's xml parser
success: function(xml,status) {
// The SUCCESS EVENT means that the xml document
// came down from the server AND got parsed successfully
// using the browser's own xml parsing caps.
process_xml(xml);
// Everything goes wrong for Internet Explorer
// when the mime-type isn't explicitly text/xml.
// If you are missing the text/xml header
// apparently the xml parse fails,
// and in IE you don't get to execute this function AT ALL.
},
complete: function(xhr,status){
if(status == 'parsererror'){
xmlDoc = null;
// Create the XML document from the responseText string
if(window.DOMParser) {
parser = new DOMParser();
xml = parser.parseFromString(xhr.responseText,"text/xml");
} else {
// Internet Explorer
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = "false";
xml.loadXML(xhr.responseText);
}
process_xml(xml);
}
},
error: function(xhr,status,error)
{
alert('ERROR: ' + status) ;
alert(xhr.responseText) ;
}
});
});
此外，使用警报（）在整个调试提供什么样的信息是在任何时候都正在通过反馈。
Also,use alert() throughout debugging to provide feedback on what information is being passed through at all times.
修改
关键的东西是确保XML文件是良好的，也就是说，它的不能包含任何语法错误。你需要开始与XML文件：
The crucial thing is ensure your XML file is 'well-formed', i.e. it must not contain any syntax errors. You need to begin the XML file with:
<?xml version="1.0"?>
这与其说是一个服务器的问题，因为，这些错误来自于你的浏览器的（即互联网浏览器），因为它认为XML的格式不正确。这个错误来自您的浏览器，并表明你的XML格式不正确。您可以手动设置什么头你想与这些 $阿贾克斯（）设置，返回：
It's not so much a server issue because, the errors come from your browser (i.e. Internet Explorer) because it thinks the XML is malformed. The error comes from your browser and indicates that your XML is malformed. You can manually set what headers you want returned with these $.ajax() settings:
dataType: ($.browser.msie) ? "text" : "xml",
accepts: {
xml: "text/xml",
text: "text/xml"
}
或者另一种方式做同样的事情是要求一个特定的标题：
Or another way to do the same thing is to ask for a particular header:
headers: {Accept: "text/xml"},
的内容类型之间的区别应用程序/ XML 和为text / xml 都是次要的（它是基于每个XML的字符集），但如果你想知道你可以阅读这篇文章。
The difference between the content-types application/xml and text/xml are minor (it's based on each XML's charset), but if you want to know you can read this post.
这篇关于IE9拒绝处理XML响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
