prototype与jquery下Ajax实现的差别


Posted in Javascript onSeptember 13, 2009

先列举一下Ajax在Jquery和prototype中的实现。
Jquery:

<script language="javascript"> 
$(function(){ 
var box = {}; 
var remoteUrl = 'index.php'; 
box.interval = 5*60*1000;//5分钟 
box.showBoxInfo = function() { 
jQuery.get(remoteUrl, function(data){ 
var msg_box = $('#msg_box'); 
msg_box.innerHTML = data; 
} 
}); 
} 
box.run = function(){ 
this.showBoxInfo(); 
setInterval(this.showBoxInfo,this.interval); 
}; 
box.run(); 
}) 
</script>

prototype:
<script language="javascript"> 
var box = {}; 
box.interval = 5*60*1000;//5分钟 
box.showBoxInfo = function(){ 
var pars = ""; 
var remoteUrl = 'index.php'; 
var myAjax = new Ajax.Request( 
remoteUrl, 
{ 
method: 'get', 
parameters: pars, 
onComplete: box.showResponse 
}); 
}; 
box.showResponse = function(data){ 
var msg_box = $("msg_box") ; 
msg_box.innerHTML = data.responseText; 
}; 
box.run = function(){ 
this.showBoxInfo(); 
setInterval(this.showBoxInfo,this.interval); 
}; 
box.run(); 
</script>

实际在引入setInterval函数后prototype却不能刷新,这是为什么呢?
原来是prototype对于相同的URL有缓存机制,应此不能刷新页面,特别是在用户使用F5或点击“刷新”后,会出现Ajax响应区空白的bug,这样就必须让prototype不刷新。
对于prototype中的URL添加随机数
原:var remoteUrl = 'index.php';
修改后:var remoteUrl = 'index.php?rand='+Math.random();
使用GET方式产生一个与页面显示无关的参数即可。
Javascript 相关文章推荐
JavaScript的面向对象方法以及差别
Mar 31 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
JS 参数传递的实际应用代码分析
Sep 13 #Javascript
javascript类继承机制的原理分析
Sep 12 #Javascript
javascript 类定义的4种方法
Sep 12 #Javascript
一个简单的javascript类定义例子
Sep 12 #Javascript
一个简单的JavaScript 日期计算算法
Sep 11 #Javascript
关于javascript 回调函数中变量作用域的讨论
Sep 11 #Javascript
javascript 一些用法小结
Sep 11 #Javascript
You might like
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
js控制input输入字符解析
2013/12/27 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
python编写的最短路径算法
2015/03/25 Python
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
python绘制简单彩虹图
2018/11/19 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
如何利用python发送邮件
2020/09/26 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
采购主管的岗位职责
2013/12/17 职场文书
学习党章思想汇报
2014/01/07 职场文书
文案策划求职信
2014/03/18 职场文书
常务副总经理任命书
2014/06/05 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
2015年宣传工作总结
2015/04/08 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
Django显示可视化图表的实践
2021/05/10 Python
Python之matplotlib绘制折线图
2022/04/13 Python