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 相关文章推荐
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
JavaScript之自定义类型
May 04 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 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
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
php微信开发之关注事件
2018/06/14 PHP
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
Python 串口读写的实现方法
2019/06/12 Python
PyQt5组件读取参数的实例
2019/06/25 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
保时捷设计:Porsche Design
2019/03/30 全球购物
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
旅游业大学生创业计划书
2014/01/31 职场文书
护士自我评价
2014/02/01 职场文书
售后求职信范文
2014/03/15 职场文书
安全施工标语
2014/06/07 职场文书
被告代理词范文
2015/05/25 职场文书
春节晚会开场白
2015/05/29 职场文书
校园开放日新闻稿
2015/07/17 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS