Translate This Blog

jquery ajax caching Example


The cache property can be used to set the caching of Ajax data in the browser, the propertu can take value true or false.

In this post we shall see on how to control the caching of data in the browser using the cache property.

The following script sets the cache property to true, hence every Ajax request will be served from the server.

$.ajax({
    url: "AjaxData.html",
    cache: true,
    dataType: "html",
    success: function(result) {
        $("#divHTML").html(result);
    }
});
Here is a full Example.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Ajax Handlers</title>
<script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
    <script
        type="text/javascript"
        language="javascript">
        $(document).ready(function() {
            $('#btnGetHTML').click(function(event) {
                event.preventDefault();
                $.ajax({
                    url: "AjaxData.html",
                    cache: true,
                    dataType: "html",
                    success: function(result) {
                        $("#divHTML").html(result);
                    }
                });
            });
        });
    </script>                 
</head>
<body>
    <form id="AjaxHandlers" runat="server">
        <table border="1">
            <tr>
                <td><b>Action</b></td>
                <td><b>Response</b></td>
            </tr>
            <tr valign="middle">
                <td>
                    <asp:Button
                        ID="btnGetHTML"
                        runat="server"
                        Text="Get HTML" />
                </td>
                <td align="center">
                    <br />
                    <
div
                        id="divHTML"></div> 
                </td>
            </tr>
        </table>       
    </form>
</body>
</html>

Run the example click on the Get HTML button, notice that the data from the server page AjaxData.html gets displayed in the browser, not change some data in the server page AjaxData.html and again click on the button, notice that the changes done in the server page gets refreshed in the browser.

Now set the cache property to false [
cache: true] and perform the same steps, notice that the changes done to the server page are not reflected in the browser.
Previous
Next Post »

1 comments:

Click here for comments
Anonymous
admin
October 17, 2012 at 12:37 PM ×

good learning

Congrats bro Anonymous you got PERTAMAX...! hehehehe...
Reply
avatar
Thanks for your comment