在服务器端或客户端建立网页？

我一直想知道如何选择使用服务器端代码还是客户端代码来构建HTML页面。我将使用一个非常简单的PHP vs javascript/jquery示例来进一步解释我的问题。非常感谢您的建议和意见。在服务器端或客户端建立网页？

假设我即将向用户展示一个网页，以在我的网页中选择一种报告类型。哪个更有意义？

对于服务器端的创作，我应该这样做：

<div id="reportChoices"> 

<?php 
// filename: reportScreen.php 
// just for the sake of simplicity, say a database returns the following rows 
// that indicates the type of reports that are available: 

$results = array(
    array("htmlID"=>"battingaverage", "htmlLabel"=>"Batting AVG report"), 
    array("htmlID"=>"homeruntotals", "htmlLabel"=>"Home Run Totals report"), 
); 

foreach ($results AS $data) 
    echo "<input type='radio' name='reportType' value='{$data['htmlID']}'/>{$data['htmlLabel']}"; 
?> 

</div>

使用客户端的代码，我得到的JavaScript构建的页面类似如下：

<!-- filename: reportScreen.html --> 
<div id="reportChoices"> 
</div> 

<!-- I could put this in the document.ready handler, of course --> 
<script type="text/javascript"> 
$.getJSON("rt.php", {}, function(data) { 
var mainDiv = $("#reportChoices"); 
$.each(data, function(idx, jsonData) { 
    var newInput = $(document.createElement('input')); 

    newInput 
    .attr("type", "radio") 
    .attr("name", "reportType") 
    .attr("value", jsonData["htmlID"]) 

    mainDiv.append(newInput).append(jsonData["htmlLabel"]); 
}); 
}; 
</script>

所有我需要在服务器上的数据转储PHP脚本，例如：

<?php 
// filename: rt.php 
// again, let's assume something like this was returned from the db regarding available report types 

$results = array(
    array("htmlID"=>"battingaverage", "htmlLabel"=>"Batting AVG report"), 
    array("htmlID"=>"homeruntotals", "htmlLabel"=>"Home Run Totals report"), 
); 

echo json_encode($results); 
?>

这是一个非常简单的例子，但回回在这里，我看到了不同领域的优点和缺点。

1 - 服务器端解决方案的优点是能够隐藏大部分实际编程逻辑背后的所有内容。当用户查看页面源代码时，他们看到的只是已经建好的网页。换句话说，客户端解决方案将您所有的源代码和编程逻辑放在了如何构建特定的东西上。但是你可以使用缩小器来让你的源看起来更加神秘。

2 - 客户端解决方案将“资源负载”转移到客户端系统上（即浏览器需要使用客户端的计算机资源来构建大部分页面），而服务器端解决方案则陷入困境，服务器。

3 - 当涉及到可维护性和可读性时，客户端解决方案可能更优雅。但是，再次，我可以使用PHP库来模块化HTML控件，并使其更具可读性。

有何评论？提前致谢。

来源

2010-12-01 JoJoeDad

Con（客户端解决方案）：客户端解决方案依赖客户端正确执行代码。由于您无法控制客户端系统将执行您的代码，因此要确保它始终如一地提供与服务器端解决方案相同的结果更加困难。

这个特殊问题似乎并不是需要一个客户端解决方案，是吗？我会坚持使用服务器端解决方案。唯一额外的工作是foreach循环与一个echo，这不是真的如此重要的资源（除非你已经剖析它，并知道它是）？所产生的代码都在一个地方，更简单。

来源

2010-12-01 18:28:10 FrustratedWithFormsDesigner

通常，最好不要依赖于客户端上启用的Javascript。另外，大多数搜索引擎都不会抓取您的网页。您还公开有关您的服务器/服务器端代码的信息（除非您明确将其抽象出来）。

如果您想将数据转换为视图，您可能需要查看XSLT。如果你还没有阅读的另一件事是逐步增强。

http://alistapart.com/articles/understandingprogressiveenhancement/

在你提出的第一个客户端解决方案，它实际上是效率较低，因为有一个额外的HTTP请求。而第二个也可能效率不高，因为所有数据都必须用json_encode进行处理。然而，如果你正在做的是一个丰富的web应用程序，取决于在Javascript上，我看到没有问题，如果你想用Javascript做任何事情。

来源

2010-12-01 18:29:08 Jonah

实际上，Google正在为JS内容编制索引方面迈出了重要的一步。例如，请参阅http://googlewebmastercentral.blogspot.com/2007/11/spiders-view-of-web-20.html – nico 2010-12-01 18:53:27

我怀疑将报表生成移动到客户端真的会节省任何资源 - 记住它仍然在向您的（？）服务器发送HTTP请求，因此数据库处理仍然完成。另外，在客户端提供数据库模式可能是数据库攻击的秘诀。

也许你应该使用模型 - 视图 - 控制器模式来分离服务器上的演示文稿的业务逻辑？至少这将所有的代码保留在一个地方，但仍然可以让你在逻辑上分离组件。如果这听起来对你有用，请看看Zend Framework之类的东西。

来源

2010-12-01 18:29:58

通过在客户端构建问题，您可以保持更好的问题分离，但如果需要加载很多内容（再加上您必须考虑FrustratedWithForms提到的内容），则可能会以牺牲用户体验为代价。对我来说，在服务器端更容易构建它，这意味着如果您处于严格的时间线上，而是根据您的技能组合来决定，那么这将成为更理想的选择。

来源

2010-12-01 18:30:11 N0Alias

在服务器端或客户端建立网页？

回答

相关问题