Esta es una pregunta relacionada con this one.IE9 se niega a procesar la respuesta XML
En ACTUALIZACIÓN II, agregué un script basado en los comentarios de Jamie.
ACTUALIZACIÓN - tl; dr:
que creó un violín con una clave temporal de modo que ustedes pueden ver el problema con mayor facilidad: http://jsfiddle.net/S6wEN/.
Como esta pregunta se estaba haciendo demasiado larga, este es un resumen.
- Intenté utilizar la API de imgur para actualizar una imagen mediante el dominio cruzado XHR.
- Para abstraer detalles en la implementación, estoy usando el Plugin de formularios de Jquery (obviamente, está contenido en el violín).
- Funciona muy bien en Chrome, Firefox, etc. pero no funciona en IE9.
- El resultado esperado es actualizar la imagen y recuperar el tipo de imagen.
Todavía puede encontrar los detalles a continuación.
Gracias
que tienen este código 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>
Así que, básicamente, que tienen una forma para subir una imagen a través de Imgur XHR entre dominios. Para administrar los detalles desagradables, estoy usando Jquery Form Plugin, que funciona bien. Sin embargo, cuando intento enviar una imagen a imgur y recibir una respuesta xml, no funciona como se espera en IE9 (no lo he probado en IE8, pero no espero grandes noticias). Funciona muy bien en Chrome y Firefox. Esta es la parte javascript:
(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'));
}
});
})();
En IE9 que reciben los siguientes errores:
SCRIPT5022: Invalid XML: null
jquery.min.js, line 2 character 10890
XML5619: Incorrect document syntax.
, line 1 character 1
También utilicé el ejemplo dado en la página de Jquery Formulario Plugin, que utiliza JavaScript, pero no ayuda . Obviamente, el primer error que hace referencia a Jquery desaparece pero no puedo obtener los resultados esperados (en este caso, image/jpeg en el div con id="uploadOutput").
Cuando miro a la consola en IE9, me sale esto:
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
y, como respuesta del organismo:
<?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>
que es todo muy bien, pero por alguna razón, no puedo procesar esa información en la página HTML. Validé el XML, solo para asegurarme de que ese no era el problema. Es válido, por supuesto.
Entonces, ¿cuál es el problema con IE9 ?.
ACTUALIZACIÓN:
Otra forma de obtener XML que funciona en Chrome y Firefox, pero no en 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);
}
});
})();
ACTUALIZACIÓN 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>
Gracias de antemano .
Ha ejecutado IE con Fiddler2 para inspeccionar los resultados. IE puede ser muy estricto en términos de encabezados de codificación de contenido, etc. Sospecho que aunque el documento está etiquetado como UTF-8 en el documento, es posible que el servidor no especifique un juego de caracteres. Otros navegadores con frecuencia tendrán el valor predeterminado UTF-8. – Tracker1
Lo hice y ocurrió lo mismo. No lo publiqué aquí porque necesita una clave para trabajar, por lo que no tenía ningún uso práctico en este caso. Lo intentaré más tarde otra vez, sin embargo. –
Acabo de agregar un violín con una clave temporal. –