标签/Tag为[Ajax]的文章

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

曾经，本站在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>

This is a SiteLog for Easun.org.
大家都知道， MT 4.x/5.x 的搜索所有返回多页的时候，翻页（仅仅是 Previous 和 Next 链接）其实是支持 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"> 块定义。具体抓图如下：

知道原因了，解决办法很简单： 删除图中 <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>

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

呃， + <$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 数据中提取，如果提取失败，则会直接跳出，以普通模式向后台获取数据。 所以，只有 Previous 和 Next 链接 是 ajax 的 。

本站的SiteLog，也算是对MT的一个小Hack吧：）

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

Ajax现在很热门。 废话我不太会说，简单来个例子
保存为HTML就是了。