WordPress的全站Ajax加载(四)完整代码篇(完结)

最近发现小伙伴们对ajax加载比较感兴趣,我之前也写了三篇转门介绍Ajax,自以为已经结束了 写的也比较清楚了。有点懒同学给我提了建议“得把读者都当成小白来看待,不然估计还看不懂”。此文接受建议而出,不过个人还是觉得小伙伴们不要太过把自己当小白,还是要多学会思考总结。本人以前也是小白一个 学的也不是编程。好了 废话不多说 直接进入主题。

这篇部分代码是本人正在使用的代码摘录而出,使用了html5的API来控制历史记录。代码为ajax的核心代码,没有ajax操作时候的一些特效(内容部分会有个简单的半透明渐变处理)。如果你的主题文章部分的DIV是 #content的话 应该可以直接拷过去就用。我说的是应该。

//全局变量
var ajaxBinded = false;
jQuery(document).ready(function() {
//下面三行你可以插入到你的jQuery(document).ready(function()里面,html5的历史记录API
if( history && history.pushState){
//为真就执行Ajaxopt函数
Ajaxopt();
}
})
//Ajaxopt函数
function Ajaxopt(){
//所有不为新窗口打开的链接
$('a[target!=_blank]').live('click',function(event){
var link = event.currentTarget;
var url = link.href;
if ( event.which > 1 || event.metaKey || event.ctrlKey )
return
if ( location.protocol !== link.protocol || location.host !== link.host ){
return;
}
if (link.hash && link.href.replace(link.hash, '') === location.href.replace(location.hash, ''))
return
if (url.indexOf("respond")>0||url.indexOf("/wp-admin/")>0||url.indexOf("wp-login.php")>0||url.indexOf("sitemap.xml")>0)
return
//以上条件语句均为判断链接时候需要ajax加载,下面2句为执行loadDate函数进行ajax操作。
loadData(url,true);
event.preventDefault();
});
}

//loadDate函数
function loadData(url,toPush){
//进行AJAX操作
$.ajax({
url:url,
data: "soz=ajax", //这个可以参考ajax全站加载系列文章第二篇。
dataType: "html",
type: "post",
beforeSend:function(jqXHR, settings){ //加载前操作 #content的DIV变化
$('#content').fadeTo(500,0.3);
}
,
complete:function(){ //加载后操作 #content的DIV变化
$('#content').fadeTo(200,1);
}
,
success:function(message){ //加载成功的操作
var msger = message;
var titl1 = $(message).find("h1:first").text();
var titl2 = $(message).find("h2:first").text();
if (titl1 == "") {
window.document.title = titl2 + " \u2502 SOZ";
}
else {
window.document.title = titl1 + " \u2502 SOZ";
}
//以上几句为组合新页面的标题。下面一句为插入ajax回来的内容到"#content"的DIV容器内。
$("#content").html(msger);
if(toPush){//使用html5的特有API 来改变历史记录数据。
window.history.pushState(null, titl1, url);
}
if(!ajaxBinded){//ajax后重新绑定新加载页面的ajax事件。
ajaxBinded = true;
$(window).bind('popstate', function(e){
loadData(location.href,false);
return false;
});
}
}
,
error: function() {//如果加载失败 报错内容
$("#content").html("

AJAX Error...

");
},
});
}

以上为所有ajax操作的必要步骤,小白同学可以仔细研究。高手可以路过 嗯

From: http://soz.im/wordpress-is-the-stations-ajax-to-load-four-complete-code-articles.html

WordPress的全站Ajax加载(三)改变地址栏

Ajax的优点就是通过局部刷新内容 提高用户体验,但是众所周知的的,ajax后地址栏是不会跟随改变的,URL会一直显示在你第一次进入网站的地址。这样的话 如果用户想分享地址的或者想保存地址的话 就不是当前文章所在的地址。还有返回前进不能使用,这样就造成了很尴尬的局面。这篇文章将介绍2种实现方法,2种各有优缺点。Let’s go~~第一种方法是通过Jquery的一个插件jQuery Address实现的。优点就是兼容低版本的浏览器,缺点呢就是它是通过“#”锚点的方法来改变地址的,如果你直接复制AJAX后带锚点的地址打开的话,浏览器会先加载锚点之前的页面,然后才会执行你写的JS,再通过判断AJAX加载锚点的地址。当然也不能算是个很明显的缺点了。

jQuery Address只有十几K的体积,算是很比较小的插件了。(下载)在AJAX执行之前我们来使用插件做操作地址栏。代码如下

var addresschanged=false;                                                   
$('a[rel="ajax"]').live("click",function(){ 所有rel=ajax的 A链接,
var a=$(this),href=a.attr("href");
_text=a.text();
c=a.attr("title");
if(c==""||c==null)c=_text;
deeplink=href.replace("http://"+location.hostname+"/",""); 设置deeplink
if(deeplink=="")deeplink="!"; 如果deeplink为空或带!
addresschanged=true;
$.address.value(deeplink);
window.document.title=c+;
return false
});
$.address.change(function(event){ 监控地址栏变化
var value=event.value,current=$("#content"),href;
if(value.indexOf("comment")!==1){
if(value=="/"){ 通过几步判断锚点是否需要加载
href=location.href;
}
else {
if(value=="/!"){href="http://"+location.hostname+"";
addresschanged=true
}
else{
href="http://"+location.hostname+""+value+"";
addresschanged=true
}
}
if(addresschanged==true){loadpage(href)} 如果addresschanged为真 执行loadpage函数(loadpage函数就是AJAX加载代码)
}
});

是不是很方便通过锚点变化里进行ajax操作,若是首页地址则变成 http://soz.im/#/! 如果其它页面则变成http://soz.im/#/xxxx.html。想了解更多详细问题可以去 http://www.asual.com/jquery/address/了解。

如果你不想使用jquery插件,并且你只准备到支持html5的浏览器使用的话 可以使用下面的方法。HTML5中引进了2个API:history.pushState, history.replaceState。可以通过pushState和replaceState接口操作浏览器历史,并且改变当前页面的URL。pushState是将指定的URL添加到浏览器历史里,replaceState是将指定的URL替换当前的URL。

var state = {
title: title,
url: options.url,
otherkey: othervalue
};
window.history.pushState(state, document.title, url);

调用方法如上。响应浏览器操作如下

window.addEventListener('popstate', function(e){
if (history.state){
var state = e.state;
//do something(state.url, state.title);
}
}, false);

这样就可以结合ajax和pushState完美的进行无刷新浏览了。

到这里wordpress的全站AJAX加载主要问题已经结束。剩下的应该都是一些根据自己的问题来操作的一些小问题。如果你对JS比较熟悉的话 应该是很简单的问题 当然对我写的这些也会这样认为。想更好的了解这些问题 还是多研究下js和jquery 让你更得心应手。

From: http://soz.im/wordpress-full-ajax-loaded-3-change-of-address-bar.html

WordPress的全站Ajax加载(二)异步加载

上文。通过寥寥几条评论 还是能看出大家比较喜欢这种局部刷新的效果的。今天将带大家进入异步加载的核心部分。另外由于个人不是从事IT相关的工作 有时候比较忙,更新文章不是很勤快,请谅解 呵呵。我也只是上学的时候学过一点C和java后来也无疾而终,这方面的东西也只是爱好。我也只能抽空写点东西,比如上班的时候-,-就是今天。好,不啰嗦 走起。

Ajax其实比较比较泛指,最低层的应该是.ajax(); 基于这个底层方法 JQuery又有多种类型。比如 .load(); .getScprit();  .getJSON(); 等等…想了解的话 可以自己去看API文档。最近单的应该就是.load();方法了。有多简单呢?

$("#contents").load("url #contents");

完了? 对完了。这行代码的意思就是 在页面的#contents DIV内载入地址为URL的页面,并且只取#contents元素内容,其他丢弃。当然只靠这一句代码是完成不了所有动作的,那就需要你的想象力了,请看下面内容:

$('a[target!=_blank]').live('click',function(){                   //所有a链接不为新标签打开的链接 绑定click事件。
var url = $(this).attr("href"); //获取a链接的地址
var title = $(this).attr("title"); //获取新链接的title
$('#contents').fadeTo(500,0.3); //内容部分模糊
#("#contents").load("url #contents",function(){ //开始加载
$('#contents').fadeTo(200,1); //完成后 内容部分重新显示
window.document.title = title; //设置标题
});
})

好了,这样就基本完成基本功能了。以上是使用.load()方法实现的异步加载。是不是很简单,如果你想使用底层的.ajax方法 那就请继续往下看。

在之前一片文章,我们提到过 如果想让ajax彻底不加载head,sidebar,foot等部分 需要传值。当然不加载这部分优缺点都有。优点自然是减少请求数据提高访问速度。缺点就是不执行head部分,你的wordpress插件可能有的地方会失效,还有就是获取不到新页面的关键字 准确的标题等。怎么传值呢?首先你要明白,用户第一次进来的时候 是全部加在的,直到ajax执行了 才不去加载。而搜索引擎是不会去执行你的JS文件的。所以搜索引擎下 就不怕只输出部分内容 影响soe了。 在wordpress中 公用的部分 都是使用  这样来调用的。那么我们可以用下面的方法传值。

另外 get_sidebar(); 和 get_footer(); 也用同样使用上面方法传值。(去掉#号)                                         这样$soz的值就是load。 不等于后面的ajax后 就会加载。这样我们在后面的ajax中 给$soz传值为ajax后。 就不会加载这部分了。详细如下:

$('a[target!=_blank]').live('click',function(){                   //所有a链接不为新标签打开的链接 绑定click事件。
var url = $(this).attr("href"); //获取a链接的地址
var title = $(this).attr("title"); //获取新链接的title
$('#contents').fadeTo(500,0.3);
$.ajax({
url:url,
data: "soz=ajax", //传值
dataType: "html",
type: "post", //使用post方式加载
success:function(message){
var msger = $("message");
window.document.title = ttitle;
$("#content").html(msger);
$('#contents').fadeTo(200,1);
script = jQuery("#afterrun script"); //解决ajax JS运行的问题。
for (var i = 0;i < script.length;i++) eval(jQuery(script[i]).html());
}
,
error: function() {
$("#content").html("AJAX Error...");
} ,
});
})

好了上面代码就是通过底层.ajax方法实现的。和之前的.load方法 差不多。需要注意的就是 js在ajax后 执行的问题。到这里,ajax的核心代码已经完成 。其他动作那就要根据你自己来制定了。不如ajax过程中的动画,啥的小细节。我相信如果你对JQuery比较熟悉的话 应该也是很容易的一件事。

通过上面的方法,你会发现AJAX加载时没什么问题的,但是地址栏的URL是不会改变的。前进后退也不能用。那改怎么解决呢?不要着急,我会在下一篇文章中为大家介绍我使用过的2种方案,欢迎大家来围观。。。

 

From: http://soz.im/wordpress-full-ajax-load-2-asynchronous-loading.html

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

大家好,经过了大约一年 我终于更新文章了-,- 。至于为什么这么久呢 在这里我也就不多了说,我在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

抗战剧雷人台词:爷爷9岁被杀 抗战还最后一年

近日,有网友精选出了众多抗战剧中的雷人台词,悉数过往的徒手撕鬼子,搜集这些台词的网友们想必也是经历了一番苦痛的挣扎才硬生生将这些台词给扣下来的,看完以后小编真的一个劲儿的在质疑自己的智商,还有网友更是直言不讳道:“这都是什么鬼!编剧我要炸烂你!”

From:http://mil.firefox.news.cn/15/0327/15/8Y9QL0WGFTKDVCBP.html

wordpress显示评论者来自哪个城市

实现的原理是利用新浪和淘宝的IP查询接口,返回IP所属城市

小修了下代码,去掉了挂载点,直接在显示评论时调用函数

将以下函数放到你的functions.php 中

/**
* 使用api获取城市
* @param string $ip
* @return string|mixed
*/
function wpgo_get_city($ip = null) {
$ip = $ip == null ? wpgo_get_ip() : $ip;
$ipApi = array (
'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=json&ip=',
'http://ip.taobao.com/service/getIpInfo.php?ip='
);

foreach ( $ipApi as $k=> $api ) {
$res = wp_remote_get ( $api . $ip );
if ( is_object ( $res ) && $k == 0 ) {
continue;
}
if (! empty ( $res ['body'] )) {
$return = json_decode ( $res ['body'], true );
if (! empty ( $return ['city'] )) {
return $return ['city'];
} elseif( $return ['province'] == '香港' || $return ['province'] == '澳门') {
return $return ['province'];
} else {
return $return ['country'];
}
}
}
return false;
}

/**
* 获取当前用户ip
* @return string
*/
function wpgo_get_ip() {
if ( getenv ( "HTTP_CLIENT_IP" ) && strcasecmp ( getenv ( "HTTP_CLIENT_IP" ), "unknown" ) ) {
$ip = getenv ( "HTTP_CLIENT_IP" );
} elseif (getenv ( "HTTP_X_FORWARDED_FOR" ) && strcasecmp ( getenv ( "HTTP_X_FORWARDED_FOR" ), "unknown" )) {
$ip = getenv ( "HTTP_X_FORWARDED_FOR" );
} elseif (getenv ( "REMOTE_ADDR" ) && strcasecmp ( getenv ( "REMOTE_ADDR" ), "unknown" )) {
$ip = getenv ( "REMOTE_ADDR" );
} elseif (isset ( $_SERVER ['REMOTE_ADDR'] ) && $_SERVER ['REMOTE_ADDR'] && strcasecmp ( $_SERVER ['REMOTE_ADDR'], "unknown" )) {
$ip = $_SERVER ['REMOTE_ADDR'];
}
if ($_SERVER ['REMOTE_ADDR'] == '127.0.0.1' && $ip == 'unknown') {
$ip = 'localhost';
}
return $ip;
}

最重要的一段:最后在你的模板输出评论之前,获取城市字段,下面是引用我模板里的代码,你只能参考判断方式,具体怎么修改得根据你的模板来修改

// 如果是管理员回复
if ( $is_admin ) {
$city = '来自管理员的回复';
} else {
// 兼容以前还没有城市字段的评论
$city = get_comment_meta( $comment->comment_ID, 'city_name', true );
if( !$city ) {
$city = wpgo_get_city ( $comment->comment_author_IP );
// 如果api可以正常获取到城市信息,则插入数据库
if ( $city ) {
update_comment_meta( $comment->comment_ID, 'city_name', $city );
} else {
// 如果因为异常获取不到api的信息,返回自定义字符串,留着下次读取评论时再重新获取
$city = '火星';
}
}
$city = "来自{$city}的网友";
}

From Cuelog

手机网站之触屏焦点图插件:owlcarousel

公司建立手机网站,老潘参与了静态页面的切图以及一些简单的特效制作,在制作过程中,遇到了一个问题,手机网站上触摸并且响应式的焦点图,百般google才找到这个完美的东西owlcarousel

demo请移步:http://www.owlgraphic.com/owlcarousel/

引用方法:




$(document).ready(function() {

 $(“#owl-example”).owlCarousel();

});
调用

Via:http://leapsoul.com/mobile-touchscreen-focus-plug-in/