AJAX功能在没有警报的情况下无法工作

Question

我在我的网站上使用了大量的XML Http请求的AJAX技术。然而，有几个看似随机的AJAX调用中，除非我加入一个alert语句以暂停执行并等待服务器PHP脚本运行完毕，否则我的onreadystatechange函数内的所有javascript代码都无法正常执行。以下是具体示例：

Javascript

xmlHttp=getXMLHttp();   //function returns an xmlhttp object to use
//get parameters ready
param="id=5"
xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4){
        s=xmlHttp.responseText;
        var myJson = eval("("+s+")");
        document.getElementById('Elem1').value=myJson.Result1;
        document.getElementById('Elem2').value=myJson.Result2;
        triggerEvent(document.getElementById('Elem3'),'onblur');
        document.getElementById('Elem4').value=myJson.Result3;
        document.getElementById('Elem5').value=myJson.Result4
        var sel = document.getElementById('Elem6');
        var i;
        for(i=0;i<sel.length;++i){
            if(sel.options[i].value==myJson.Result5){
                sel.selectedIndex = i;
                break;
            }
        }
        document.getElementById('MfgCustNum').value=myJson.Result6;
        document.getElementById('MfgOrderNum').value=myJson.Result7;
        document.getElementById('OrderDatePicker').value=myJson.Result8;
        document.getElementById('ShipDatePicker').value=myJson.Result9;
        document.getElementById('CancelDatePicker').value=myJson.Result10;
        document.getElementById('PO Number').value=myJson.Result11;
        //for some reason, the following 2 lines are where I'm having issues without an alert box
 document.getElementById('NewElement').value=myJson.Result12;
     document.getElementById('NewElement2').value=myJson.Result13;
 //everything else loads properly
        sel = document.getElementById('SelectBox1')
        for(i=0;i<sel.length;++i){
            if(sel.options[i].value==myJson.Result14){
                sel.selectedIndex = i;
                break;
            }
        }
        sel = document.getElementById('SelectBox2')
        for(i=0;i<sel.length;++i){
            if(sel.options[i].value==myJson.Result15){
                sel.selectedIndex = i;
                break;
            }
        }
        sel = document.getElementById('SelectBox3')
        for(i=0;i<sel.length;++i){
            if(sel.options[i].value==myJson.Result16){
                sel.selectedIndex = i;
                break;
            }
        }
        sel = document.getElementById('SelectBox4')
        for(i=0;i<sel.length;++i){
            if(sel.options[i].value==myJson.Result17){
                sel.selectedIndex = i;
                break;
            }
        }
    }
}
xmlHttp.open("POST","../ServerCall.php",true);
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send(params);

我正在运行的PHP脚本是对数据库的简单查询，并将其作为JSON数组输出

    $dc->connect();
    $query = "SELECT COLUMNS FROM TABLE"
    $res = $dc->queryDb($query);
    if(!$res){
        exit();
    }
    $ary = $dc->resultsToArray($res);
    $JSON_ARRAY=array();
    foreach($ary[0] as $key=>$value){
        if(!is_numeric($key))
            $JSON_ARRAY[$key]=$value;
    }
    echo json_encode($JSON_ARRAY);

这对我来说已经成为一个相当大的问题，因为它在我的代码的3或4个不同部分中都出现了，但是使用响应文本的警报对话框显示一切正常。我尝试过将AJAX调用同步运行而不是异步运行，但没有帮助。我还尝试使用settimeout延迟1或2秒钟运行代码，但结果参差不齐，我宁愿不必设置脚本运行的特定延迟时间。

编辑： 回答一些评论中的问题： 对于这个代码片段，问题出现在以下两行中：

 document.getElementById('NewElement').value=myJson.Result12;
 document.getElementById('NewElement2').value=myJson.Result13;

如果我在那行代码之前放置一个警告框以获取myJson.Result12的文本，页面上的元素就会被填充。如果没有它，它们将保持空白，在Firefox的错误控制台中也看不到任何错误信息。此代码是在onclick事件中运行的。我使用DataTables，当有人双击表格中的一行时，页面就会填充内容。再次强调，除了今天早些时候添加的2个新元素之外，一切正常。更大的问题是这似乎是我代码中经常出现的问题。此外，我尝试过jQuery的AJAX调用，但没有什么进展，而我的大部分代码都是使用xmlHttp和JS编写的。

- gdawgrancid

---

不是针对你的问题，但一旦你开始涉及复杂的AJAX功能，你真的应该考虑使用像jQuery这样的框架来让你的生活更轻松。那么哪部分代码没有执行？ - Mike Brant

你能具体一些吗？哪段代码出了问题？你的alert()在哪里？ Readystate == 4表示所有数据都已经可用。 - BadFeelingAboutThis

你可能想看一下使用jQuery和使用它们的DOM Ready模型，而不是onreadystatechange。（我对此不熟悉，所以这可能不是问题所在）。另外，看起来你在这里遇到了一个非常简单的竞争条件。将它们放入jQuery的ajax/post函数的success调用中，你就没问题了。 - DaOgre

是的，很可能你的脚本在DOM元素准备好之前执行，这就是为什么警报会给DOM足够的时间来完成加载。 - BadFeelingAboutThis

如果你这样做：alert(document.getElementById('NewElement')); - 它会显示 undefined 还是 null？ - BadFeelingAboutThis

Answer 1

一个可能的原因；

你应该在onload处理程序中执行AJAX请求，否则你的页面可能在你得到响应之前没有完全加载。如果NewElement和NewElement2在你尝试更新它们时还没有加载，你的脚本将无法工作。

警报将延迟脚本足够的时间，让页面完成加载，在你的脚本到达那个点之前允许元素存在。

- Joachim Isaksson

---

请查看我的更新帖子。由于AJAX请求是从onclick事件调用的，因此DOM应该已经加载完成。 - gdawgrancid

Answer 2

现在，数据似乎可以正常加载，没有弹出警告框来暂停脚本。我不确定现在和之前有什么不同，但我将继续尝试重现错误。我想知道问题是否基于我使用的浏览器或计算机而不是代码本身无法正常工作。或者可能是数据库响应速度较慢导致出现一些问题。顺便说一下，我尝试接收的列虽然没有填充太多数据，但它们是我尝试选择的所有列中最大的最大大小。

感谢大家的帮助。评论中确实有很多关于使用AJAX的好建议。

- gdawgrancid