Question

Here is my code:

<script>

    function loadPage() {

        function sendFormHelper(callback) {
            var url = "/same-as-current-url";
            var serializedForm = $('#form').serialize();
            $.post(url, serializedForm, function(data) {
                callback(data);
            });
        }

        $('#form').off('submit').on('submit', function() {
            sendForm(function(data) {
                var mainResultCount = $(data).find('#main-result-count');
                var mainList = $(data).find('#main-list');
                $('#main-result-count').html($(mainResultCount).html());
                $('#main-list').html($(mainList).html());
                loadPage();
            });
            return false;
        });

    }

    $(function() {
        loadPage();
    });

</script>

<form id="form">
    <!-- some stuff -->
</form>

<div id="main-result-count">
    <!-- some stuff that can change -->
</div>

<div id="main-list">
    <!-- some stuff that can change -->
</div>

As you can see, instead of reloading the page when the form is submitted, I catch the event and send it using AJAX. The returned data is a whole HTML page, almost indentical as the one the user see. From that page, I update the current layout with the data that potentially change.

I have several other JS scripts on the page, that are quite long to run, and a lot of layout data like images, CSS, menus, etc. Do all of that data and the DOM are also loaded when getting the response of the AJAX request even if that content isn’t displayed, or is that kind of stuff only loaded when parsed by a browser, and stay then a kind of big string?

I can’t find what kind of test I should implement to find the answer on my own :(

Answer 1

No the other stuff will not get loaded when you do this. The ajax request will only fetch the markup itself. It will not also pull in external scripts, run scripts, etc. Only a browser loading an HTML session would do that.

You can investigate with a tool like Firebug to verify I am correct here.

Go ahead and watch the Network I/O from Firebug while you make your request. You will notice that no javascript/css resources are getting loaded… just the markup from the servlet.

Hope this helps.