CODEWITHSUNDEEP
jqueryajaxhttpweb
NeoWang
NeoWang

Reputation: 18523

Why is jquery sending GET request for a script tag that is dynamically loaded?

I use jquery's ajax method to dynamically load some html snippet from server, and insert the snippet in a div. Within the snippet are some <script> tags for external scripts.

I watched network activity in Chrome toolbar while making the ajax request, and found the GET requests for the script tags are appended with something like ?_=1234567890. I also noticed the initiator of the GET request is jquery. I know jquery does this for AJAX requests to avoid cached version being used, but I want the script to be cached.

What really surprised me is that the <script> tags are fetched by jquery with ajax. When you insert a <script> tag into DOM, should the browser be responsible for loading and executing it? Why is jQuery taking the action here?

If I skip jquery and use plain js to append a <script> tag to DOM, the browser will load and parse it, right? Why doesn't the browser do this and let jquery take over?

==============code=============

Code for loading the html snippet:

var url = "/"+modulename+"/settings/"+this.selectedProduct.id;
$.get(url, null, function(snippet){
  $("div#content").empty().html(snippet);
}

The html snippet:

<script type='text/javascript' src="http://www.staticcdn.org/somelib.js"></script>

<script>
  <!--some html rendering code that depends on somelib-->
</script>

Upvotes: 6

Views: 2748

Answers (2)

drkunibar
drkunibar

Reputation: 1337

Have a look in the jquery doc for ajax: http://api.jquery.com/jQuery.ajax/ and note the option datatype

"script": Evaluates the response as JavaScript and returns it as plain text. Disables caching by appending a query string parameter, "_=[TIMESTAMP]", to the URL unless the cache option is set to true. Note: This will turn POSTs into GETs for remote-domain requests.

$.get use $.ajax. If you do not want the ?_=... you have to call the $.ajax by yourself.

You also my have a look at the option cache

Upvotes: 1

user1932079
user1932079

Reputation:

Since you are in Chrome, here's a tip. If you mouseover the Network call source, a popup will show with the stack heap at the time for the call. Doing that on such a call exposes jquery.js:6717's _evalUrl being called on scripts the first time they are called on a page (setGlobalEval disables calling a second time for that script on the same page).

_evalUrl: function( url ) {
    return jQuery.ajax({
        url: url,
        type: "GET",
        dataType: "script",
        async: false,
        global: false,
        "throws": true
    });
}

Since that code does not use the cache option, you have a couple of options:

  1. Use the unrecommended https://api.jquery.com/jQuery.ajaxSetup/ to set no caching for all calls, so you will have to override caching for all non-cached calls. Did I mention all calls?

  2. Edit the source.

  3. Don't stress and leave things how they are.

  4. A pure guess, but you could just fetch the content and insert it into the DOM yourself and deal with the rendering consequences on your own.

It appears that this is done as part of a structuring/sanitizing of the content being inserted into the DOM on a call.

Upvotes: 2

Related Questions