AJAX刷新中的延迟/不一致

Question

我一直在开发一个允许用户提交内容并拥有该内容的网络应用程序，今天我一直看到一些意想不到的结果而没有做出任何重大改变。

该应用程序的基本功能是用户从网页index.php上的表单提交一些POST数据，然后运行PHP脚本submit.php将数据添加到数据库中的表。 同时， index.php上的Jquery函数通过脚本load.php刷新div中包含从表中选择的行的内容，并且每秒调用一次该函数。

问题是，今天，突然间，我看到数据添加到表格之间以及它在Jquery刷新的div中出现之间的长时间（10-20分钟）延迟。 此外，div在其现有内容和具有添加值的新数据集之间来回闪烁，就好像它在load.php的实时结果和先前对同一脚本的调用之间交替进行。

我在调用submit.php之前和之后检查了MySQL数据库，并且我已经验证了数据一旦被提交就立即添加，所以这个问题与如何从Jquery调用load.php脚本有关。

这才刚刚开始。 奇怪的是，我已经看到了我之前构建的另一个AJAX应用程序的相同行为，以测试相同的I / O机制，并且我在一周内没有触及该应用程序的代码。 我的系统管理员说服务器没有任何变化可以解决这个问题。

我发布了所有代码以提供所有必要的信息，但我认为问题出在load.php或index.php的javascript updateMyContent()中。

index.php

<script language="JavaScript">

setInterval("updateMyContent();",1000);
$(function(){
    updateMyContent=function(){
        $('#refreshData').load("./module/load.php").fadeIn("slow");
    }
});

</script>

<script language="JavaScript">

$(document).ready(function(){
    $('#submitForm').on('submit',function(e){
        $.ajax({
            url:'./module/submit.php',
            data:$('#submitForm').serialize(),
            type:'POST',
            success:function(data){
                console.log(data);
                $("#success").show().fadeOut(5000);
                $('#textID').val('');
            },
            error:function(data){
                $("#error").show().fadeOut(5000);
            }
        });

        e.preventDefault();
    });
});

</script>



<div style="float: right;
        top: 0;
        " id="submitDiv">
    <form id="submitForm" action="" method="post">
        <textarea id="textID" type="text" name="content" rows=5></textarea>
        <input type="submit" value="send" name="submit"/>
    </form>
    <br>
    <span id="error" style="display: none; color:#F00">error</span>
    <span id="success" style="display:none; color:#0C0">success</span>
</div>
<div style="float: center;" id="refreshData"></div>

submit.php

<?php
    if(isset($_POST['content']))
    {
        $content=$_POST['content'];
        $dsn="mysql:host=someserver.net;dbname=thisdb;charset=utf8";
        $db=new PDO($dsn,'thisdb','password');
        $insertSQL="insert into submission (content) values (?)";
        $stmt=$db->prepare($insertSQL);
        $stmt->execute(array($content));
    }
    else
    {
        echo "FAIL!";
    }
?>

load.php

<?php
    try
    {
        $dsn="mysql:host=someserver.net;dbname=thisdb;charset=utf8";
        $db=new PDO($dsn,'thisdb','password');
        $PDOsql="select * from submission order by id desc";
        $stmt=$db->query($PDOsql);
        foreach($stmt->fetchAll(PDO::FETCH_ASSOC) as $resultRow)
        {
            printf("%s<br>",$resultRow["ID"]);
            printf("%s<br>",htmlspecialchars($resultRow["content"]));
        $stmt->closeCursor();
        }
    }
    catch(PDOException $ex)
    {
        echo "an error occurred!  ".$ex->getMessage();
    }
?>

Answer 1

返回Ajax响应花了这么长时间的问题可能是表submissions已经增加。 而不是每一次加载所有提交，只向div添加新的提交。 即跟踪收到的最后一个id并在查询中使用它，因此where子句是有限的。

此外，div在其现有内容和具有添加值的新数据集之间来回闪烁，就好像它在load.php的实时结果和先前对同一脚本的调用之间交替进行。

浏览器可以缓存Ajax响应，就像其他任何东西一样。 为了防止这种情况，您可以：

1. 在处理请求的页面中放置no-cache标头，以防止浏览器缓存Ajax响应。 IE特别顽固，需要最强大的标题。

2. 在Ajax请求中添加一个随机数参数，以使每个请求都是唯一的。

3. 告诉JQuery防止缓存（它只为你做＃2）。 使用$.ajaxSetup ({ cache: false }); 或者为每个$.ajax调用添加cache: false, attribute