jquery的ajax缓存

html页面如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="js/jquery-1.10.2-min.js" type="text/javascript"></script>
        <script src="js/jquery-ajax-cache.js" type="text/javascript"></script>
        <script type="text/javascript">
            var storage = window.localStorage;

            function test() {
                var data = storage.getItem('cacheKey');
                if (!data) { // 如果data为空,发出请求
                    $.ajax({
                        url: 'All.ashx',
                        success: function (response) {
                            if (response !== undefined) {
                                alert(response);
                                storage.setItem('cacheKey', response);
                            }
                            // 其他业务处理。。。          
                        }
                    });
                } else {
                    alert(data+"是缓存的数据!");
                } 
            }
        </script>

    </head>
    <body>
    <input type="button" value="AJAX缓存测试" onclick="test();"/>
    </body>
</html>
All.ashx如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace JsDemo
{
    /// <summary>
    /// All 的摘要说明
    /// </summary>
    public class All : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("Hello World");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

结果如图:

jquery的ajax缓存_第1张图片

你可能感兴趣的:(html,jquery,Ajax,.net,缓存)