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 load and parse them? And in the case of jquery 's ajax() function?
load(URL,data,callback); The required URL parameter specifies the URL you wish to load. The optional data parameter specifies a set of querystring key/value pairs to send along with the request. The optional callback parameter is the name of a function to be executed after the load() method is completed.
If you aren't dynamically loading scripts or marking them as defer or async , then scripts are loaded in the order encountered in the page. It doesn't matter whether it's an external script or an inline script - they are executed in the order they are encountered in the page.
AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
What's AJAX? AJAX stands for Asynchronous JavaScript And XML. In a nutshell, it is the use of the XMLHttpRequest object to communicate with servers. It can send and receive information in various formats, including JSON, XML, HTML, and text files.
When you call the jQuery.ajax()
method, you can specify the dataType
property, which describes what kind of data you are expecting from the server, and how to handle it once it is received.
By default, jQuery will try to guess the dataType
based on the MIME type of the response. However you can explicitly specify a dataType from the following:
html: Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.
text: A plain text string.
xml: Returns a XML document that can be processed via jQuery.
script: Evaluates the response as JavaScript and returns it as plain text. Disables caching unless option "cache" is used.
json: Evaluates the response as JSON and returns a JavaScript object.
jsonp: Loads in a JSON block using JSONP. Will add an extra "?callback=?" to the end of your URL to specify the callback.
As an example, the following ajax call will return the data as a plain text string, without executing the scripts or manipulating the DOM:
$.ajax({ url: 'ajax/test.html', dataType: 'text', success: function(data) { alert(data); } });
when you load an html document using AJAX, what does it do with the nodes inside the HEAD tag: (script,link,style,meta,title)
That depends how you do the loading. ajax()
(as with the XMLHttpRequest on which it is based) itself just gives you a string. How are you getting that into the document?
If you write that string to the innerHTML
of an element, scripts inside it won't be executed. This is not standardised anywhere but all currently popular browsers behave this way.
However, if you then insert that element into the document (whether it was already inside the document before or not), it will be executed in many browsers, the first time you do it. In IE, the script will be executed when you directly insert a script element into any element, whether in the document or not.
This is all very inconsistent and inconvenient, which is why you should avoid AJAX-loading <script>
elements in the document. There is not usually a good reason to anyway; better to keep your script code static, and use JSON (or eval
only if absolutely necessary) to pass scripting data to them.
jQuery's load
function attempts to compensate for the browser differences when AJAX-loading content into the document. It fails to catch all circumstances involving <script>
(there are some really strange ones). You shouldn't rely on it, in general. You can get away with taking an HTML page response but then only loading specific element(s) with no <script>
in, because that only does the writing-to-innerHTML step. But again, you don't really want to be relying on this. Much better to have the server return a snippet of HTML or JSON your scripts can use directly.
As for stylesheets and stylesheet links, inserting them into the body does generally work, though by HTML's terms it probably shouldn't. meta
and title
won't do anything, it's too late for them to have an effect. Just parsing them using innerHTML
won't do anything, but still, avoid it if you can.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With