不用AJAX和IFRAME,說(shuō)說(shuō)真正意義上的ASP+JS無(wú)刷新技術(shù)
更新時(shí)間：2008年09月25日 09:40:49 作者：
注明:以下方法都經(jīng)過(guò)實(shí)例和開(kāi)發(fā)的長(zhǎng)期驗(yàn)證,其實(shí)這些技術(shù)早就有,今天只不過(guò)自己歸納一下
網(wǎng)上流傳的什么<<AJAX vs ASP傳統(tǒng)無(wú)刷新>>中的ASP無(wú)刷新,加個(gè)IFRAME,弄個(gè)JS根本不能稱之為無(wú)刷新.....
一下代碼未區(qū)分大小寫(xiě),請(qǐng)自行修改!
全靜態(tài)無(wú)刷新思路:
<HTML>
<SCRIPT SRC=""></SCRIPT>//當(dāng)前頁(yè)面全局的 無(wú)數(shù)新調(diào)用
<SCRIPT> //一系列JS調(diào)用
FUNCTION XX(FUN_NAME,PARAMETER_NAME,PARAMETER_VALUE)//參數(shù)自己設(shè)定
{
DOCMENT.SCRIPTS[0].SRC='AJAX.ASP?'+PARAMETER_NAME+'='+PARAMETER_VALUE;//參數(shù)以此類推
}
</SCRIPT>
<BODY>
//示例調(diào)用一,直接調(diào)用ASP
我的數(shù)據(jù)庫(kù)有<SCRIPT SRC="GET_COUNT.ASP?ID=XXX"></SCRIPT>條
//示例調(diào)用二,事件調(diào)用AJAX.ASP
我的數(shù)據(jù)庫(kù)有<LABEL ID="COUNT"></LABEL>條<INPUT TYPE="BUTTON" ONCLICK="JAVASCRIPT:XX(COUNT,'ID',DOCUMENT.ALL.ID.VALUE);">
</BODY>
</HTML>
//示例二中AJAX.ASP代碼
<%
SET RS = CONN.EXECUTE(SQL_STR)
RESPONSE.WRITE "DOCUMENT.GETELEMENTBYID('COUNT').VALUE = '"&RS("COUNT")&"'"
%>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
以下省略部分HTML代碼,只說(shuō)明思路
//示例三 FORM表單ONSUBMIT事件調(diào)用AJAX.ASP
<SCRIPT SRC=""></SCRIPT>//這句是必須的
<SCRIPT>
function CHECK()
{
alert('1');
//document.getElementByID("")
document.scripts[0].src = "AJAX.ASP?a="+escape(document.getElementById('T1').value);//這里給第一個(gè)script.src賦值
alert(document.scripts[0].src);//查看測(cè)試地址是否正確
return false;
}
</SCRIPT>
<FORM METHOD="POST" ACTION="" ONSUBMIT="return CHECK();" NAME="FORM1">
<INPUT TYPE="TEXT" NAME="T1" ID="T1">
<INPUT TYPE="SUBMIT" VALUE="SUBMIT" >
</FORM>
//示例三AJAX.ASP代碼
<%
RESPONSE.WRITE "alert('"&request("a")&"');"http://////或者寫(xiě)response.write "document.getelementbyid('id').innerhtml='某些html代碼';"
%>
//////////////////////////////////////////////////////////////////////////////////////////////////
優(yōu)點(diǎn):
此種無(wú)刷新方法對(duì)比AJAX技術(shù)的優(yōu)勢(shì)在于,這種方法所需要編寫(xiě)的代碼更少,更簡(jiǎn)潔,開(kāi)發(fā)速度更快,不用書(shū)寫(xiě)過(guò)于龐大復(fù)雜的JS判斷,同樣利用JS,但沒(méi)有用到DOM XML,同樣有跨平臺(tái)的優(yōu)勢(shì),能達(dá)到AJAX同樣的用戶體驗(yàn)效果,可以和AJAX同時(shí)使用,不同功能的實(shí)現(xiàn)代碼書(shū)寫(xiě)模式和流程,幾乎相同,更易提高代碼復(fù)用性,事實(shí)上只需建立2個(gè)文件就可以實(shí)現(xiàn)網(wǎng)站各種不同的功能
缺點(diǎn):
因?yàn)榇思夹g(shù)完全依靠JS給URL或者COOKIES賦值,然后通過(guò)URL和cookies傳參,但URL和cookies參數(shù)大小和長(zhǎng)度是有所限制的,所以無(wú)法像AJAX那樣傳送大量信息除非仿照AJAX或直接用AJAX完成,不過(guò)我相信會(huì)找到更好的解決方案
一下代碼未區(qū)分大小寫(xiě),請(qǐng)自行修改!
全靜態(tài)無(wú)刷新思路:
<HTML>
<SCRIPT SRC=""></SCRIPT>//當(dāng)前頁(yè)面全局的 無(wú)數(shù)新調(diào)用
<SCRIPT> //一系列JS調(diào)用
FUNCTION XX(FUN_NAME,PARAMETER_NAME,PARAMETER_VALUE)//參數(shù)自己設(shè)定
{
DOCMENT.SCRIPTS[0].SRC='AJAX.ASP?'+PARAMETER_NAME+'='+PARAMETER_VALUE;//參數(shù)以此類推
}
</SCRIPT>
<BODY>
//示例調(diào)用一,直接調(diào)用ASP
我的數(shù)據(jù)庫(kù)有<SCRIPT SRC="GET_COUNT.ASP?ID=XXX"></SCRIPT>條
//示例調(diào)用二,事件調(diào)用AJAX.ASP
我的數(shù)據(jù)庫(kù)有<LABEL ID="COUNT"></LABEL>條<INPUT TYPE="BUTTON" ONCLICK="JAVASCRIPT:XX(COUNT,'ID',DOCUMENT.ALL.ID.VALUE);">
</BODY>
</HTML>
//示例二中AJAX.ASP代碼
<%
SET RS = CONN.EXECUTE(SQL_STR)
RESPONSE.WRITE "DOCUMENT.GETELEMENTBYID('COUNT').VALUE = '"&RS("COUNT")&"'"
%>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
以下省略部分HTML代碼,只說(shuō)明思路
//示例三 FORM表單ONSUBMIT事件調(diào)用AJAX.ASP
<SCRIPT SRC=""></SCRIPT>//這句是必須的
<SCRIPT>
function CHECK()
{
alert('1');
//document.getElementByID("")
document.scripts[0].src = "AJAX.ASP?a="+escape(document.getElementById('T1').value);//這里給第一個(gè)script.src賦值
alert(document.scripts[0].src);//查看測(cè)試地址是否正確
return false;
}
</SCRIPT>
<FORM METHOD="POST" ACTION="" ONSUBMIT="return CHECK();" NAME="FORM1">
<INPUT TYPE="TEXT" NAME="T1" ID="T1">
<INPUT TYPE="SUBMIT" VALUE="SUBMIT" >
</FORM>
//示例三AJAX.ASP代碼
<%
RESPONSE.WRITE "alert('"&request("a")&"');"http://////或者寫(xiě)response.write "document.getelementbyid('id').innerhtml='某些html代碼';"
%>
//////////////////////////////////////////////////////////////////////////////////////////////////
優(yōu)點(diǎn):
此種無(wú)刷新方法對(duì)比AJAX技術(shù)的優(yōu)勢(shì)在于,這種方法所需要編寫(xiě)的代碼更少,更簡(jiǎn)潔,開(kāi)發(fā)速度更快,不用書(shū)寫(xiě)過(guò)于龐大復(fù)雜的JS判斷,同樣利用JS,但沒(méi)有用到DOM XML,同樣有跨平臺(tái)的優(yōu)勢(shì),能達(dá)到AJAX同樣的用戶體驗(yàn)效果,可以和AJAX同時(shí)使用,不同功能的實(shí)現(xiàn)代碼書(shū)寫(xiě)模式和流程,幾乎相同,更易提高代碼復(fù)用性,事實(shí)上只需建立2個(gè)文件就可以實(shí)現(xiàn)網(wǎng)站各種不同的功能
缺點(diǎn):
因?yàn)榇思夹g(shù)完全依靠JS給URL或者COOKIES賦值,然后通過(guò)URL和cookies傳參,但URL和cookies參數(shù)大小和長(zhǎng)度是有所限制的,所以無(wú)法像AJAX那樣傳送大量信息除非仿照AJAX或直接用AJAX完成,不過(guò)我相信會(huì)找到更好的解決方案
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了微信js-sdk上傳與下載圖片接口用法,結(jié)合實(shí)例形式分析了基于上傳圖片接口(uploadImage)和下載圖片接口(downloadImage)針對(duì)圖片操作的相關(guān)技巧,需要的朋友可以參考下2016-10-10
javascript判斷是手機(jī)還是電腦訪問(wèn)網(wǎng)頁(yè)的簡(jiǎn)單實(shí)例分享
在智能手機(jī)越來(lái)越普及甚至是泛濫的時(shí)候，確實(shí)給大家的生活帶來(lái)了很大的方便，但是對(duì)于web前端設(shè)計(jì)師來(lái)說(shuō)，可就麻煩多了，現(xiàn)在很多的網(wǎng)站在制作過(guò)程中都要考慮到手機(jī)訪問(wèn)的問(wèn)題，那么我們?nèi)绾蝸?lái)判斷客戶端是不是手機(jī)呢，下面分享個(gè)例子吧2014-06-06
這里給大家推薦一款自己封裝的js時(shí)間日期格式化的函數(shù)，非常的簡(jiǎn)潔實(shí)用，分享給有需要的小伙伴2014-12-12![js中promise如何取到[[PromiseResult]]問(wèn)題](http://img.jbzj.com/images/xgimg/bcimg3.png)
js中promise如何取到[[PromiseResult]]問(wèn)題
這篇文章主要介紹了js中promise如何取到[[PromiseResult]]問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了JS獲得圖片alt信息的方法,涉及javascript獲取圖片元素及對(duì)應(yīng)alt屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
本文重點(diǎn)給大家介紹IONIC自定義subheader的最佳解決方案，本文實(shí)例講解，介紹的非常詳細(xì)，感興趣的朋友一起看看吧2016-09-09
基于JavaScript實(shí)現(xiàn)全選、不選和反選效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)全選、不選和反選效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
通過(guò)javascript實(shí)現(xiàn)掃雷游戲代碼實(shí)例
這篇文章主要介紹了通過(guò)javascript實(shí)現(xiàn)掃雷游戲代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-02-02 
JavaScript中極易出錯(cuò)的操作符運(yùn)算總結(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript中極易出錯(cuò)的操作符運(yùn)算的相關(guān)資料,包括了算術(shù)運(yùn)算符、比較運(yùn)算符、邏輯運(yùn)算符、賦值運(yùn)算符、一元運(yùn)算符以及運(yùn)算優(yōu)先級(jí)等問(wèn)題,需要的朋友可以參考下
2021-08-08