WordPress的全站Ajax加载(一)扯独自

JS or jQuery, 转自点点 9 年前 回复

, , ,

大家好,经过了大约一年 我终于更新文章了-,- 。至于为什么这么久呢 在这里我也就不多了说,我在about也没也简单介绍过了。今天不是来扯独自的(雾)~。从这篇文章开始我就将分多次向大家介绍全站Ajax的实现。高手请绕行,菜鸟估计也会有点晕,我也尽量从我这个菜鸟角度出发,说的通俗易懂。说道Ajax,也许大家不是很陌生,最常见的应该 就是评论Ajax提交了。如果你还想直观点的了解,你可以点击我的站内随便的链接。(注:你的浏览器支持html5)你会发现head,sidebar,foot部分都不会刷新,只刷新了文章部分。而且地址栏也会做出相应改变,可以使用前进后退按钮。不要被备注迷惑,不是支持Html5的浏览器才能Ajax的。Ajax有什么好处么?当然就如你看到的只加载你需要的部分,提高了网页的用户体验。减少了加载数据。当然也存在缺点,不会改变URL,当然也就不能使用前进后退。对搜索引擎不友好,如果你ajax请求的页面是不存在真实地址的话,就不会被索引到。接下来我会通过其他方式了弥补缺点发扬优点..在Wordpress上合理使用Ajax。

上面说过对搜索引擎的问题,所以这里我们Ajax加载将会采用加载真实地址,不会通过后台函数输出想要的内容。这样搜索引擎会访问到真实的地址,而用户则会ajax加载需要的内容。还有个问题就是ajax真实地址后我们加载的数据跟直接访问会一样 再次加载了不需要的内容。当然我们可以从过在AJax后删除不需要的内容,这些内容也仅仅是Html代码 还不回被真正执行。当时PHP后台还是会浪费资源输出这些。要想真正放弃加载需要内容之外的东西。这里会做个判断,当用户第一次进入网页 会加载head,sidebar,foot。当点击站内链接后。会在加载之前给这几个不需要加载的部分传值。让这些内容不输出。而搜索引擎是不会执行JS代码的,会正常访问页面。

另外个问题就是Ajax后,地址栏变化的问题。我们可以通过Jquery的history插件,或者使用html5自带的API:history.pushState和history.replaceState来实现。这个会在后面为大家详细介绍。

当然AJax的关键代码页很少,内容如下:

$.ajax({
url: ajaxUrl,
type: 'get-or-post',
error: function() {
//抛出错误
},
success: function() {
//抛出完成代码
}

但是比较繁琐的问题是之后的一些问题。这篇文章只是一个预热,我会在接下来的几篇文章为大家一一详细介绍。欢迎有兴趣的朋友围观,说的不好也别拍砖=。=

From:http://soz.im/wordpress-full-ajax-loading-1-alone.html

支付宝打赏微信打赏

如果此文对你有帮助,欢迎打赏作者。

发表评论

欢迎回来 (打开)

(必填)