Loading script asynchronously

Question

I have an administrative system using adminLTE. In the side menu I load all my scripts asynchronously (at least it was expected). However when I load an HTML asynchronously, and inside this file I load an external javascript, it generates me the following warning:

jquery.min.js:2 [Deprecation] Synchronous Xmlhttprequest on the main thread is deprecated because of its detrimental effects to the end user’s Experience. For more help, check https://xhr.spec.whatwg.org/.

Follow the code I’m using to load the files

$.ajax(url+"teste").done(function(data) {
    $("#ajax-content").html(data);
    $('#loadingMenu').remove(); // Retira o gif de loading
});

The file I carry is this:

<div class="box">
    <h1>HTML carregado assincronamente</h1>
</div>
<script src="meuScript.js"></script>

Placing the javascript code directly in the HTML file does not generate any error.

<div class="box">
    <h1>HTML carregado assincronamente</h1>
</div>
<script>
   alert('agora não gera aviso');
</script>

How do I load this script without having to put it on the same HTML page?

Answer 1

The message says the opposite of what you understood;

What is being discontinued (has become obsolete) is the SYNCHRONOUS (that crashes the browser many times), for example this is synchronous:

xhr.open("GET", "/foo/bar", false);

And this is asynchronous:

xhr.open("GET", "/foo/bar", true);

In this answer I explain what is Ajax and Sjax:

• Ajax is not a programming language. So what is?

Of course the above code is pure JS, but jQuery internally uses Javascript.

However as @Valdeirpsr said, it’s a problem in function jQuery.parseHTML (and/or dependencies), used internally in the function $(seletor).load("...");

In other words, it is a bug in jQuery, and it is likely that soon they will fix.