AJAX 功能在没有警报的情况下不起作用

Posted 2023-02-24

【中文标题】AJAX 功能在没有警报的情况下不起作用

【英文标题】：AJAX function does not work without alerts

【发布时间】：2012-08-23 04:47:54

【问题描述】：

我在我的网站中使用了大量带有 XML Http 请求的 AJAX。对于看似随机的少数 AJAX 调用，我无法让 onreadystatechange 函数中的所有 javascript 正确执行，除非我有一个警报调用，我猜它会暂停执行足以让它完成运行 php 脚本服务器。这是我所说的一个例子：

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 将代码运行延迟一两秒，但结果好坏参半，我宁愿不必为脚本运行设置特定的延迟。

编辑： 要回答 cmets 中的一些问题： 对于这段代码sn-p，问题出在以下两行：

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

如果我在该行之前放置一个警告框以获取 myJson.Result12 的文本，则元素会在我的页面上正确填充。没有它，它们将留空，并且在 Firefox 的错误控制台中看不到任何错误

此代码在单击时运行。我正在使用 DataTables，当有人双击我表中的一行时，页面会填充内容。同样，除了我今天早些时候添加的 2 个新元素之外，一切都运行良好。更大的担忧在于这似乎是我的代码中反复出现的问题。

另外，我已经尝试过 jQuery 的 AJAX 调用，但运气不佳，而且我的大部分代码都是使用 xmlHttp 和 JS 编写的。

【问题讨论】：

不是您问题的答案，但是一旦您开始接触复杂的 AJAX 功能，您真的应该考虑使用 jQuery 等框架来让您的生活更轻松。那么代码的哪一部分没有执行呢？

您能否更具体一点，哪些代码不起作用，您的警报（）在哪里？ Readystate == 4 表示所有数据都可用。

您可能想看看使用 jQuery 并使用他们的 DOM Ready 模型而不是 onreadystatechange。 （我不熟悉，所以这可能不是问题）。此外，看起来您在这里遇到了一个非常简单的比赛条件。把这些放在 jQuery 的 ajax/post 函数的成功调用中就可以了。

您是在 onload 处理程序中执行 AJAX 请求还是直接从页面执行？

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

【参考方案1】：

一个可能的原因；

您应该从 onload 处理程序执行您的 AJAX 请求，否则在您收到响应时您的页面可能尚未完全加载。如果在您尝试更新时未加载 NewElement 和 NewElement2，则您的脚本将无法运行。

警报将延迟脚本足以让页面完成加载，允许元素在脚本到达该点之前存在。

【讨论】：

查看我更新的帖子。当从 onclick 事件调用 AJAX 请求时，应该已经加载了 DOM

【参考方案2】：

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

感谢大家的帮助。肯定有很多关于在 cmets 中使用 AJAX 的好建议。