Я не совсем уверен, где я нахожусь на стороне клиента по сравнению с дебатами на стороне сервера.В наши дни популярнее всего обрабатывать вещи на стороне клиента.Вероятно, какая-то комбинация двух является лучшей.Просто чтобы попробовать это полностью на стороне клиента, я решил раскрутить объект, который на стороне клиента включает асинхронно, но кэшировал текст для дальнейшего использования.Существует функция загрузки, которая принимает функцию обратного вызова в качестве параметра, вызываемого при успешной загрузке.Также есть функция для установки внутреннего 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'));
Я не слишком много тестировал, но, похоже,работать очень хорошо.