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 相关文章推荐
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
vue中使用[provide/inject]实现页面reload的方法
Sep 30 Javascript
js实现中文实时时钟
Jan 15 Javascript
如何在vue中使用jointjs过程解析
May 29 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
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
星际争霸任务指南——神族
2020/03/04 星际争霸
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
Python开发编码规范
2006/09/08 Python
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
python实现从ftp服务器下载文件的方法
2015/04/30 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
Form表单及django的form表单的补充
2019/07/25 Python
python 提取文件指定列的方法示例
2019/08/07 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
python 字符串常用函数详解
2019/09/11 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
毕业生如何写自荐信
2014/03/26 职场文书
爱情寄语大全
2014/04/09 职场文书
小学生作文评语大全
2014/04/21 职场文书
关于旅游的活动方案
2014/08/15 职场文书
校友回访母校寄语
2015/02/26 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
银行优秀员工推荐信
2015/03/24 职场文书