Best IT Recipes

When loading an html page via ajax will script tags be loaded?

When you load an html document using AJAX, what does it do with the nodes inside the HEAD tag: (script, link, style, meta, title) ignore them or download and analyze them? And in the case of the jquery ajax () function?

+28
javascript jquery html ajax
Feb 04 '10 at 22:36
source share
5 answers

When you call the jQuery.ajax() method, you can specify the dataType property, which describes what data you expect from the server and how to handle it as soon as it is received.

By default, jQuery will try to guess the dataType based on the MIME response type. However, you can explicitly specify the data type from the following:

  • html : returns HTML as plain text; script tags are evaluated when pasted into the DOM.

  • text : plain text string.

  • xml : returns an XML document that can be processed through jQuery.

  • script : evaluates the response as JavaScript and returns it as plain text. Disables caching if the cache option is not used.

  • json : evaluates the response as JSON and returns a JavaScript object.

  • jsonp : loading in a JSON block using JSONP. An additional "? Callback =?" Will be added. to the end of your url to specify a callback.

As an example, the following ajax call will return data as a simple text string without running scripts or manipulating the DOM:

 $.ajax({ url: 'ajax/test.html', dataType: 'text', success: function(data) { alert(data); } });
+38
Feb 04 '10 at 22:45
source share

when you load an html document using AJAX what does it do with the nodes inside the HEAD tag: (script, link, style, meta, title)

It depends on how you download. ajax() (as with the XMLHttpRequest on which it is based) itself just gives you a string. How do you get this in a document?

If you write this line in the innerHTML element, the scripts inside it will not be executed. This is not standardized anywhere, but all currently popular browsers behave this way.

However, if you then insert this element into the document (whether it is already inside the document with or without it), it will be executed in many browsers when you do this for the first time. In IE, the script will execute when you directly insert the script element into any element, whether in the document or not.

This is all very inconsistent and inconvenient, so you should avoid the AJAX <script> loading elements in the document. In any case, there is not always a good reason; it’s better to save the static script code and use JSON (or eval only if absolutely necessary) to pass script data to them.

Function

jQuery load tries to compensate for browser differences when loading AJAX content into a document. It cannot catch all the circumstances surrounding <script> (there are some really strange ones). You should not rely on this, in general. You can get away with the response to the HTML page, but then only load certain elements (s) without <script> in, because this is just a-to-innerHTML write step. But then again, you really don't want to rely on it. It is much better if the server returns an HTML or JSON fragment that your scripts can use directly.

As for style sheets and style links, inserting them into the body generally works, although this probably should not be done with HTML expressions. meta and title will not do anything, too late for them to effect. Just parsing them with innerHTML won't do anything, but avoid it if you can anyway.

+31
Feb 05 2018-10-02T00
source share

When you say "load", I understand that simply means calling XHR (or $ .ajax or $ .get, etc.) to pull XML, JSON or text resource from a web server, save it in a JS browser and Get a link to it. For HTML resources, this act does not parse anything.

However, if you take this HTML code and enter it in the DOM (at least in Firefox 3.5), then it will be interpreted. For example, let's say you had the following three very professional files.

barf1.html:

 <html> <head> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(init); function init() { $.get('barf2.html', inject); } function inject(data) { debugger; $('body').html(data); //document.write(data); } </script> </head> <body> long live barf1! </body> </html>

barf2.html:

 <div> <script type="text/javascript"> alert('barf2!'); </script> <script type="text/javascript" src="barf3.js"></script> barf2 lives here now! </div>

barf3.js:

 alert('barf3!');

When you go to barf1.html, the contents of the page will change and you will see two JavaScript warnings indicating that both the built-in script and the external script files are interpreted.

+7
04 Feb '10 at 23:06
source share

No, they will not be interpreted.

HTML can be loaded either with innerHTML or with DOM manipulation. In both cases, if the HTML contains <script> tags, they will not be interpreted.

However, you can pass the <script> tags inside the Ajaxed and eval() HTML content if you really need to.

If you use this <script src="http://site/script.js"></script> script tag, it will be interpreted.

+2
Feb 04 '10 at
source share

As already noted, in the general case, no, script tags will not be interpreted.

I'm not quite sure what will happen to the other tags.

I make the assumption that you are loading the entire page in AJAX - I'm not sure why you would like to do this? Maybe you could give us a little more information, and we could make some suggestions?

To more accurately solve your question - in general, any scripts required for reloaded content should not be reloaded with content, but with a page. This way you can organize a callback from your AJAX by re-binding event handlers, etc.

+1
Feb 04 '10 at 22:56
source share


More articles:


All Articles