使用$ .ajax（）接收HTTP 304代码

Question

我正在使用jQuery $ .ajax（）函数将HTML内容加载到DIV标签中的应用程序。 $ .ajax函数每隔几秒钟运行一次以获取更新。 HTML内容（PHP脚本）相当大，除非从上次加载以来内容实际上已更改，否则我不希望将其加载到div中。 我需要知道304何时返回并且什么也不做-与将HTML从缓存加载到div相反。

我尝试设置：

ifModified: true

并且这似乎没有返回预期的错误。

这给我留下了两个问题：

1）jQuery是否每次都认为该页面是新页面，因为它正在加载动态页面-即使自上次加载以来该页面没有更改过？

2）如果对问题1否，那么是否可以进行jQuery $ .ajax（）调用并在返回304时使错误方法执行？

这是我的测试代码-只是看我是否能抓到304：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX Conditional GET Request Test</title>

<script type="text/javascript" src="../jquery/jquery-2.1.4.min.js"></script>

</head>

<body>
<input type="submit" name="button" id="button" value="Check for updates" onclick="javascript:runUpdate();" />
<div id="status" style="width: 100px; height: 12px;"></div>


<script type="text/javascript">

    function runUpdate()
    {

        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();

        var time = h+":"+m+":"+s;

        $.ajax({
            type: "GET",
            url: "../dir/phpscriptthatsometimesupdates.php",
            ifModified: true,
            success: function(data){
                $("#status").html("Updated "+time);
            },
            error: function(data, status, error){
                $("#status").html("Not updated "+time);
            }
        });

    }

    </script>

</body>
</html>

每次运行测试时，都会说文件已更新-即使没有更新。

我还尝试过使用带有将来日期的“ If-Modified-Since”，但未成功：

headers: {"If-Modified-Since": "Sun, 10 Apr 2016 00:00:00 GMT"}

服务器正在运行：

Apache 2.2.15 (CentOS)
PHP 5.6.17
jQuery 2.1.4

更新：

我尝试使用以下方法调用PHP文件：

header("Last-Modified: Fri, 08 Apr 2016 00:00:00 GMT");

将Last-Modified设置为过去的时间。 我使用浏览器工具进行了检查，发现发送了Last-Modified。 从AJAX到此脚本的5次连续调用未显示错误。

我还通读了如何检查jQuery.ajax（）请求标头状态是否为“ 304未修改”？ 但是它描述的内容似乎与jQuery文档相反，后者解释了ifModified参数，内容为：

ifModified (default: false)
Type: Boolean
Allow the request to be successful only if the response has changed 
since the last request. This is done by checking the Last-Modified 
header. Default value is false, ignoring the header. In jQuery 1.4 this 
technique also checks the 'etag' specified by the server to catch 
unmodified data.

还是我错过了什么？ 根据链接的帖子，我也尝试过：

headers: {"If-Modified-Since": "Fri, 08 Apr 2016 00:00:00 GMT"}

但没有成功。

Answer 1

https://httpstatuses.com/304

如何检查jQuery.ajax（）请求标头状态是否为“ 304未修改”？

jQuery将处理304个响应，因为它将处理200个响应，因此永远不会调用您的错误函数。

Answer 2

根据我的发现，无法像如何检查jQuery.ajax（）请求标头状态是否为“ 304未修改”中所述直接捕获304 ？ ，但仍可以在加载内容之前对HEAD请求所检索的xhr.getResponseHeader（“ Last-Modified”）与存储值进行内部比较。 尽管此解决方案未专门针对304，但它确实允许脚本根据上次修改时间来决定是否加载内容，而不是连续加载缓存的内容并浪费资源。

这个想法的基础来自我在这里找到的出色文章： http : //www.raymondcamden.com/2012/04/05/Using-jQuery-to-conditionally-load-requests/

也可以在这里找到： https : //gist.github.com/cfjedimaster/2313466

但是，当我尝试本文中的示例代码时，遇到了我的浏览器缓存HEAD响应并始终尝试加载旧内容的问题，即使文件已更新也是如此。 为了使示例工作，我向$ .ajax（）HEAD请求调用添加了cache：false。

正如@cmorrissey所指出的那样，我们正在检查更新的PHP脚本必须发送这样的Last-Modified标头：

header("Last-Modified: Mon, 11 Apr 2016 00:00:00 GMT");

为了知道PHP脚本的内容是否已更改，我们可以使用PHP脚本加载以生成内容的文件的Last-Modified时间，通过header（）设置Last-Modified。 这样，我们将始终知道PHP脚本是否将具有新内容。 如果要从磁盘加载文件，可以使用filemtime（）来获取此时间，如果要远程加载，则可以从文件中获取Last-Modified头。

下面是一个完整的工作示例，其中减去了要检查更新的PHP脚本（somefile.php）和要检查更新的JSON或文本文件。

<!DOCTYPE html>
<html>
<head>
<title>AJAX Conditional GET Request Test</title>

<script type="text/javascript" src="jquery-2.1.4.min.js"></script>

</head>

<body>
<input type="submit" name="button" id="button" value="Check for updates" onclick="javascript:runUpdate();" />
<div id="status" style="width: 300px; height: 12px;"></div>


<script type="text/javascript">

    var resourceLastTime = "";

    function runUpdate()
    {

        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        var time = h+":"+m+":"+s;

        var resourceUrl = "somefile.php";

        if(resourceLastTime != "")
        {
            $.ajax({
                type:"HEAD",
                url: resourceUrl,
                cache: false,
                success: function(res,code,xhr){

                    if(resourceLastTime != xhr.getResponseHeader("Last-Modified"))
                    {
                        getUrl(resourceUrl);
                        $("#status").html("Updated "+time);
                    }
                    else
                    {
                        $("#status").html("Not updated "+time);
                    }
                },
                error: function(data, status, error){
                    $("#status").html(error+" "+status+" "+time);
                }
            });
        }
        else
        {
            getUrl(resourceUrl);
            $("#status").html("First load "+time);
        }
    }



    function getUrl(urlToGet)
    {
        var urlContents = "";

        $.ajax({
            url:urlToGet,
            type:"get",
            cache:false,
            success:function(res,code,xhr) {
                resourceLastTime = xhr.getResponseHeader("Last-Modified");
                //must process res here due to asynchronous nature of $.ajax() function
            }                    
         });
    }

    </script>

</body>
</html>

使用$ .ajax（）接收HTTP 304代码

问题描述

2 个解决方案

解决方案1
0 2016-04-08 20:55:47

解决方案2
0 已采纳 2016-04-11 17:55:09

使用$ .ajax（）接收HTTP 304代码

问题描述

2 个解决方案

解决方案1 0 2016-04-08 20:55:47

解决方案2 0 已采纳 2016-04-11 17:55:09

解决方案1
0 2016-04-08 20:55:47

解决方案2
0 已采纳 2016-04-11 17:55:09