title: IE9 refuses to process XML response
body: <p>This is a question in relation to <a href="https://stackoverflow.com/questions/9695586/cross-domain-xhr-uploading-via-javascript">this one</a>.</p>
  
  <p>In <strong>UPDATE II</strong>, I added a script based on Jamie's feedback.</p>
  
  <p><strong>UPDATE - tl;dr</strong>:</p>
  
  <p>I created a fiddle with a temporary key so you guys can see the problem more easily: <a href="http://jsfiddle.net/S6wEN/" rel="nofollow noreferrer">http://jsfiddle.net/S6wEN/</a>.</p>
  
  <p>As this question was getting too long, this is a summary.</p>
  
  <ul>
  <li>I tried to use imgur API to update an image via cross domain XHR.</li>
  <li>In order to abstract details in the implementation, I'm using Jquery Form Plugin (obviously, it's contained in the fiddle).</li>
  <li>Works great in Chrome, Firefox, etc but it doesn't work in IE9.</li>
  <li>The expected result is to update the image and retrieve image type.</li>
  </ul>
  
  <p>You can still find the details below.</p>
  
  <p>Thanks</p>
  
  <hr>
  
  <p>I have this HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;form id="uploadForm" action="http://api.imgur.com/2/upload.xml" method="POST" enctype="multipart/form-data"&gt;
      &lt;input type="hidden" name="key" value="MYKEY"&gt;
      File: &lt;input type="file" name="image"&gt;
      Return Type: &lt;select id="uploadResponseType" name="mimetype"&gt;
          &lt;option value="xml"&gt;xml&lt;/option&gt;
      &lt;/select&gt;
      &lt;input type="submit" value="Submit 1" name="uploadSubmitter1"&gt;
  &lt;/form&gt;
  
  &lt;div id="uploadOutput"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>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 <a href="http://malsup.com/jquery/form/#file-upload" rel="nofollow noreferrer">Jquery Form Plugin</a>, 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:</p>
  
  <pre><code>(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'));
  
          }
      });
  })();  
  </code></pre>
  
  <p>In IE9 I receive the following errors:</p>
  
  <pre><code>SCRIPT5022: Invalid XML: null 
  jquery.min.js, line 2 character 10890
  
  XML5619: Incorrect document syntax. 
  , line 1 character 1
  </code></pre>
  
  <p>I also used the example given in Jquery Form Plugin's page, which uses only Javascript but it doesn't help. Obviously, the first error referring to Jquery disappears but I can't obtain the expected results (in this case, <code>image/jpeg</code> in the div with <code>id="uploadOutput"</code> ).</p>
  
  <p>When I look at the console in IE9, I get this:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>and as body response:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;upload&gt;&lt;image&gt;&lt;name/&gt;&lt;title/&gt;&lt;caption/&gt;&lt;hash&gt;xMCdD&lt;/hash&gt;  
  &lt;deletehash&gt;Nb7Pvf3zPNohmkQ&lt;/deletehash&gt;&lt;datetime&gt;2012-03-17 01:15:22&lt;/datetime&gt;
  &lt;type&gt;image/jpeg&lt;/type&gt;&lt;animated&gt;false&lt;/animated&gt;&lt;width&gt;1024&lt;/width
  &lt;height&gt;768&lt;/height&gt;&lt;size&gt;208053&lt;/size&gt;&lt;views&gt;0&lt;/views&gt;&lt;bandwidth&gt;0&lt;/bandwidth&gt;&lt;/image
  &lt;links&gt;&lt;original&gt;http://i.imgur.com/xMCdD.jpg&lt;/original
  &lt;imgur_page&gt;http://imgur.com/xMCdD&lt;/imgur_page&gt;
  &lt;delete_page&gt;http://imgur.com/delete/Nb7Pvf3zPNohmkQ&lt;/delete_page&gt;
  &lt;small_square&gt;http://i.imgur.com/xMCdDs.jpg&lt;/small_square&gt;
  &lt;large_thumbnail&gt;http://i.imgur.com/xMCdDl.jpg&lt;/large_thumbnail&gt;&lt;/links&gt;&lt;/upload&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>So, what's the problem with IE9?.</p>
  
  <p><strong>UPDATE:</strong> </p>
  
  <p>Another way to fetch XML which works in Chrome and Firefox but not in 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>UPDATE 2</strong>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;body&gt;
      &lt;form id="uploadForm" action="http://api.imgur.com/2/upload.xml" method="POST" enctype="multipart/form-data"&gt;
          &lt;input type="hidden" name="key" value="00ced2f13cf6435ae8faec5d498cbbfe"&gt;
          File: &lt;input type="file" name="image"&gt;
          Return Type: &lt;select id="uploadResponseType" name="mimetype"&gt;
              &lt;option value="xml"&gt;xml&lt;/option&gt;
          &lt;/select&gt;
          &lt;input type="submit" value="Submit 1" name="uploadSubmitter1"&gt;
      &lt;/form&gt;
  
      &lt;div id="uploadOutput"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery.form.js"&gt;&lt;/script&gt;
  ​&lt;script&gt;
  (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);
  })();  
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks in advance.</p>