如何修复浏览器缓存和未修改的 JSON 响应？ jQuery.ajax({ifModified:true,cache:true}) JSON 请求在数据响应时中断

Question

如何修复浏览器缓存和 notmodified 对 JSON 的响应？ jQuery.ajax({ifModified:true,cache:true}) JSON 请求在 data 响应时中断。

第一次浏览器请求 http://localhost/api 返回状态 200 OK 并下一步 304 Not Modified

$.ajax({
    type:"GET",
    url:'http://localhost/api', // {"content"="Hello!"}
    dataType:'json',
    cache:true,
    ifModified:true,            // Lets respond `304:notmodified`
    success:function(data,textStatus,jqXHR){
        console.debug(jqXHR.status+':'+textStatus);
        console.debug(data);    // Why on repeated request returns `undefined`?
    }
});

XHR第一次返回ok：

200:success
Object {content="Hello!"}

但下次返回data undefined：

304:notmodified
undefined

如何解决？看来是 jQuery 1.5.1 的 bug。 预期结果：

304:notmodified
Object {content="Hello!"}

Answer 1

我相信这就是它应该如何工作的304不返回任何数据它只是告诉你它没有改变。

但是，如果您尚未在内存中获取数据，那么我确实看到了问题，那么您需要某种方法从浏览器缓存中获取数据。因此我认为解决方案是编写代码来缓存数据。

我不确定 HTTPS 如何与 etag 一起使用，但是，HTTPs 数据并不总是被缓存（浏览器和版本之间的方法和行为不同），因此如果 etag 工作，您可能无论如何都需要实现自己的安全缓存。

Answer 2

尝试在 url 末尾添加一个随机数作为参数。

random_number = Math.floor(Math.random()*10101010101)
url:'http://localhost/api?' + random_number

Answer 3

当您收到 304 时，您必须重新请求数据，但将“ifModified”标志设置为 false。然后，该请求将遵守正常的缓存规则，您将收到缓存的数据。

例如，在 MVC 控制器中...

        DateTime pageLastUpdated = <.....>

        if (Request.Headers["If-Modified-Since"] != null)
        {
            var dt = DateTime.Parse(Request.Headers["If-Modified-Since"] as string);

            if (pageLastUpdated.Date == dt.Date && pageLastUpdated.Hour == dt.Hour && pageLastUpdated.Minute == dt.Minute && pageLastUpdated.Second == dt.Second) {
              Response.Cache.SetCacheability(HttpCacheability.NoCache);                    
              return new HttpStatusCodeResult(304, "notmodified");
            }
        }

        Response.Cache.SetCacheability(HttpCacheability.Private);
        Response.Cache.SetVaryByCustom("*");
        Response.Cache.SetExpires(pageLastUpdated.AddDays(1));
        Response.Cache.SetLastModified(pageLastUpdated);

        // now return the Json
        return Json(new {........});

发回的数据在客户端上缓存最多 1 天。

function loadJson(url, params, onLoaded) {
  // initial request 
  $.ajax({
    type: 'GET',
    dataType: 'json',
    url: url,
    data: params,
    cache: true,
    ifModified: true, // forces check with server
    success: function (result, textStatus, jqXHR) {

        // if 304, re-request the data
        if (result === undefined && textStatus == 'notmodified') {
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: url,
                data: params,
                cache: true,
                ifModified: false, // don't check with server
                success: function (cachedResult, textStatus, jqXHR) {
                    onLoaded(cachedResult);
                }
            });
        }
        else
            onLoaded(result);
    }
});