javascript - AJAX 刷新延迟/不一致

Question

我一直在开发一个允许用户提交内容并拥有该内容的网络应用程序，今天我在没有进行任何重大更改的情况下看到了一些意想不到的结果。

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

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

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

今天才开始。奇怪的是，我在之前为测试相同的 I/O 机制而构建的另一个 AJAX 应用程序中看到了同样的行为，而且我已经有一个多星期没有触及该应用程序的代码了。我的系统管理员说没有对服务器进行任何更改来解决这个问题。

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

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>

提交.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。 IE。跟踪收到的最后一个 ID 并在查询中使用它，以便限制 where 子句。

Moreover, the div flickers back and forth between its existing contents and the new data set with the added values, as if it were alternating between the realtime results of load.php and a previous call to the same script.

Ajax 响应可以像其他任何内容一样由浏览器缓存。为防止这种情况，您可以:

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

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

3. 告诉 JQuery 防止缓存(它只为您执行 #2)。使用 $.ajaxSetup ({ cache: false }); 或将 cache: false, 属性添加到每次调用 $.ajax