AJAX和回調函數

我會盡力解釋我的問題。我有4個文件index.html，event.js，start.js和form.php。AJAX和回調函數

的index.html

<head><script type="javascript/text" src="start.js></script></head> 
<html> 
<button id="bt" type="button">Click</button> 
<div id="test"></div> 
</html>

start.js

window.onload=init; 
function init(){ 
document.getElementById("bt").onclick=function(){ 
getFile('form.php?x='+Math.random()*11, getPHP); 
getFile('javascripts/event.js?x='+Math.random()*11,getJS); 
} 
} 
function getFile(source,callFunc){ 
var xmlHttpR=false; 
if (window.XMLHttpRequest) 
xmlHttpR=new XMLHttpRequest(); 
else if (window.ActiveXObject) 
xmlHttpR=new ActiveXObject("Microsoft.XMLHttp"); 
else 
alert("Error"); 
if (xmlHttpR){ 
xmlHttpR.open("GET",source,true); 
xmlHttpR.onreadystatechange=function(){ 
if (xmlHttpR.readyState==4 && xmlHttpR.status==200){ 
callFunc(xmlHttpR); 
delete xmlHttpR; 
xmlHttpR=null; 
} 
} 
} 
xmlHttpR.send(null); 
} 

function getPHP(response){ 
document.getElementById("test").innerHTML=response.responseText; 
} 

function getJS(response){ 
eval(response.responseText); 
}

event.js

document.getElementById("firstName").onblur=function(){ 
validate(this.name,this.value); 
}

form.php的

<html> 
<form> 
<input type="text" id="firstName" value=""> 
</form> 
</html>

好了，現在的問題是，當onblur事件在firstName上觸發時什麼也沒有發生，但是當我刷新頁面有時一次或兩次時，事件正常運行。也許我沒有在正確的時間得到答覆？

回調函數和eval是否有問題，我用onblur事件分配給firstName字段？

是與AJAX異步調用的問題？我應該使用同步嗎？我錯過了什麼？

我希望我能解釋清楚問題所在。

在此先感謝您的幫助。

來源

2009-12-11 codemaker

是的，這聽起來像是異步調用之間的競爭條件。有時JS會首先返回，有時PHP會首先返回。

您可以嘗試加載JS作爲PHP ajax調用的回調的一部分。

這樣的事情應該工作：

編輯：通過匿名函數和向下getPHP

getFile('form.php?x='+Math.random()*11, function(response) { 
    getPHP(response); 
    getFile('javascripts/event.js?x='+Math.random()*11,getJS); 
});

來源

2009-12-11 01:52:02 jonnyheadphones

謝謝，我試過了，但沒有奏效。我得到了form.php，但它沒有顯示在測試div中，我沒有得到event.js。有任何想法嗎？ – codemaker 2009-12-11 02:04:13

oops，忘記了您需要將響應傳遞給getPHP。應該將form.php的內容放入div＃test中。 – jonnyheadphones 2009-12-11 03:37:15

@jonnyheadphones：它完美的作品。非常感謝您的幫助。 – codemaker 2009-12-11 18:53:04

在我看來，你的異步調用是問題。

您正在撥打兩個getFile()來電。由於getFile()發出異步請求，因此瀏覽器將繼續瀏覽JavaScript代碼而不等待響應（有一種方法可以強制瀏覽器等待響應，但我現在無法想到）。因此，有時在加載頁面時，#firstName實際上並不存在，直到AFTER event.js嘗試進行事件綁定。

我建議你不要在每次有人點擊按鈕時重新創建文本框。相反，它在頁面上是「靜態」的，你的JavaScript只會檢查這個值並做出風格變化，以向用戶顯示他們的輸入是否有效。

來源

2009-12-11 01:47:42

感謝您的回答通響應。我也認爲異步調用是問題，而callFunc不能正常工作。我想向用戶顯示索引頁面上的一些信息，當用戶單擊按鈕時，他/她將得到一個沒有任何頁面刷新的表單，這就是爲什麼我使用AJAX和按需javascript將事件追加到每個輸入字段。 – codemaker 2009-12-11 01:55:14

這一切都有道理，但我建議動態創建JavaScript的東西，而不是重複發送這種形式。如果您最初將表單留在那裏，或者甚至動態更新它（不刪除#firstName對象），則不必重複重新綁定事件。回想js文件的唯一原因是重新創建綁定，而這只是因爲DOM中正在重新創建對象才發生。 – 2009-12-11 02:43:49

爲了測試這個，如果將xmlHttpR.open（）的第三個參數設置爲false，那麼請求將是同步的（即阻塞）。 – 2009-12-11 11:10:40

AJAX和回調函數

回答

相關問題