IE9 отказывается обрабатывать XML-ответ.

Это вопрос относительно этого .

В UPDATE IIя добавил сценарий, основанный на отзывах Джейми.

ОБНОВЛЕНИЕ – tl;dr:

Я создал скрипт с временным ключом, чтобы вам было легче увидеть проблему: http://jsfiddle.net/S6wEN/.

Так как этот вопрос стал слишком длинным, это краткое изложение.

  • Я пытался использовать imgur API для обновления изображения через междоменный XHR.
  • Чтобы абстрагироваться от деталей реализации, я использую плагин Jquery Form (очевидно, он содержится в скрипте).
  • Отлично работает в Chrome, Firefox и т. д., но не работает в IE9.
  • Ожидаемый результат — обновление изображения и получение типа изображения.

Подробную информацию можно найти ниже.

Спасибо.


У меня есть этот HTML-код:


File: Return Type:

Итак, у меня есть форма для загрузки изображения в imgur через междоменный XHR. Чтобы справиться с неприятными деталями, я использую Jquery Form Plugin, который хорошо работает. Однако, когда я пытаюсь отправить изображение в imgur и получаю ответ в формате xml, он не работает должным образом в IE9 (я не проверял в IE8, но не ожидаю хороших новостей). Он отлично работает в Chrome и Firefox.Это часть 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'));

        }
    });
})();  

В IE9 я получаю следующие ошибки:

SCRIPT5022: Invalid XML: null 
jquery.min.js, line 2 character 10890

XML5619: Incorrect document syntax. 
, line 1 character 1

Я также использовал пример, приведенный на странице Jquery Form Plugin, который использует только Javascript, но это не помогает. Очевидно, первая ошибка, относящаяся к Jquery, исчезает, но я не могу получить ожидаемые результаты (в данном случае image/jpegв div с id="uploadOutput").

Когда я смотрю на консоль в IE9, я получаю это:

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

и как основной ответ:


<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>
</code></pre><p>, что все в порядке, но по какой-то причине я не могу обработать эту информацию на HTML-странице. Я проверил XML, просто чтобы убедиться, что проблема не в нем. Это действительно, конечно.</p><p>Итак, в чем проблема с IE9?</p><p><strong>ОБНОВЛЕНИЕ:</strong></p><p>Еще один способ получить XML, который работает в Chrome и Firefox, но не в IE9:</p><pre><code>(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);
        }
    });
})();  
</code></pre><p><strong>ОБНОВЛЕНИЕ 2</strong>:</p><pre><code><!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>
</code></pre><p>Заранее спасибо. </p></p>
         </div>
         <div class="votes-question">
            <div class="vote-count" itemprop="upvoteCount">10</div><i class="fa fa-thumbs-o-up"></i>
         </div>
         <div class="tags">
            <a href="/questions/tagged/ajax" class="tag"  title="ajax" rel="tag">ajax</a> <a href="/questions/tagged/internet-explorer-9" class="tag"  title="internet-explorer-9" rel="tag">internet-explorer-9</a> <a href="/questions/tagged/javascript" class="tag"  title="javascript" rel="tag">javascript</a> <a href="/questions/tagged/xml" class="tag"  title="xml" rel="tag">xml</a> <a href="/questions/tagged/jquery" class="tag"  title="jquery" rel="tag">jquery</a>         </div>
         <div class="clearfix"></div>
         <div class="action-time">
            задан Community            <span title="23 May 2017 в 12:25 ">23 May 2017 в 12:25 </span>
         </div>
         
         <a class="s-link" href="/questions/618894/ie9-otkazyvaetsja-obrabatyvat-xml-otvet" title="поделиться">поделиться</a>
      </div>
   </div>
  <div style="height:100px;margin:10px 0px;" class="">

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- siteask before post --> <ins class="adsbygoogle"      style="display:block;height:100px"
                                                                                                                             data-ad-client="ca-pub-2355906945027976"
                                                                                                                             data-ad-slot="" data-ad-format="auto"></ins>
    <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

    </div>
   <div class="answers" id="answers">
   
      <h2 class="pull-left"><span itemprop="answerCount">0</span> ответов</h2>
      <div class="clearfix"></div>

      <div class="answer-pager">
         <div class="pagination">
                     </div>
      </div>

            <div style="margin-top: 20px;">
          Другие вопросы по тегам:          <div class="tags" style="display: inline-block; float: none;">
         <a href="/questions/tagged/ajax" class="tag"  title="ajax" rel="tag">ajax</a> <a href="/questions/tagged/internet-explorer-9" class="tag"  title="internet-explorer-9" rel="tag">internet-explorer-9</a> <a href="/questions/tagged/javascript" class="tag"  title="javascript" rel="tag">javascript</a> <a href="/questions/tagged/xml" class="tag"  title="xml" rel="tag">xml</a> <a href="/questions/tagged/jquery" class="tag"  title="jquery" rel="tag">jquery</a>       </div>
        <h3 class="m-t-20">Похожие вопросы:</h3>

        <div class="related-block">
          <ul>
                          <li><div class='votes-answer green'><span class='vote-count'>99</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/131610/skrytye-funkcii-javascript-zakrytyj" title="Скрытые функции JavaScript? [закрытый]">Скрытые функции JavaScript? [закрытый]</a> - 23 May 2017 02:10 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>70</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/82769/chto-takoe-javascript-versija-sleep" title="Что такое JavaScript-версия sleep ()?">Что такое JavaScript-версия sleep ()?</a> - 17 March 2018 18:15 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>61</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/90102/kak-ja-mogu-otformatirovat-chisla-v-vide-stroki-valjuty-v-javascript" title="Как я могу отформатировать числа в виде строки валюты в JavaScript?">Как я могу отформатировать числа в виде строки валюты в JavaScript?</a> - 26 May 2019 04:14 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>59</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/127174/chto-luchshij-sposob-sostoit-v-tom-chtoby-vynudit-sebja-k-osnovnomu-vi-zakrytyj" title="Что лучший способ состоит в том, чтобы вынудить себя к основному vi? [закрытый]">Что лучший способ состоит в том, чтобы вынудить себя к основному vi? [закрытый]</a> - 9 April 2009 03:44 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>44</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/82794/kakoj-sintaksis-javljaetsja-predpochtitelnym-dlja-opredelenija-perechislenij-v-javascript-zakryto" title="Какой синтаксис является предпочтительным для определения перечислений в JavaScript? [закрыто]">Какой синтаксис является предпочтительным для определения перечислений в JavaScript? [закрыто]</a> - 26 December 2018 06:38 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>40</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/89465/kak-luchshe-vsego-obnaruzhit-mobilnoe-ustrojstvo" title="Как лучше всего обнаружить мобильное устройство?">Как лучше всего обнаружить мобильное устройство?</a> - 24 April 2019 12:27 </li>
                          </ul>
        </div>

      </div>
   </div>
   
</div>      </div>
      <aside class="sidebar">
        <div class="awrap">

<script async src="https://yastatic.net/pcode-native/loaders/loader.js"></script>
<script>
    (yaads = window.yaads || []).push({
        id: "553274-2",
        render: "#id-553274-2"
    });
</script>
<div id="id-553274-2"></div>
          <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:600px"
     data-ad-client="ca-pub-2355906945027976"
     data-ad-slot="8038370725"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>


        </div>
      </aside>

    </div>
  </div>
  <footer class="footer">
    <div class="wrapper wrapper--sm">
      <div class="footer-navs-col">
        <div class="footer-nav footer-nav--menu">

          <div class="footer-coryright">© 2017 - 2020 Вопросы и ответы по программированию</div>
        </div>
        <div class="footer-nav footer-nav--catalog">
        </div>
      </div>
      <div class="footer-contacts-col">
        <div class="soc-widget-col">
        </div>
      </div>
      <div class="clearfix"></div>
    </div>

  </footer>

</div>

<script type="text/javascript" src="/js/ui/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/js/ui/external/jquery.cookie.js"></script>

<script type="text/javascript" src="/js/versions/menu.ru.u1607887878.js"></script>


<script type="text/javascript" src="/js/jquery.fancybox.min.js"></script>
<script type="text/javascript" src="/js/slick.min.js"></script>
<script type="text/javascript" src="/js/jquery.maskedinput.min.js"></script>

<script type="text/javascript" src="/js/versions/scripts.ru.u1607887878.js"></script>


<!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; var z = null;m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(90030325, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/90030325" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter -->


<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123993370-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-123993370-1');
</script>

</div>
<script type="application/ld+json">
  {
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Программирование - вопросы и ответы",
  "alternateName": "Программирование - вопросы и ответы",
  "url": "https://legkovopros.ru",
  "potentialAction": {
     "@type": "SearchAction",
     "target": "https://legkovopros.ru/search?search={search_term_string}",
     "query-input": "required name=search_term_string"
   }
}
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Программирование - вопросы и ответы",
  "url": "https://legkovopros.ru",
  "logo": "https://legkovopros.ru/i/logo.png",
  "email": "info@legkovopros.ru",
   "telephone": ""

}




</script>
</body>
</html>