Some print.
Some print.
分类归档: Collect Page 1 of 10

浏览AJAX历史记录的三种方法

by 19. on 2009-05-06

浏览AJAX历史记录的三种方法：jQuery插件+隐藏iframe+hash（锚点）参数

以前觉得AJAX更新后想激活浏览器的“前进~后退”按钮再浏览历史记录应该不好实现，所以一直没关注这方面的东西，前几天一哥们问起才想把这块搞搞，其实代码很简单，主要是实现思路，这里提供的例子里用了三种实现方法。

jQuery插件+隐藏iframe+hash（锚点）参数三种浏览AJAX历史记录实例下载

使用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整合在一起使用。

至于如果你用JQUERY，很好~有相关插件可用，具体使用请看例子。

(全文…)

{ 5 comments }
{ Tags: }

jConsole在tomcat下的配置

by 19. on 2009-02-26

jConsole在tomcat下的配置（使用jdk的jconsole来监控系统使用的connection、内存和CPU。）.

对于tomcat修改catalina.bat，打开catalina.bat, 找到搜索“set JAVA_OPTS=%JAVA_OPTS%”，前面加上rem 给注释掉。在下面一行添加如下代码：

set JAVA_OPTS=%JAVA_OPTS%

-Dcom.sun.management.jmxremote

-Dcom.sun.management.jmxremote.port=8086

-Dcom.sun.management.jmxremote.authenticate=false

-Dcom.sun.management.jmxremote.ssl=false

在%java_home%\bin目录下启动jconsole.exe，连接工程：

Local：如果启动的工程和jdk在同一台机器，在local中可以直接看到类，点击连接就ok（如果在开发工具(如：myeclipse)启动tomcat，将无法看到上面的界面，最好通过startup.bat启动）。

Remote：如果启动的工程和jdk不在同一台机器，可以使用remote方式。在主机部分输入ip：10.226.0.91 端口输入：8086（配置的：-Dcom.sun.management.jmxremote.port），然后点击连接。

查看connection使用情况：如果工程使用c3p0作为数据源，则可以选择标签“Mbean”，从左边的树中选择“com.mchange.v2.c3p0”下的“pooleddatasource”，在右边的内容区会显示出c3p0数据源的所有的connection的使用情况。

重点查看Numbusyconnections：处于使用状态的connection数量。

Jetty下修改的配置基本和TomCat相同，只是我在ORACLE OEM中查看的会话数缘何总是和Numbusyconnections不相同呢 – 。-

(全文…)

{ 0 comments }
{ Tags: , }
Page 1 of 1012345»...Last »