ajax后退操作解决办法

作者:Matrix 发布时间:2017年9月19日星期二 分类:

使用github项目

https://github.com/browserstate/history.js

问题场景

移动端网页列表(上拉加载执行ajax请求)中要在点击item详情页跳转后可返回,且返回页面中需要看到或定位到点击的来源位置。

测试

要实现准确定位,刚开始想的基本原理也就是俩页面之间跳转传递分页数和滚动条位置的数量,想过sessionstorage对象来存储或是用url中hash值、query参数来传递相关状态,列表页面中进行判断请求数据且修改ajax加载的分页起始数,但是url中的参数需要和后台进行协调才可以达到满意的效果,实现起来也麻烦。搜索找到好多方案 貌似history.js兼容各大浏览器,效果应该比较理想。

JQ后加载History的js文件:/history.js/scripts/bundled/html4+html5/jquery.history.js

测试分页使用scrollPagination的JQ插件实现翻页:

var urlscroll   = '';
var p = 1;

//获取缓存数据
//dom数据以及分页起始数
var dom = !!History.getState().data.dom?History.getState().data.dom:'';
var page = !!History.getState().data.p?History.getState().data.p:p;
p = page;
$(".test_list").append(dom);//追加缓存的dom
//end

$('.test_list').scrollPagination({
    'contentPage': urlscroll, // the url you are fetching the results
    'contentData': {'page':p}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
    'scrollTarget': $(window), // who gonna scroll? in this example, the full window
    'heightOffset': 0, // it gonna request when scroll is 10 pixels before the page ends
    'bottomHeight': $('.footer').height(), // it gonna request when scroll is 10 pixels before the page ends
    'beforeLoad': function(){ // before load function, you can display a preloader div
        //$('#loading-pic').show();
        this.flagRequesting = 0;
    },
    'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements

    //记录分页的dom数据
        for (var i = 0; i < elementsLoaded.length; i++) {
            dom += $(elementsLoaded[i]).html();
        }
        if(!!dom) History.pushState({'dom':dom,'p':this.contentData.page+1});//记录最后一次分页加载的dom数据以及下一页的起始数
        //end

        this.contentData.page++; 
         $(".test_list").append('<img src="/mobile/img/ads.jpg" class="ads_img">');

        }
    this.flagRequesting = 1;
    }
});

上面代码仅测试,需自行修改。
主要起作用的位置是 记录分页的dom数据获取缓存数据 两处注释块。
道理还是那样,只是更优化了些。这里缓存了所有ajax分页的DOM数据和请求的最后的页码,当返回到列表页面的时候获取缓存DOM并加载,起始的分页数也会还原。
history.js内部也是使用sessionstorage来缓存相关数据,所以设置state数据的时候需要将DOM对象转换为String字符串数据就可以缓存整个分页数据。
实际使用中会发现个别时候item详情页面中执行history.go(-1)或者点击A标签链接返回到列表页面的时候缓存的分页DOM数据可以正常的显示,但是滚动条定位就没达到想要的效果,所以要完美应该在获取缓存数据的时候添加一个scrollTop滚动条的复位操作,这样应该就巴适了。

嗯~~今天遇到的这个问题还好解决了,感谢开源奉献的人们。

peace~

参考:
http://www.cnblogs.com/songbyjson/p/4886615.html

五种解决方案:http://www.cnblogs.com/snandy/archive/2011/09/18/2180102.html

博客标题下面的ajax加载一句话

作者:Matrix 发布时间:2015年1月12日星期一 分类:wordpress建站 兼容并蓄

博客LOGO下面的一句话功能是照搬philna2主题弄的,点击一下就更新一句话的内容,是很久前的弄的小功能,现在回忆一下简单步骤。给需要的一位童鞋。

1.在WordPress主题的functions.php中添加代码

  1. function HHTJimSay(){
  2.     $Sentence =
  3.     '
  4.     11111
  5.     22222
  6.     33333
  7.     44444
  8.     ';
  9.     $words = explode("\n"$Sentence);
  10.     $word = $words[ mt_rand(1, count($words) - 2) ];
  11.     echo $word;
  12. }
  13. function _exitajax(){
  14. exit();
  15. }
  16. function Is_AjaxURL() {
  17.     if((isset($_GET['do']) && $_GET['do'] == 'ajax') ) {
  18.         return true;
  19.     }else{
  20.         return false;
  21.     }
  22. }
  23. /**
  24.  * 通过USER_Agent判断是否为机器人.
  25.  */
  26. function is_bot(){
  27.     $bots = array('Google Bot1' => 'googlebot', 'Google Bot2' => 'google', 'MSN' => 'msnbot', 'Alex' => 'ia_archiver', 'Lycos' => 'lycos', 'Ask Jeeves' => 'jeeves', 'Altavista' => 'scooter', 'AllTheWeb' => 'fast-webcrawler', 'Inktomi' => 'slurp@inktomi', 'Turnitin.com' => 'turnitinbot', 'Technorati' => 'technorati', 'Yahoo' => 'yahoo', 'Findexa' => 'findexa', 'NextLinks' => 'findlinks', 'Gais' => 'gaisbo', 'WiseNut' => 'zyborg', 'WhoisSource' => 'surveybot', 'Bloglines' => 'bloglines', 'BlogSearch' => 'blogsearch', 'PubSub' => 'pubsub', 'Syndic8' => 'syndic8', 'RadioUserland' => 'userland', 'Gigabot' => 'gigabot', 'Become.com' => 'become.com','Bot'=>'bot','Spider'=>'spider','yinheli_for_test'=>'dFirefox');
  28.     $useragent = $_SERVER['HTTP_USER_AGENT'];
  29.     foreach ($bots as $name => $lookfor) {
  30.         if (stristr($useragent$lookfor) !== false) {
  31.             return true;
  32.             break;
  33.         }
  34.     }
  35. }
  36. if(Is_AjaxURL() && !is_bot()){//存在_GET且不是机器
  37. add_action('Ready','HHTJimSay');
  38. add_action('Ready', '_exitAjax', 9999);
  39. }
  40. do_action( 'Ready');

说明:
用于ajax后台提取一句话函数
4-7行处自己添加需要显示的一句话

2.在header.php中,加载完jq之后的位置添加js代码

  1. var blogURL="https://www.hhtjim.com";//网站域名  
  2. $(function(){  
  3.     function o(v){  
  4.         url=v.u?v.u:blogURL+"?do=ajax";  
  5.         if(v.fn){  
  6.             var nowTime = new Date().getTime();  
  7.             url+="&action="+v.fn+"&t="+nowTime  
  8.         }  
  9.         type=v.m?v.m:"GET";  
  10.         data=v.d?v.d:null;  
  11.         dataType=v.dt?v.dt:"html";  
  12.         beforeSend=v.b?v.b:null;  
  13.         error=v.e?v.e:function(){  
  14.             alert(lang.commonError);  
  15.             document.body.style.cursor="auto"  
  16.         };  
  17.         success=v.s?v.s:function(w){  
  18.             alert(w)  
  19.         };  
  20.         $.ajax({  
  21.             url:url,type:type,data:data,dataType:dataType,beforeSend:beforeSend,error:error,success:success  
  22.         })  
  23.     }  
  24.   
  25.     function u(){  
  26.         var v=false;  
  27.         var x=document.getElementById('HHTJimSay') ? $("#HHTJimSay") : $("#HHTJimSay_s") ;  
  28.         var w="loading";  
  29.         x.click(function(){  
  30.             if(v){  
  31.                 return false  
  32.             }  
  33.             var z=function(){  
  34.                 x.hide(0,function(){  
  35.                     x.attr('title','').html("").addClass(w).show();//0秒后出现漏斗  
  36.                   
  37.                 });  
  38.                 v=true  
  39.             };  
  40.             var y=function(){  
  41.                 x.html(lang.commonError);  
  42.                 x.removeClass(w);  
  43.                 v=false  
  44.             };  
  45.             var A=function(B){  
  46.                 setTimeout(function(){  
  47.                     x.hide(0);  
  48.                     x.attr('title','点击这里获取更新').html(B).removeClass(w).fadeIn("slow"); //show(300)改fadeIn("slow") 淡入  
  49.                     v=false  
  50.                 }  
  51.                 ,3000)//3000 漏斗出现时间  
  52.             };  
  53.             o({  
  54.                 b:z,e:y,s:A,fn:"HHTJimSay"  
  55.             });  
  56.             return false  
  57.         })  
  58.     }  
  59.     u();  
  60.     function n(){  
  61.         var w=$("#welcome_msg");  
  62.         var v=$("#profile");  
  63.         var m=$("#author");  
  64.         $("#edit_profile").toggle(function(){  
  65.             w.slideUp(200);  
  66.             v.slideDown(200);  
  67.             m.select();  
  68.             return false  
  69.         }  
  70.         ,function(){  
  71.             w.slideDown(200);  
  72.             v.slideUp(200);  
  73.             return false  
  74.         })  
  75.     }  
  76.     n();  
  77. });  

说明:修改第一行的网站域名

3.在header.php处需要显示的位置添加代码

  1. <span id="HHTJimSay_s" title="点击这里获取更新" style="white-space: nowrap;" class="description"><?php HHTJimSay(); ?></span>

4.在style.css中添加样式代码

  1. #HHTJimSay_s{background:url('data:image/gif;base64,R0lGODlhEAAQALMJALvM7rDE6aW86UV10leF2WWM2cXj/zNmzP///////wAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAAAJACwAAAAAEAAQAAAENDDJCUoBM+tyTtGTMAgJ50mGNhxDUl2JIWciCaZgru/avPs+XZBHLOJuvSFKeQwec8oiKAIAIfkECQAACQAsAAAAABAAEAAABDcwyZlCoJiGc26WhrR1QEEAlKGKV8ERWIi5R/FhZYHefLLyv99N2CsaZRkkiLhU+iZCZ0xqxEQAACH5BAkAAAkALAAAAAAQABAAAAQ2MMlJq5XG3KlxF4NAZR01HENVUqC4vbAEFAWQZG9xHMW9VjpeLDGrDS8/jgq3/JWYNxj0eIkAACH5BAkAAAkALAAAAAAQABAAAAQ0MMlJq5XG3KlxT58XitXIbWhaBYGHBsfRZm/cqgmrAkUBlJZCrEDJjIQHAtDFI/w2NFwqAgAh+QQJAAAJACwAAAAAEAAQAAAENDDJSauVxtypcU+fF4rVyG1oimYpC5qUq84qLAxCzAJFASSDw6AkKRwOhcQtdzEiZzyfJQIAIfkECQAACQAsAAAAABAAEAAABDUwyUmrlcbcqXFPnxeK1chtaIpmKQualKtaQFEAc3EchTUSu14gQJoACLfAjghCKQ9M1fASAQAh+QQJAAAJACwAAAAAEAAQAAAENTDJSauVxtypcU+fF4rVyG2oBBQFkErFcRRolsRzra3t61+CgeAyGhwGlkwoOAR9TBTbDxUBACH5BAUAAAkALAAAAAAQABAAAAQ4MMlJq5XGXAlIAUk2aRRxHEWVkVJxpmoFFN82BYFNBWe+ibyD7yJK4HRIJCtGWVmczRFr+aQmLREAOw==') no-repeat 10000px 10000px;cursor:pointer;}
  2. #HHTJimSay_s.loading{cursor:default;display:none;background-position:center center;width:18px;height:16px;}

IE浏览器Ajax请求时304错误

作者:Matrix 发布时间:2014年4月24日星期四 分类:wordpress建站

博客LOGO下面的一句话功能是按照philna2主题弄的,点击一下就更新内容。但是每次用IE浏览器点击获取都会停留在固定的一句话,F12之后才看到是304错误。客户端代码用的jq ajax()方法,理论上是支持各种浏览器的。

今天终于解决这个问题,都是狗日的IE浏览器缓存搞的。

原因:

IE浏览器ajax时会缓存之前get请求过的URL内容,如果下次还请求那个URL就从本地缓存中取出,之后也就会停止ajax请求。所以会失败,总是停留在一个请求内容里。

解决:

请求的URL地址中加上动态值,比如UNIX时间戳。

像这样的地址  http://127.0.0.1?do=ajax&t=这里为UNIX时间戳

UNIX时间戳每秒都在变化,每次请求地址的URL都不一样,IE也就缓存不到。

js代码参考:

var nowTime = new Date().getTime();

参考:

http://blog.csdn.net/puncha/article/details/17962623

ajax跨域请求json数据

作者:Matrix 发布时间:2014年3月13日星期四 分类: 零零星星

ajax
刚开始仅仅想获取一个他域的json数据,没想到牵扯到很多的问题。
每次都请求失败:
chrome面板的status为(canceled)

在Request Header这里显示CAUTION Provisional headers are shown

CAUTION Provisional headers are shown

 

后来才知道是ajax跨域问题导致:

也就是ajax同源策略(同源是指域名,协议,端口相同)。
跨域可以实现在自己的网站之间传递数据。但是如果你想用“跨域”盗取其它网站的数据,那还是放弃吧。除非目标网站有给你提供jsonp的接口,或者有某些可以利用的漏洞,要不然真没什么办法实现。
跨域问题的产生,最主要原因是COOKIE的安全问题。因为COOKIE是属于一个域的,如果允许跨域,客户端浏览器上储存的COOKIE就可以被它的所有者之外的程序访问到。举个例子吧,假如没有跨域问题,我现在就可以给百度发送个HTTP请求,获取你在百度上登录的用户名。或者获取SessionID,直接冒充你的帐号登录。为了避免这些问题,所以跨域访问的限制是非常有必要的。

利用jsonp跨域

要跨域必须要有回调函数的接口,这里用jsonp试试 阅读剩余部分 »