3

これが私のコードです：

<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>

ご覧のとおり、フォームが送信されたときにページをリロードする代わりに、イベントをキャッチして AJAX を使用して送信します。返されるデータは HTML ページ全体であり、ユーザーに表示されるものとほとんど同じです。そのページから、変更される可能性のあるデータで現在のレイアウトを更新します。

ページには、実行にかなり時間がかかる他のいくつかの JS スクリプトと、画像、CSS、メニューなどの多くのレイアウト データがあります。AJAX の応答を取得するときに、そのすべてのデータと DOM も読み込まれます。そのコンテンツが表示されていなくてもリクエストしますか、それともそのようなものはブラウザによって解析されたときにのみ読み込まれ、その後は一種の大きな文字列のままですか?

自分で答えを見つけるためにどのようなテストを実装すればよいかわかりません:(

4

1 に答える 1

3

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.

于 2012-06-14T15:46:15.537 に答える