title: Synchronous XMLHttpRequest warning and <script>
body: <p>I'm getting a warning message:</p>
  
  <blockquote>
    <p>Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check <a href="http://xhr.spec.whatwg.org/">http://xhr.spec.whatwg.org/</a>.</p>
  </blockquote>
  
  <p>when performing an asynchronous AJAX request that contains a script (that has local <code>src</code>), which is injected into HTML, using <code>$.html()</code> method. I've changed the given script to contain <code>async="async"</code>, yet the warning message still remains.</p>
  
  <p>I've started debugging the issue to discover that my appended <code>&lt;script&gt;</code> is handled via jquery AJAX call from <code>jQuery.ajaxTransport</code> (<a href="http://code.jquery.com/jquery-1.10.0.js">http://code.jquery.com/jquery-1.10.0.js</a>, #8663), where <code>async</code> is set to <code>false</code> (that's probably where the issue comes from).</p>
  
  <p>Now - what can I do about this?</p>
  
  <p>The message appears in newest version of Chrome as well as Firefox.</p>
  
  <hr>
  
  <p>While I cannot provide a test case on jsfiddle, here's a test case that displays the issue:</p>
  
  <p>test.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
      $.ajax({
          url: '/response.html',
          success: function(response){
              $(document.body).html(response);
          }
      })
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>response.html</p>
  
  <pre><code>&lt;script type="text/javascript" src="/json.js" async="async"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>json.js</p>
  
  <pre><code>console.log('hi');
  </code></pre>
  
  <hr>
  
  <p>AJAX request is not necessary to trigger the warning - all is needed is inserting a <code>&lt;script&gt;</code></p>
  
  <p>test2.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
      $(document.body).html('&lt;script type="text/javascript" src="/json.js" async="async"&gt;&lt;\/script&gt;');
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>It's worth noting that this has been fixed, per <a href="https://github.com/jquery/jquery/issues/2060">https://github.com/jquery/jquery/issues/2060</a></p>