客户端包括vs服务器端包括?

时间:2010-10-11 21:15:13

标签: javascript jquery html include

我们有一个包含多个div块的HTML页面。我们想将这些div分成多个文件然后将它们组合成一个文件 - 最好是使用服务器端包含(在我们的例子中是JSP)还是客户端包含?

请注意,我们正在使用JQuery - 不确定JQuery是否有一种聪明的方法来执行包含。

5 个答案:

答案 0 :(得分:4)

在性能方面,它比在服务器上进行这种处理要好得多。在I / O和处理其他HTTP请求方面的成本 - 如果您在客户端进行整理则必需的 - 将是重要的。在服务器上包含附加内容将导致用户的毫秒延迟;在客户端上做这件事会花费更多的数量。

编辑Luke Schafer's comment,这假设可以立即生成放在一起的内容(例如,通过包含来自服务器的平面文件)。如果需要时间(例如冗长的数据库调用),则可能适合加载页面的主要部分并使用jQuery添加额外的内容。与以往一样,最好的解决方案取决于您的具体情况。

答案 1 :(得分:3)

实际上,客户端包含一个非常有用的属性:客户端浏览器有缓存!如果您的某些内容不会经常发生变化,并且每个客户端都需要经常加载页面的一些片段,那么客户端包含是一个好主意,因为可以利用客户端的浏览器缓存。

这个想法是你的整个页面包含一堆占位符div,其中客户端包含将被删除。 HTML片段通过AJAX调用加载。如果片段的HTTP响应头在未来指定了Expires和/或Cache-Control,那么当您的客户端访问下一页时,AJAX请求将从缓存中提供,而不是实际转到服务器。

答案 2 :(得分:1)

我必须同意其他所有人认为服务器端是这个地方,但需要注意。

如果您的部分包含需要一段时间加载的内容,比如每个部分都有来自单独的Web服务调用的内容,那么让JQuery为get加载它们可能是有益的,因为页面的其余部分可以在部分异步加载时加载。

除此之外,是的......服务器端

答案 3 :(得分:1)

我不确定我在客户端与服务器端辩论中的位置。这些日子最受欢迎的事情似乎是在客户端处理事情。可能两者的某种组合是最好的。为了完全尝试客户端,我决定启动一个客户端异步包含的对象,但缓存了文本供以后使用。有一个加载函数,它将回调函数作为成功加载时调用的参数。还有一个函数可以将对象的内部html设置为加载的文本。该对象需要先前包含jquery。

/**
 * An object to manage client side includes. 
 * 
 * Loads of text are asynchronous but the result will be cached for later use.
 * 
 * @param urlText - the url of the inlcude text
 * @returns an Include object
 */
function Include(urlText)
{
    var self;
    var loaded;
    var txt;
    var url;

    /**
     * Sets the url for the include.
     * 
     * Will unload a previously set include.
     * 
     * @param url
     */
    this.setUrl = setUrl;
    function setUrl(url)
    {
        if (self.url != url)
        {
            unload();
        }
        self.url = url;
    }

    /**
     * 
     * @returns the url
     */
    this.getUrl = getUrl;
    function getUrl()
    {
        return self.url;
    }

    /**
     * Unloads the current url.
     */
    this.unload = unload;
    function unload()
    {
        self.txt = null;
        self.loaded = false;
    }

    /**
     * Loads the current url asynchronously
     * 
     * @param fnPostLoad function to call on successful completion
     */
    this.load = load; 
    function load(fnPostLoad)
    {

        if (self.loaded)
        {
            if (fnPostLoad != null)
            {
                fnPostLoad.call();
            }
            return;
        }

        $.ajax({
            type : "GET",
            dataType : "text",
            url : self.url,
            success : function(data) {
                self.txt = data;
                self.loaded = true;
                if (fnPostLoad != null)
                {
                    fnPostLoad.call();
                }
            },
            error : function(){
                alert("An error occurred accessing client side include located at: " + self.url);
            }
        });         
    };

    /**
     * Sets the inner html of a given object to be the text of this include.
     * 
     * Will load the url if not loaded.
     * 
     * @param obj
     */
    this.setInnerHtmlOf = setInnerHtmlOf;
    function setInnerHtmlOf(obj)
    {
        load(function(){obj.html(self.txt);})
    }

    // initialize members
    self = this; // must be done first
    loaded = false;
    txt = null;
    setUrl(urlText);    
}

要使用此对象,您可以执行以下操作:

var foo = new Include("foo.inc");
var bar = new Include("bar.inc");
foo.setInnerHtmlOf($('#treeMargin'));
bar.setInnerHtmlOf($('#mainMargin'));

我没有做太多的测试,但似乎工作得非常好。

答案 4 :(得分:-1)

我会说服务器端。那么,如果jQuery没有加载,或者用户已经开启了javascript?