最近做了一階段的AJAX開發(fā),有一些心得體會(huì)。日后會(huì)慢慢寫出來,也請AJAXer多多指教~ 剛開始寫AJAX代碼的時(shí)候,直接參照的是AJAX基礎(chǔ)教程一書中的代碼(該書真的很不錯(cuò),是AJAX入門的經(jīng)典教材,是圖靈出版社的。計(jì)算機(jī)方面的書籍,我最信任的就是O'R和圖靈的)。
該書的創(chuàng)建XMLHttpRequest對象的代碼如下:
var xmlHttp;
function createXMLHttpRequest() { if (window.ActiveXObject) {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else if (window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest(); }}
在一般情況下,該代碼的使用不會(huì)帶來任何問題。
如:
function test1(){ createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange1; url = "test.php?ts=" + new Date().getTime(); xmlHttp.open("GET", url, true); xmlHttp.send(null);}
function test2(){ createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange2; url = "test.php?ts=" + new Date().getTime(); xmlHttp.open("GET", url, true); xmlHttp.send(null);}
function handleStateChange1() { ......
}
function handleStateChange2() { ......
}
..........
在頁面的不同地方調(diào)用test1,test2函數(shù)都能正常工作。即不同時(shí)刻調(diào)用的話,就不會(huì)產(chǎn)生問題。
但是假如你需要在同一時(shí)刻同時(shí)調(diào)用這兩個(gè)函數(shù),則會(huì)發(fā)現(xiàn)只有其中一個(gè)可以正常運(yùn)行。
比如,我在加載頁面的時(shí)候運(yùn)行如下函數(shù):
function init(){ test1(); test2();}
此時(shí),則test1,test2只有一個(gè)函數(shù)會(huì)正常執(zhí)行。
分析下原因,是由于javascript的語言特性導(dǎo)致。一般情況下,Javascript的變量,函數(shù)等等,都是公用的,其他對象都能訪問(可讀可寫)。這就是問題的所在。在同一時(shí)刻,調(diào)用test1和test2就會(huì)出現(xiàn)“變量xmlHttp”的沖突。
解決方法:
1 最簡單的方法,不要在同一時(shí)刻調(diào)用,如init函數(shù)可以改為:
function init(){ test1(); setTimeout("test2()",500);}
但該方法屬于投機(jī),并未真正解決問題。
2 修改“XMLHttpRequest創(chuàng)建函數(shù)”,改為一實(shí)例化函數(shù)。
function createXMLHttpRequest() { if (window.ActiveXObject) {var xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP"); }else if (window.XMLHttpRequest) {var xmlHttpObj = new XMLHttpRequest(); } return xmlHttpObj;}
實(shí)例化時(shí)相應(yīng)的改為:
function test1(){ xmlHttp_1 = createXMLHttpRequest();
xmlHttp_1.onreadystatechange = handleStateChange1; url_1 = "test.php?ts=" + new Date().getTime(); xmlHttp_1.open("GET", url, true); xmlHttp_1.send(null);}
function test2(){ xmlHttp_2 = createXMLHttpRequest();
xmlHttp_2.onreadystatechange = handleStateChange1; url_2 = "test.php?ts=" + new Date().getTime(); xmlHttp_2.open("GET", url, true); xmlHttp_2.send(null);}
這樣子處理的話,即使在同一時(shí)刻調(diào)用test1,test2函數(shù),也不會(huì)產(chǎn)生問題了,實(shí)現(xiàn)了真正的“同步”。
#######################################################
通過該方法,可以引申出javascript中對象的“私有屬性”的創(chuàng)建方法:
1 私有屬性可以在構(gòu)造函數(shù)中使用 var 關(guān)鍵字定義。
2 私有屬性只能由特權(quán)函數(shù)公用訪問。(特權(quán)函數(shù)就是在構(gòu)造函數(shù)中使用this關(guān)鍵字定義的函數(shù))。外部客戶可以訪問特權(quán)函數(shù),而且特權(quán)函數(shù)可以訪問對象的私有屬性。
比如下面這個(gè)Vehicle類,則wheelCount和curbWeightInPounds就是私有屬性,只能通過特權(quán)函數(shù)訪問/設(shè)置了:
function Vehicle() { var wheelCount = 4; var curbWeightInPounds = 4000;
this.getWheelCount = function() {return wheelCount; }
this.setWheelCount = function(count) {wheelCount = count; }
this.getCurbWeightInPounds = function() {return curbWeightInPounds; }
this.setCurbWeightInPounds = function(weight) {curbWeightInPounds = weight; }
}
新聞熱點(diǎn)
疑難解答
圖片精選