博主请帮忙。我按照你说的怎么不行？完全没有AJAX效果我用的主题是tweetsheep请博主指点！！写出详细的教程吧。。。......
哈哈,这个效果值得提倡的呢......
新作的这个可以：http://www.ll19.com/19_wavecircle.html......
希望能找一个 调用时形如 http://xxx.com/player.swf?mp3=MP3地址&lrc=歌词地址 ......
您好:請問 FlashVars=u=*.xml是否可以直接以參數加載,比方說FlashVars=u=auto=yes&......
我不小心再输入邮件地址的时候按下了回车……于是就不小心提交了一个空回复…… 郁闷初到你的博客就这么糗……很喜欢这个播放器~另......
播放器好，歌也不错~......
很高深，看不明白。能不能再仔细一点？......
博主的博客基本上都是ajsx，效果好炫的呀，以后经常过来学习学习。......
很棒。非常棒。来偷经的。加个友链吧。......
修改以前监听，可能会比较好吧，如果锚点有加载过就显示历史记录，没有加载过就执行AJAX加载。这样会更好啊，再有，那个顶部的flas......浏览AJAX历史记录的三种方法
浏览AJAX历史记录的三种方法：jQuery插件+隐藏iframe+hash（锚点）参数
以前觉得AJAX更新后想激活浏览器的“前进~后退”按钮再浏览历史记录应该不好实现，所以一直没关注这方面的东西，前几天一哥们问起才想把这块搞搞，其实代码很简单，主要是实现思路，这里提供的例子里用了三种实现方法。
jQuery插件+隐藏iframe+hash（锚点）参数三种浏览AJAX历史记录实例下载
NEW~再提供一个例子，结合了锚点、iframe等方法，在各种浏览器下测试通过。
新提供的例子中预留了nowHashHaveChange函数做每次用户点击前进后退后进行其他操作的扩展：
1 2 3 | function nowHashHaveChange() { // alert("nowHashHaveChange"); } |
对于我的站点一开始的读取锚点内容，需要你每次页面加载成功之后判断有无锚点，有的话就读取锚对应的内容，这部分需求不同进行的操作也不同需要自己根据自己站点的情况做修改，故不提供这部分相关内容。
以下是使用iframe方式具体思路，这是我找到的第一种实现思路：（以下一段照抄网络搜索内容 – 。-）
iframe内容改变可以激活控制栏的前进后退按钮，用户点击了浏览器上的“前进/后退”功能按纽时，父页面不发生化，但会改变iframe的URL，在iframe所链接的页面中，每次重新读取页面都会导致运行一段javascript程序，程序的功能根据当前URL中的参数去调用父页面的一个用于记取历史的方法，方法的功能就是根据iframe中传递过来的参数去返回用来记录页面信息的数组中相应的历史页面信息。
具体代码，首先页面中要有一个iframe：
1 | <iframe id="ajax_history_iframe" height="0px" frameborder="no" scrolling="no" src="ajaxhistory.php?historyID=0"></iframe> |
之后建立一个队列用来存储每次AJAX更新的内容，比如我每次都要更新：
1 | <div id="for_ajax_history"></div> |
这个DIV中的内容，则写一段JS先把第一次页面打开的内容存储进去：
1 2 3 4 5 | var ajax_list = new Array(); window.onload = function() { //第一次打开需要以后用AJAX更新的内容先存入ajax_list中 ajax_list.push(document.getElementById("for_ajax_history").innerHTML); } |
之后我们执行AJAX，得到需要更新的数据，先不要去替换页面的内容，先把这部分数据存储到ajax_list中：
1 2 | //ajax_callback就类似于AJAX成功后得到的数据内容 先存入array中 ajax_list.push(ajax_callback); |
然后更改iframe的地址：
1 | document.getElementById('ajax_history_iframe').src="ajaxhistory.php?historyID="+(ajax_list.length-1); |
iframe访问ajaxhistory.php，ajaxhistory.php具体只有几句代码：
1 2 3 4 | <?php $historyID=$_GET["historyID"];?> <script type="text/javascript"> parent.ajax_gethistory(<?php echo $historyID; ?>); </script> |
就是调用父页面ajax_gethistory函数：
1 2 3 4 5 6 7 8 9 | //判断是否是第一次 第一次访问iframe回调不执行ajax_gethistory 可以防止很多异常错误发生 var ifFirst = true; function ajax_gethistory(id) { if (!ifFirst && ajax_list[id] != null) { document.getElementById("for_ajax_history").innerHTML = ajax_list[id]; } ifFirst = false; } |
意思就是说把刚刚AJAX得到的并且存入队列内容付给应该更新的这个for_ajax_history的DIV，PHP文件相当简单，就是根据传过来的ID输出这段JS，你可以随意改变成其他类型的文件（例如html或java）。
此时就完成了AJAX的更新，并且激活了导航栏的“前进后退”，之后你再点击前进后退就会改变iframe从而每次都调用父页面的ajax_gethistory来浏览历史内容。
只是ARRAY添加的越多是否会对客户端的性能造成影响？（也许只是感觉是这样而已，毕竟就算你打开一百个页面的内容也到不了几兆），iframe的方法在GOOGLE和APPALE的浏览器下会有问题，iframe不会激活GOOGLE和APPALE的前进后退按钮，所以有了以下的锚点法。
锚点法是根据浏览器的锚点(hash)改变，加载数据。用设置监听的方法来判断每次前进后退按钮的事件，相应的内容看实例吧。
各种浏览器的改变锚点、改变iframe对导航栏前进后退的操作不尽相同，判断起来很纠结，如果你要自己写一个比较完善的代码，建议把锚点法和iframe整合在一起使用（可以参考我上面新提供的那个例子，整合了锚点和iframe方法的历史记录浏览）。
至于如果你用JQUERY，很好~有相关插件可用，具体使用请看例子。
61 Responses to “ 浏览AJAX历史记录的三种方法 ”
-
MCOOO 说： ( Has commented 45 times in LL19.com )
@19.:博主我想请教下，如何让FLASH输出的连接也可实现AJAX,即是改变某个设置好的锚点就会加载内容！
| 回复并邮件-
-
-
你AJAX操作其实就是点击链接执行JS，FLASH点击之后也是调用JS，你以前怎么结合的JS现在就怎么结合，怎么又说到调用我的JS？你不是已经实现了全AJAX了吗，你以前怎么实现的FLASH就怎么用。
你一个问题总是来来回回的问。而且别人的耐心和时间也是有限的。
| 回复并邮件-
-
你还是没搞清楚原理吗，你现在全站已经AJAX化了，你在点击链接的时候不是执行打开链接的操作了，是执行的ajax_19的相关内容，就是执行的JS函数。
你现在想点击FLASH也执行AJAX，就不能用FLASH执行打开链接的操作了，而是直接调用JS函数啊。点击FLASH直接执行ajax_19的相关内容，比如在FLASH先获取好相关参数，点击FLASH的时候执行：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
function flashCall(_href, _title, hash, mao) { var option = { url : _href, data : "ajax=yes", dataType : "html", type : "post", success : function(content) { if (site == "blogReadMore") { y = (y == "" || y == null) ? (-(mouse.mousePos.y)) + 30 : y; // alert (y); ajax_main_19.set_19_Ajax(content, _title, _href, hash, mao, "", y); } else { ajax_main_19.set_19_Ajax(content, _title, _href, hash, mao, divID); if (site == "i") { } else if (site == "bb") { } } }, error : function() { if (site == "blogReadMore") { jQuery(_target) .html("\u52a0\u8f7d\u9519\u8bef\uff0c\u8bf7\u91cd\u8bd5\u3002"); closeLoading(); } else { ajax_main_19.set_19_Ajax("<h2>AJAX Error...</h2><p><a href=\"" + _href + "\">" + _href + "</a></p>", "Ajax error", _href, hash + "/error", "", divID); if (site == "i") { } else if (site == "bb") { } } } }; ajax_main_19.showFloatBoxBg(); if (site != "blogReadMore") { // ajax_main_19.jquerymove("", "fast"); ajax_main_19.showAjaxTooltips(_href); } ajax_main_19.commonly_ajax_handle("", option); }
就是除去你前面那些删除链接之类的操作而已，你那个FLASH必须修改，而且我感觉你基本仅用FLASH播放一张图片确实多此一举。
| 回复并邮件
-
-
-
-
-
-
博主：我又来麻烦你了，现在只有搜索这栏没能实现ajax,似乎你的用到JQ插件的，我想如像你那样我弄不来的，有其它的方法吗？即是可以不用JQ插件的做法。
| 回复并邮件 -
大湿啊，不知WP可不可以做得像上面那网站的效果，在他的js里面有个core/functions/get_entry.php的链接，不知他是如何做这个用什么方法past文章的！在他的js里ID又如何用的？
| 回复并邮件-
你提供的站那部分就是自己写了一个PHP来读取文章，锚点值就是ID值，那个
1 2 3 4 5 6 7 8 9 10 11
$.ajax({ type: "POST", url: "core/functions/get_entry.php", data: "id="+id, success: function(data){ $("#load-content").show(); $('html').animate({scrollTop:0}, 200); jQuery.latestLoad = id; jQuery.contentInsert(data); } });
就是最基本的Jquery封装的AJAX调用方法，就是一个基本的AJAX应用(传入ID，读取相关内容，显示。)。
还有 – - ，你为什么如此执着AJAX……全站AJAX其实并没有什么质的改变，
| 回复并邮件-
@19.:呵呵，我太菜了，对AJAX也不是太执着，只是不断折腾自己想实现的东西，可惜自己能力有限– –，博主不要见怪啊，你说得对全站AJAX其实也没有什么的改变，但总想实现自己的某些想法和某些效果。现在做到一半了，又不想放弃才没有办法的，不知博主可不可以写一个PHP来读取WP的文章，就是这个get_entry.php，如果WP可以实现，那么我想直接可以用他的JS来实现全站AJAX了就少折腾很多东西了，还有我发现他的AJAX比你的19_ajax运行得很快啊，不知这是不是效率的问题，我不懂的只是觉着，另外我上次问到的FLV播放器现在http://mcooo.com/flash-flv.html
我发现这两个实用的 Flash 视频播放器，它们也是传参数的，个人觉得很不错的。| 回复并邮件-
直接得到文章内容，类似于：
1 2 3 4 5 6 7 8 9 10 11 12 13
<?php require_once ("../wp-config.php"); $p_id = isset ($_REQUEST["p"]) ? $_REQUEST["p"] : ""; $query = "p=". $p_id; //或者可以更改成传入其它参数 $recentPosts = new WP_Query(); $recentPosts->query($query); while ($recentPosts->have_posts()) : $recentPosts->the_post(); //the_excerpt(); //摘要 the_content(); //内容 endwhile; ?>
之后你就可以做AJAX相关操作了，测试页http://www.ll19.com/up/getPost.php?p=187，你可以更改p后面的id测试一下，当然有的id没有对应文章啊。
至于播放器什么的没有时间去改，也没什么改的乐趣了，除非有很好的想法。
| 回复并邮件-
多谢你上次的帮忙，我的AJAX效果可以实现了，不过只是模仿用那个站的，另再给个站点，
http://www.revolvercreative.com/
这个站点是全flash的，但却是用WP的，很好很强大！它的播放器很好！| 回复并邮件-
不过我还有点不明，用你的$glll = $_POST["glll"]; if ($glll != “ajax”)如果地址不正确的话，就一直在加载，不会返回404啊！用上面这个此 ..query($query);..也不会？？？
》我点了回复并邮件的话，不知什么原因留言就不成功了？
| 回复并邮件-
没有文章就加个判断，就和我们single和index页一样啊：
1 2 3 4 5 6 7 8 9 10 11 12 13 14
require_once ("../wp-config.php"); $p_id = isset ($_REQUEST["p"]) ? $_REQUEST["p"] : ""; $query = "p=". $p_id; //或者可以更改成传入其它参数 $recentPosts = new WP_Query(); $recentPosts->query($query); if ($recentPosts->have_posts()) : while ($recentPosts->have_posts()) : $recentPosts->the_post(); //the_excerpt(); //摘要 the_content(); //内容 endwhile; else : echo ('What you requested cannot be found. Back to <a href="http://www.ll19.com/" rel="nofollow">www.LL19.com homepage </a>'); endif;
比如：
http://www.ll19.com/up/getPost.php?p=1871
http://www.ll19.com/up/getPost.php?p=187你给我看那个FLASH站，其实现在都没有人做全FLASH站了，除了企业公司站，SEO就是个最重要的问题，你提供的那个站我看了没有对SEO做处理。
回复并邮件出问题可能是插件或者可能是服务器的原因，懒得整了。
| 回复并邮件-
<?php if( isset($_POST['glll'])&& $_POST['glll'] == ‘ajax’){ ?>
<?php include_once TEMPLATEPATH . ‘/ajax.php’;} else{ ?>
………
<?php } ?>
我是这样的，ajax.php里面已做没有文章处理的了，但ajax还是不会判断有没有文章啊？
我的JS是这样的：url : id,
data : “glll=ajax”,
dataType : “html”,| 回复并邮件
-
-
-
-
-
我提供的方法没有问题（你自己点击那两个链接也能看出来），你应该想想自己的代码怎么测试才对，我觉得你根本没想如何来测试？
手动地址栏访问一下AJAX要访问的地址，传入相关内容看返回结果是否正确？如果测试正常就是AJAX加载时候有问题，不正常就是你PHP代码本身就没写对，就更别说要AJAX了。
而且我回复里也说了，你代码里用的是POST取得参数值，你提交的时候似乎都是GET？你确定参数值得到了吗？至少echo一下参数值吧？
如果手动访问地址栏没问题就看你AJAX加载，你确定JS代码没有报错？
而且你怎么知道AJAX在“一直在加载”？AJAX加载又没有进度条，你做AJAX出错的处理了吗？
如果你正确的ID（是ID吧？不应该叫什么地址吧？）能返回文章内容，错误的ID返回不了就是你PHP的问题，至少看一下是不是哪写错了吧？
还是其实连正确的ID都返回不了内容？
| 回复并邮件-
我传的是地址，不是ID，地址栏是没问题可以正常加载，问题是如果地址不正确就一直在加载，AJAX加载我有进度条的，当然加载成功就消失的！可能是我的 PHP有问题，这样好了，TX如有时间不如我发我的主题给你看下，给我指点下好吧！….不好意思我发错地方了，现在我先再测试下！不行我说吧，谢谢你，我想是我的主题结构和PHP的问题！
| 回复并邮件 -
-
-
-
-
-
不知可不可以将iframe的内容放入JS里面啊，总觉得iframe对SEO不太友好！！！
| 回复并邮件-
-
个人认为iframe是个不友好元素对SEO也不太友好！目前搜索引擎还不会抓获JS吧，用JS隐藏iframe也是很好的方法！
| 回复并邮件
-
-
-
还想问一下：
如打开这个http://www.ll19.com/#/page/7
博主你用什么方法，自动转到http://www.ll19.com/page/7这个的啊，用PHP和JS可以实现不？谢谢！！！
| 回复并邮件-
文章写了好久了，那个JQUERY的插件应该可以直接用，我站点的AJAX浏览历史记录的方法是我自己写的一套东西，我可以给你说说我的思路，你也可以对照我站点输出的JS看看。
我是用锚点对应记录每次的AJAX更新内容，加一个监听来监听每次锚点的更改，AJAX成功之后更改锚点同时也激活了前进后退按钮，之后记录相关的锚点和锚点对应的内容。剩下的就是监听的事了，对方点击前进后退更改了锚点便替换相关的内容。
对于打开类似http://www.ll19.com/#/page/7，每次页面打开时就去判断是否有锚点，有的话就读取相关锚点的内容，所以你要控制好你页面的锚，并且知道每个锚对应什么地址。
这种方法不会对客户端的性能产生影响放心吧。
| 回复并邮件-
我查了下了解到：
jquery history plugin是jquery的一款历史刷新插件，但它有时候会出现一些Bug，如回上一页时会不流畅。但下面
http://www.asual.com/jquery/address/可以完美地实现历史导航与刷新问题，可惜体积大了点。。。博主你用的方法，呵呵，我感到确实是深了啊，不会用，当然，博主做成插件会好点。
| 回复并邮件-
-
期待TX的通用的插件，我在这也学了不少的东西，太感谢你了！
另外“每次页面打开时就去判断是否有锚点，有的话就读取相关锚点的内容，所以你要控制好你页面的锚，并且知道每个锚对应什么地址。”这个方法是不是和上面的记录插件一起的呀！
| 回复并邮件-
我提供了一个新的例子你可以看看，将锚点法和iframe整合在了一起用，各个浏览器都测试通过了。
至于每次打开页面读取锚点这个要根据自己站点情况来做修改的，这部分暂时无法写成通用。
你可以先把浏览历史纪录这块搞通再考虑如何读取锚点。
| 回复并邮件-
不好意思，我太菜了，上面的新例子，如何结合到你19_ajax.js里面啊！
另我就是想实现点击http://www.ll19.com/page/7的时候，游览器的地址栏的地址由http://www.ll19.com/变成这样的样子
http://www.ll19.com/#/page/7如果访客只记住了http://www.ll19.com/#/page/7这种网址的话，通过PHP自动跳转到正确的链接地址上，他访问时就不用全部加载完JS就可以到达想要的网址了，PHP的方法这个网址http://ajaxfinder.com/8290
有，不过可能要将“#”变为“_”这样才行！不知这样的做法可不可呀？
谢谢了！| 回复并邮件-
你不用非得使用我的19_ajax，你可以自己使用AJAX之后调用我提供的这个记录历史记录的函数ajax_main_19.set_19_Ajax()就行了。
点击http://www.ll19.com/page/7的时候，游览器的地址栏的地址变成http://www.ll19.com/#/page/7
就是jQuery(this).removeAttr(“href”);删除链接，之后根据这个链接替换掉http://www.ll19.com/生成锚#/page/7，接下来就是AJAX加载http://www.ll19.com/page/7然后调用我例子中的ajax_main_19.set_19_Ajax()。
访问http://www.ll19.com/#/page/7也是得到锚点#/page/7后AJAX加载http://www.ll19.com/page/7后显示的，你给我的那个例子不如自己写个301重定向插件呢。
我建议你一步一步的来，先让自己的站能全AJAX化后再考虑浏览历史记录，之后再考虑如何一开始读取锚点，说过很多次了很多东西是需要根据自己站点的内容自己修改的，不可能全部都写成通用。
| 回复并邮件
-
-
-
-
-
-
-
-
我就是用JQUERY，上面那个浏览AJAX历史记录JQUERY的相关插件，是不是直接就可以用了？
另不知博主你用什么方法。。。| 回复并邮件 -
本本 