prototype與jquery下Ajax實(shí)現(xiàn)的差別
更新時(shí)間：2009年09月13日 21:28:56 作者：
Ajax技術(shù)在web中應(yīng)用的相當(dāng)廣泛,最近項(xiàng)目需要用到Ajax，由于主站所用的是Jquey，而某個(gè)欄目的開發(fā)用的是prototype，這樣一來就必須對(duì)JS代碼做調(diào)整了。
先列舉一下Ajax在Jquery和prototype中的實(shí)現(xiàn)。
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>
實(shí)際在引入setInterval函數(shù)后prototype卻不能刷新，這是為什么呢？
原來是prototype對(duì)于相同的URL有緩存機(jī)制，應(yīng)此不能刷新頁面，特別是在用戶使用F5或點(diǎn)擊“刷新”后，會(huì)出現(xiàn)Ajax響應(yīng)區(qū)空白的bug，這樣就必須讓prototype不刷新。
對(duì)于prototype中的URL添加隨機(jī)數(shù)
原：var remoteUrl = 'index.php';
修改后：var remoteUrl = 'index.php?rand='+Math.random();
使用GET方式產(chǎn)生一個(gè)與頁面顯示無關(guān)的參數(shù)即可。
Jquery：
復(fù)制代碼 代碼如下:
<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:
復(fù)制代碼 代碼如下:
<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>
實(shí)際在引入setInterval函數(shù)后prototype卻不能刷新，這是為什么呢？
原來是prototype對(duì)于相同的URL有緩存機(jī)制，應(yīng)此不能刷新頁面，特別是在用戶使用F5或點(diǎn)擊“刷新”后，會(huì)出現(xiàn)Ajax響應(yīng)區(qū)空白的bug，這樣就必須讓prototype不刷新。
對(duì)于prototype中的URL添加隨機(jī)數(shù)
原：var remoteUrl = 'index.php';
修改后：var remoteUrl = 'index.php?rand='+Math.random();
使用GET方式產(chǎn)生一個(gè)與頁面顯示無關(guān)的參數(shù)即可。
您可能感興趣的文章:
- 找到了一篇jQuery與Prototype并存的沖突的解決方法
- 解析prototype,JQuery中跳出each循環(huán)的方法
- jquery與prototype框架的詳細(xì)對(duì)比
- jQuery.fn和jQuery.prototype區(qū)別介紹
- 解析jQuery與其它js(Prototype)庫兼容共存
- jQuery.prototype.init選擇器構(gòu)造函數(shù)源碼思路分析
- JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的區(qū)別和應(yīng)用場(chǎng)景簡(jiǎn)述
- Jquery與Prototype混合用法對(duì)比
- jQuery prototype沖突的2種解決方法(附demo示例下載)
相關(guān)文章
本文為大家介紹下購物車如何實(shí)現(xiàn)選中得到價(jià)格，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-01-01
這篇文章主要介紹了js 實(shí)現(xiàn)碰撞檢測(cè)的示例，幫助大家更好的制作js特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下2020-10-10
js實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡制作
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
本文主要介紹了JavaScript去除字符串兩端空格的三種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
TypeScript中的類型運(yùn)算符實(shí)現(xiàn)
TypeScript 是一種強(qiáng)類型語言,它通過使用類型運(yùn)算符來強(qiáng)化類型安全性,本文主要介紹了TypeScript中的類型運(yùn)算符實(shí)現(xiàn),感興趣的可以了解一下2023-10-10
JavaScript實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
以前有人會(huì)說，new Function的方式是幾乎與eval相等，今天我查了一下，確實(shí)是不同的東西，說這句話的人太不負(fù)責(zé)了。關(guān)于eval和new function，得到的結(jié)果都是一致的，都會(huì)叫你不要去使用它們。所以結(jié)論就是“不得不”才使用2012-12-12
本篇文章主要介紹了js和jquery中獲取非行間樣式的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-05-05
php結(jié)合js實(shí)現(xiàn)多條件組合查詢
這篇文章主要為大家詳細(xì)介紹了php結(jié)合js實(shí)現(xiàn)多條件組合查詢，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
js實(shí)現(xiàn)base64文件的處理以及下載方法
Base64是一種將二進(jìn)制數(shù)據(jù)編碼為ASCII字符的編碼方式,這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)base64文件的處理以及下載的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07