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

时间:2013-09-26 19:02:24

标签: javascript php jquery html ajax

在Web开发中(更具体地说是jQuery)我最好先手动“预加载”我的页面,然后使用jQuery来操作DOM或者反过来。

这是以下问题:

<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");
});
.
.
.

<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
});
.
.
.

我发现第二种方法更优雅,因为后端只返回前端操作的JSON数据。使用第一种方法,PHP脚本必须实际返回HTML。

我认为第一种方法会对服务器造成严重影响,因为显示对话框之类的简单事情需要AJAX调用(即使它不需要一个因为所有内容都包含在方法2中)。

第二种方法似乎会更难以对客户端施加压力,因为我在JS中进行所有数据操作。然而,第一种方法将HTML响应转储到div中并重新格式化DOM,因此我不确定它是否同样强烈。

加载时间的影响如何?第一种方法必须基本上呈现一个包含可能永远不会显示但只有一个请求的元素的巨型文档。第二种方法必须生成一百万个请求,但会产生一个较小的DOM。

1 个答案:

答案 0 :(得分:0)

您是否关注访问者在查看页面源时看到的内容?如果你这样做,那就使用AJAX。

服务器速度是否有可能成为问题?使用AJAX时可能会有非常轻微(但明显)的延迟。如果这是一个问题,请使用hide / show。

然而,正如杰克和罗里指出的那样,一切都取决于你在做什么。如果你可以通过使某些数据加载条件来更快地渲染初始页面,那么使用AJAX。

但是,AJAX会为您的页面带来额外的复杂性。不多,但有点。未来的开发人员能够维护您的页面吗? (几乎可以肯定,是的)

最后的考虑:AJAX很有趣。