Question

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

首次浏览器请求http://localhost/api返回状态200 OK和nexts 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 未定义：

304:notmodified
undefined

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

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

Answer 1

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

但是，如果您还没有将数据存储在内存中，那么我确实会看到问题，那么您需要一些方法从浏览器缓存中获取数据。因此，我认为解决方案是用于缓存数据的写代码。

我不确定HTTPS如何与etags一起工作，但是，HTTPs数据并不总是被缓存（浏览器和版本之间的方法和行为不同）所以如果etags工作，你可能需要实现自己的安全缓存。

Answer 2

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

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);
    }
});

如何修复浏览器缓存和未修改的JSON响应？ jQuery.ajax（{ifModified：true，cache：true}）JSON请求中断数据响应

3 个答案: