关键就在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就不会去更新内容。解决方法也很简单,加一个随机数就好了。最终版本:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function(){
setInterval(function(){$("#cnt").load(location.href+"?rnd="+(Math.ceil(Math.random()*1000))+" #cnt");},3000);
});
</script>
<body>
<div id="cnt">
<?php echo date('y/m/d H:i:s').' <span style="color:red">memory usage:</span> '.memory_get_usage()?>
</div>
</body>
也可以获取同域下的其他文件,并在特定部分显示。如果要跨域获取内容的话,比较方便的方法是调用同域的php文件,然后在该php文件里通过file_get_contents之类的函数去远程抓取,说白了就是充当采集器的角色。
在线演示
分享到:
相关推荐
**jQuery 实现页面局部刷新详解** 在Web开发中,页面刷新是常见的操作,但全局刷新会导致整个页面重新加载,这可能会浪费用户的时间和流量。为了提高用户体验,我们常常需要实现页面局部刷新,即只更新页面中特定...
综合以上信息,这份资源可能是关于使用C#和ASP.NET开发Web应用的实例,其中涵盖了使用jQuery实现Ajax局部刷新、分页和搜索结果高亮的功能,并且附带了完整的源代码。对于想要提升.NET Web开发技能,特别是对jQuery...
在Web开发中,页面局部刷新和全局刷新是两种常见的功能实现。局部刷新指的是仅更新页面的一部分内容,而无需重新加载整个页面;全局刷新则是指重新加载整个页面。jQuery作为一个广泛使用的JavaScript库,提供了简单...
本文将介绍使用jQuery和ajax来实现页面局部刷新的两种方法。对于jQuery,它是一个快速、小巧、功能丰富的JavaScript库,通过它可以轻松操作DOM,而ajax允许我们实现无需重新加载整个页面就可以更新网页的部分内容。 ...
总结来说,Struts2和jQuery的结合使用,使得开发者能轻松实现Web应用的局部刷新,提供更流畅的用户体验,同时保持后端逻辑的清晰和高效。在实际项目中,理解这两者的原理和配合方式是提升开发效率的关键。
综上所述,"jQuery实现的局部刷新聊天室"项目涵盖了前端开发中的多个重要技术点,不仅涉及到jQuery库的使用,还涉及到了实时通信、用户界面动态更新和安全性的考虑。开发者通过学习和实践这样的项目,可以深入理解...
例如,使用jQuery实现局部刷新: ```javascript $.get('server_script.php', function(data) { $('#targetElement').html(data); }, 'html'); ``` 以上就是Ajax实现局部刷新的基本原理和步骤。通过这种方式,我们...
在.NET和jQuery技术栈中,实现局部刷新、分页以及高亮显示搜索内容是一项常见的功能需求,尤其在构建数据密集型Web应用时。这个功能可以让用户在不重新加载整个页面的情况下获取新数据,提高用户体验,并且能快速...
本知识点将重点介绍如何使用jQuery库配合AJAX技术来实现局部页面的定时刷新。主要涉及的技术包括: - **jQuery**:一个快速、简洁的JavaScript库,极大地简化了HTML文档的操作、事件处理、动画等任务。 - **AJAX**...
JQuery局部刷新http://www.daxueit.com/article/3081.html
通过以上步骤,我们可以利用jQuery实现一个动态菜单系统,并且当用户点击菜单项时,能够局部刷新页面内容。这不仅提高了页面的响应速度,也使得用户界面更加友好。在实际项目中,根据需求,还可以进一步优化,例如...
struts2+json+jquery局部刷新实现注册验证,包括前台的用户名、密码、手机、身份证、邮箱(包含发邮件技术)、邮箱验证码、验证码的验证,用到的是json+jquery,后台则是用struts2+java类
然而,在使用`.ajax`进行局部刷新后,有时会出现JavaScript无法正确调用的问题,这主要涉及到DOM(文档对象模型)更新、作用域以及事件绑定等问题。下面将详细探讨这个问题及其解决方案。 ### 1. DOM更新问题 当`....
7. **iframe局部刷新**:虽然在当前案例中没有直接提到,但有时也可以使用iframe来实现局部刷新。将需要刷新的部分放在一个iframe内,然后改变iframe的src属性即可。 通过以上步骤,你可以实现在AdminLTE和...
在后台模板中,`iframe`通常被用来承载各个功能模块,如数据管理、设置等,这样当用户在不同模块间切换时,只需要加载`iframe`内的内容,而不是整个页面,实现了局部刷新的效果。 选项卡功能是另一种提高用户交互性...
在这个案例中,我们将使用iframe和JavaScript来实现局部刷新。Iframe,即内联框架,可以在一个HTML文档中嵌入另一个HTML文档,这样我们就可以独立地加载和更新页面的部分内容。 具体实现步骤如下: 1. 首先,在...
6. **动画效果**:jQuery的动画功能使得局部刷新更加平滑,例如使用.fadeIn()、.fadeOut()进行淡入淡出效果,或者使用.slideUp()、.slideDown()实现滑动效果。 7. **示例中的实现**:在这个实例中,可能包含一个...
局部刷新我们讲述到最多的是ajax 了,当然也可以不使用ajax来刷新页面了,我们可以使用jquery中的append来给指定内容加东西了,当然最实用的还是ajax加载数据了。 例子,定时局部刷新 定时局部刷新用到jQuery里面的...
在这个场景中,我们将关注如何使用jQuery的`.load()`方法来实现从数据库中获取数据并进行局部刷新。 首先,`jQuery.load()`方法主要用于异步加载HTML文档的片段,并将其插入到DOM(文档对象模型)中的指定元素。它...
局部刷新通常涉及到对DOM元素的增删改查,通过JavaScript或相关的库(如jQuery)来实现。例如,当接收到新的数据时,可以找到对应的DOM节点并更新其内容,而不是重新加载整个页面。 2. **Ajax技术**:Ajax...