使用jQuery实现局部刷新
实现
真的是太简单了,让我忍不住再次感慨一下jQuery的宗旨:Write Less Do More。看一下实现代码
01.<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
02.type="text/javascript"></script>
03.<script type="text/javascript" language="javascript">
04.setInterval(function(){$("#cnt").load(location.href+" #cnt");},3000);
05.</script>
06.<body>
07.<div id="cnt">
08.<?php echo date('y/m/d H:i:s').' <span style="color:red">memory usage:</span> '.memory_get_usage()?>
09.</div>
10.</body>
关键就在load方法,看一下官方解释Load HTML from a remote file and inject it into the DOM.
A GET request will be performed by default – but if you pass in any extra parameters then a POST will occur.
In jQuery 1.2 you can now specify a jQuery selector in the URL. Doing so will filter the incoming HTML document, only injecting the elements that match the selector. The syntax looks something like “url #some > selector”. Default selector “body>*” always applies. See the examples for more information.
远程获取文件,然后插入到指定的节点中,默认为get方法,如果有其他的参数,则会使用post方法。jQuery1.2之后的版本可以指定选择器。而我们知道jQuery的选择器之强大是出了名的,所以我们可以获取当前页某一节点的内容,然后插入到该节点中,就实现了局部刷新的效果。
如果你运行上面的这段代码,会发现IE下并没有效果,内容没有更新。这是因为IE有缓存,如果数据源的URL和当前的URL一致,那么IE就不会去更新内容。解决方法也很简单,加一个随机数就好了。最终版本:
01.<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”
02.type=”text/javascript”></script>
03.<script type=”text/javascript” language=”javascript”>
04.$(function(){
05.
setInterval(function(){$(“#cnt”).load(location.href+”?rnd=”+(Math.ceil(Math.random()*1000))+” #cnt”);},3000);
06.});
07.</script>
08.<body>
09.<div id=”cnt”>
10.<?php echo date(‘y/m/d H:i:s’).’ <span style=”color:red”>memory usage:</span> ‘.memory_get_usage()?>
11.</div>
12.</body>
也可以获取同域下的其他文件,并在特定部分显示。如果要跨域获取内容的话,比较方便的方法是调用同域的php文件,然后在该php文件里通过file_get_contents之类的函数去远程抓取,说白了就是充当采集器的角色。
Hallelujah!
I definitely agree,is like the saying
Thank you my friend, you brought a tear to my eye.
ок здорово
Agree 100%. Just shows at the end of the day we are all people not a colour statistic.
:O
Thanks very much for sharing these very precious and inspiring words.
Well, naturally, anyone would laugh.
I guess I had to think more about what you wrote before i can comment on it..
my friend, I am sending you peaceful and positive thoughts and lots of love. Blessed Be
Thank you so much for sharing this with us.
You are THE BEST!!!
Yo this is nice. If any ya’ll interested, check out my recent remix of Heartless..
Carpe diem and love are always in my heart
I am so glad I got to your blog. A truly happy blog.