本这第四部分是用来记录文章主体模板single.php的,但昨夜搞了我几个小时去弄这个全站ajax,今天回来再参考了一些资料,终于把页面加载的ajax给做出来了,就不得不在此做一下备忘。首先上个月16号,也就是7月16日时发布了一篇关于全站ajax的文章,链接在这里:http://www.inlojv.com/ajax-loaded-question.html
上面这篇文章其实已经算是实现页面ajax加载了,但是还有一个关键的细节没有完成,就是所谓的浏览器后退/前进事件。

ajax加载一个新的页面后,如果点击浏览器的后退按钮,你会发现它没法后退,或者后退了但地址栏的url不会变化。就是这个问题花费了俺一个晚上的时间,毕竟本人完全没有javascript和jQuery基础,不过貌似这些代码基本的语法与一般的程序语言相差不大,于是参考了几个ajax站的代码之后结合一些逻辑才弄出了自己的版本。代码如下(因为仅是备忘,所以加密处理):

注意:需要jQuery库的支持,最佳版本为:1.8.3 。
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('9 B="#z a,#F a, #7 .g-I-X a, #7 .g-O a,#7 .g-L-Y a,#7 .g-Z-W a,#7 .g-11 a";9 E=\'<8 5="n"></8><8 j="页面正在加载中..." 5="o"><8></8></8>\';9 q="#F";$(p).U(3(){H()});3 t(5){5=T(5)?$(\'#\'+5).10().R:5;$("C,P").K({J:5},M);i 6}3 k(2,D){4(f&&f.x){4(D!==h){f.x(N,p.j,2)}}l{4(2.w(\'#\')==0){i 6}c=h;y.b.v=\'!\'+2}$.Q({2:2,S:\'16\',1i:6,1h:3(){$(E).12(\'C\')},1e:1f,1k:3(){$(\'#n,#o\').r();b.m=2},1m:3(u){s=$(u).1l(q);$(q).r();$("#z").G(s);$("#7").G(s);p.j=$(u).1d("j").14();9 d=2.w(\'#\');4(d==-1){t(0)}l{d=2.13(d+1);t(d)}},18:3(){$(\'#n,#o\').r()}})}3 H(){$(B).19("1g",3(){9 2=$(1a).1b(\'m\');k(2);i 6})}4(f&&f.x){c=h;$(y).A(\'17\',3(e){4(e.15.1c&&c){c=6;i 6}4(b.v==\'\'){k(b.m,h)}})}l{$(y).A(\'1j\',3(){4(c===6){9 2=b.v;4(2.w(\'#!\')!=-1){2=2.V(/^#!/,\'\')}l 4(2==\'#\'||2==\'\'){2=b.m}k(2)}c=6})}',62,85,'||url|function|if|id|false|right|div|var||location|ajx_loading|anchor||history|jv|true|return|title|inlojv_ajax_load|else|href|inlojv_ajax_loading_frame|inlojv_ajax_loading|document|ajax_content|remove|result|body_am|data|hash|indexOf|pushState|window|left|on|ajax_a|body|state|ajax_load_div|middle|before|ajax_loadPage_Init|post|scrollTop|animate|tags|500|null|tab|html|ajax|top|dataType|isNaN|ready|replace|comment|items|wrap|new|offset|cat|appendTo|substring|text|originalEvent|HTML|popstate|complete|live|this|attr|cancelable|filter|timeout|15000|click|beforeSend|cache|hashchange|error|find|success'.split('|'),0,{}))

首先定义一些必要的变量,然后是处理ajax加载过程,这个过程就要使用html5里新引入的API,即:history.pushState ,处理加载写为一个函数,供点击事件函数来调用,点击——加载——完成——处理前进后退事件。

其中有一个body_top函数作为返回顶部的处理,上面的代码是放在加载完成之后,也就是说加载完毕才会出现返回顶部的动作,可以把body_top函数放在ajax处理过程之后,这样在加载以及页面滚动返回顶部会同时进行。本站的效果属于前者,后者的效果可以参考这个站点:http://theme.ironow.com/

2014-08-05_ajax