prototype与jquery下Ajax实现的差别
更新时间：2009年09月13日 21:28:56 作者：
Ajax技术在web中应用的相当广泛,最近项目需要用到Ajax，由于主站所用的是Jquey，而某个栏目的开发用的是prototype，这样一来就必须对JS代码做调整了。
先列举一下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方式产生一个与页面显示无关的参数即可。
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方式产生一个与页面显示无关的参数即可。
相关文章
这篇文章主要给大家介绍了关于Webpack设置环境变量的一些误区，文中通过示例代码介绍的非常详细，对大家学习或者使用Webpack具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-12-12
最基本的写法 ，然后实现Js和HTML的分离，然后又实现对同一个元素注册多个事件，期间，我们发现注册事件的兼容性问题。最后我们对注册事件的方法进行封装，方便以后使用。2011-01-01
这篇文章主要介绍了javascript面向对象特性代码实例,包括类、静态成员、对象、重载,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了js兼容火狐显示上传图片预览效果的方法,涉及js调用FileReader实现图片预览功能的技巧,需要的朋友可以参考下2015-05-05
本文主要介绍了es6的数字处理的方法。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
显然，当N≥1时，6N，6N+2，6N+3，6N+4都不是素数，只有形如6N+1和6N+5的自然数有可能是素数。所以，除了2和3之外，所有的素数都可以表示成6N±1的形式(N为自然数)。2009-10-10
写这个是因为最近小程序的一个需求需要从小程序跳转到客户的官网,或者其他外部报名链接,下面这篇文章主要给大家介绍了关于微信小程序跳转外部链接的详细实现方法,需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了微信小程序实现商城倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
这篇文章主要介绍了利用JS如何实现点击表头后表格自动排序，其中包含数字排序、字符串排序以及日期格式的排序，文中给出了完整的示例代码，相信对大家具有一定的参考价值，感兴趣的朋友们一起来看看吧。2017-01-01
本文给大家分享两种方法实现JS限制input框只能输入0~100的正整数,方法二是直接通过设置三个属性,type、min、max即可,就可以设置0~100的整数,感兴趣的朋友跟随小编一起看看吧2024-02-02
最新评论