Question

我会尝试解释我的问题。我有4个文件index.html，event.js，start.js和form.php。

的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>

好了，现在的问题是，当在firstName上触发onblur事件时没有任何反应，但是当我有时刷新一次或两次页面时，事件正在按原样运行。也许我没有在合适的时间收到回复？

回调函数和eval是否有问题我用来将onblur事件分配给firstName字段？

是AJAX异步调用的问题吗？我应该使用同步吗？我错过了什么？

我希望我能清楚地解释问题是什么。

提前感谢您的帮助。

Answer 1

在我看来，你的异步调用就是问题所在。

您正在进行两次getFile()来电。由于getFile()发出异步请求，浏览器将继续浏览JavaScript代码而不等待响应（有一种方法可以强制浏览器等待响应，但我现在想不到它）。因此，有时当您加载页面时，#firstName实际上并不存在，直到event.js尝试进行事件绑定。

我建议您每次有人点击按钮时都不会重新创建文本框。相反，它在页面上是“静态的”，您的JavaScript只会检查值并进行样式更改，以向用户显示其输入是否有效。

Answer 2

是的，这听起来像异步调用之间的竞争条件。有时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);
});

AJAX和回调函数

2 个答案: