标签/Tag为[Ajax]的文章

网站启用ajax无刷新技术(pjax)和多说的一些小技巧 ,

先说ajax无刷新技术吧
因为 Godaddy 空间中资源和国内访问速度的原因,能节省一点资源就节省一点资源吧。虽然对于传统的 ajax 来说,更新版的 pjax 可以同时写入浏览器历史( pushState )和动态更换 url 显示,但是对于我来说,貌似还有一下不足:

  1. 浏览器缓存(内存)不会释放,会让老爷机的朋友感觉到机器卡。
  2. 不利于SEO(当然比 ajax 已经很好了)。 pjax 再先进也只更新某个容器,对于 head 内的一些 meta 是不会处理的,强迫症的伤不起啊。
  3. url 虽然写进了浏览器历史( pushState ),但是在 FireFox 下用 Backspace 返回时候。很多时间只是浏览器的url变了,但是内容还需要再次刷新。

好处也就不说了。减小重复资源的http请求
言归正传,简单说说本站是怎么启用这个吧:
直接用了 defunkt/jquery-pjax 这位大神的成熟方案。对本站的链接(a)做了处理。 代码如下:

code$.getScript("http://Path/to//js/jquery.pjax.js", function() { $(function() { easun_pjax(); }); });

其中 easun_pjax(); 为核心函数。 简单如下:

codefunction easun_pjax()
{
$(document).pjax('a[target!=_blank]', '#content', {fragment:'#content', timeout:6000});
$(document).on('pjax:send', function() {
$('#content').fadeTo(700,0.0);
});
$(document).on('pjax:complete', function() { $('#content').fadeTo(700,1); });
}

这样基本完成, 如果一些需要在替换#content(<div id="content">...<div>)的内容需要 js 实现的。请在pjax:complete中(上面有示例)中重新运行一次。

成功后实例可以参见本站的各博文之间的切换。

再说多说的一些小技巧吧

用多说一段时间了。乱七八糟的改了一起。多说的自定义其实还很强的,只是官方似乎不是很重视这些小技巧? (官方现在都长草了)

  • 彻底自定义CSS。
    不是官方说的在某些位置加入CSS,而是彻底把多说的CSS 放在自己的网站。 其实很简单。就是定义duoshuoQuery.theme= 'none' 即可。
    再说的清楚点就是这样定义duoshuoQuery:
    var duoshuoQuery = { short_name: "YOURKEY", theme:'none'};

这样,多说就不会加载任何 CSS ,变成了一张白纸,自己享受重头定义本地 CSS 的乐趣吧。

  • 让评论加载不在颤抖。
    大家也许都注意到,有时间加载多说的评论会先从没有任何 CSS 样式再切换到有CSS样式。
    原来以为是 CSS 没有及时加载进来。 后来一看官方的 CSS 才知道。 CSS 根本没有定义 .ds-thread(class="ds-thread")而只定义了#ds-thread(id="ds-thread")。
    而多说的机制是找到.ds-thread 并以其做为容器加载评论文章,最后再给这个容器加上id(#ds-thread)。
    奇怪的逻辑~~ 为什么不直接以 ID 操作呢? 多说自己的不自信?
    知道原因了,让评论加载不颤抖也就很简单,把加载评论的 <div class="ds-thread" ...> 提前改成 <div class="ds-thread" id="ds-thread" ...> 就可以了。 或者,你也可以按照彻底定义CSS的办法重新对 .ds-thread 做 CSS定义。

  • pjax 动态加载 评论。
    其实也就是上面的问题的延伸。 在pjax:complete中加载即可。 代码为

    if ($('.ds-thread').length > 0) { if (typeof DUOSHUO !== 'undefined') DUOSHUO.EmbedThread('.ds-thread'); else $.getScript("//static.duoshuo.com/embed.js"); }

完整代码如下:

code$(document).on('pjax:complete', function() { $('#content').fadeTo(700,1);
if ( $('.ds-thread').length > 0 ) {
if (typeof DUOSHUO !== 'undefined') DUOSHUO.EmbedThread('.ds-thread');
else $.getScript("//static.duoshuo.com/embed.js");
}
});
}

--EOF--

[MT Hack]修改模板来完成MT的AJAX提交评论 ,

曾经,本站在MT3时代,曾经写过以AJAX提交评论预览 的帖子。

那个也是通过修改模板+自写js实现,没有对MT的源代码进行任何修改,绿色无污染,不影响升级。

后来,通过自己摸索,也实现了 ajax 方式提交评论。但是一直都没有写出教程,今天有点时间。特意写出分享之。

具体效果见本站评论提交(预览和发表)。

言归正传,要实现 ajax 方式首先要定义一系列 js 函数。 由于 本站已经迁移到了 JQuery 平台,所以在改写 mt.js 需要先加入 JQ 支持,即加入:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

[MT 模板]MT 4.x/5.x 之Search Results 官方默认版本的两处小错误。 ,

This is a SiteLog for syhtcgf.com.
大家都知道, MT 4.x/5.x 的搜索所有返回多页的时候,翻页(仅仅是 PreviousNext 链接)其实是支持 ajax 的,但是实际使用中,翻页结果往往是直接跳出页面,而非ajax获取。

今天抽空看了看 系统模板中的 【Search Results】 模板代码,发现貌似有两处错误,这个应该是导致 ajax 方式经常意外跳出的原因。特意发出来,以供同好者分享。

第一处是 <div id="search-results">...</div> 的反复嵌套,看 js 来看, 是通过给<div id="search-results"></div> 块中插入新内容来更新页面的,但是 ajax 返回的数据居然还有一个 <div id="search-results">? 显然是模板错误,JS返回的模板不应该再用 <div id="search-results"> 块定义。具体抓图如下:
20120220_2.png
知道原因了,解决办法很简单: 删除图中 <mt:SetVarTemplate id="search_results" name="search_results">...</mt:SetVarTemplate>中嵌套的 <div id="search-results"> (图中69行)和 最后一个 </div> (88 行),然后找到 <$mt:Var name="search_results"$>,改成

<div id="search-results"><$mt:Var name="search_results"$></div>


第2处,是 加载完本页后,自动1000 毫秒后获取下一页数据的 js 程序有错,代码为下:
var timer = window.setTimeout("getResults(" + <$mt:CurrentPage$> + ")", 1*1000);

抓图:

20120220_1.png

呃, + <$mt:CurrentPage$> + ,官方真以为 <$mt:CurrentPage$> 是js变量啊。还 + 呢。修改成:

var timer = window.setTimeout("getResults(<$mt:CurrentPage$> )", 1*1000);

修改完后,直接搜索一个返回好多页的文件,略微等待(等待后台获取下一页数据成功),点击 Next, OK ,成功了。
因为每页默认有20个条目返回,所以如果真正的搜素者,当看完这20个的时候,点 Next 的时候,次页数据早以后台传输完成,则直接 通过 js 显示,一般不会出现因为没有数据而跳出成普通模式的问题。

PS: MT 搜索模板的 ajax 机制是载于当前页后, 设定一个定时器,后台获取下一页数据存储于js 数组,当 Next 或者 Previous 的时候,直接从 js 数据中提取,如果提取失败,则会直接跳出,以普通模式向后台获取数据。 所以,只有 PreviousNext 链接 是 ajax 的 。

--EOF--

[SiteLog]简单修改模板实现 MT Ajax方式的"评论预览" ,,

本站的SiteLog,也算是对MT的一个小Hack吧:)

一直觉得 MT 的"评论预览" 不够人性化,这样的东西当然是用 Ajax 方式好一点。网上也有现成的修改成 Ajax 发表评论和进行评论预览的插件,但是简单了看了看,总觉得太烦琐,太复杂,不利于将来的升级和增加服务器的负荷(不是玩笑,本来Ajax方式是减少负荷的,但是根据某个老外的Hack教程做了后,负荷反而增加了 -_-bbb)。
既然 Ajax 没有什么太多的技术含量,而我自己又不是想写个标准,通用的Ajax函数库出来,那么为什么不仅仅自己动手改改模板而来个"轻量级"的 Ajax方式的"评论预览"呢(至于发表评论还是传统模式吧)?
关于 Ajax ,我以前写过一些东西,在这里 http://www.syhtcgf.com/blog/archives/3_50.html。这次修改模板就是以这个为基础的 :P