使用AJAX引入页面元素，或者只是隐藏和显示它们是否更有效？

Question

In web development (jQuery more specifically) am I better off "pre-loading" my page before hand and just use jQuery to manipulate the DOM or the other way around.

It is a question of the following:

<div id="item1"></div>
<div id="item2"></div>
<div id="element><!-- AJAX --></div>

$("#item1").click(function(e) {
     $("#element").load("ajax/response/containing/HTML_1.php");
});

$("#item2").click(function(e) {
     $("#element").load("ajax/response/containing/HTML_2.php");
});
.
.
.

versus

<div id="item1"></div>
<div id="item2"></div>
<div id="element>
   <div id="item1_content" style="display:none"><? include('/path/to/html_1'); ?></div>
   <div id="item2_content" style="display:none"><? include('/path/to/html_2'); ?></div>
</div>

$("#item1").click(function(e) {
     $("#item1_content").show();
     $("#item2_content").hide();
     //Possibly do an AJAX call that simply returns JSON data and do something with it
});

$("#item2").click(function(e) {
     $("#item2_content").show();
     $("#item1_content").hide();
     //Possibly do an AJAX call that simply returns JSON data and do something with it
});
.
.
.

I find the second method to be more elegant since the backend only returns JSON data which the front-end manipulates. With the first method the PHP scripts have to actually return HTML.

I would think the first method would hammer on the server harder since simple things such as displaying a dialog would require an AJAX call (even if it didn't need one because all the content is included in method 2).

The second method seems like it would hammer on the client harder since I am doing all my data manipulation in JS. The first method however dumps the HTML responses into the divs and reformats the DOM so I am not sure if it's just as intense.

What about the impact of load times? The first method has to essentially render a giant document containing elements that may never be shown but with a single request, The second method has to make a million requests but results in a smaller DOM.

Answer 1

Do you care what visitors see when viewing the page source? If you do, then use AJAX.

Is there any chance that server speed could be an issue? There can be a very slight (but noticeable) delay when using AJAX. If that is a problem, use hide/show.

However, as Jack and Rory pointed out, everything depends on what you are doing. If you can render the initial page much faster by making some data loading conditional, then use AJAX.

However, AJAX will introduce an additional level of complexity to your page. Not much, but a little. Will future developers be able to maintain your page? (Almost certainly, yes)

Final consideration: AJAX is way fun.