Wednesday, October 17, 2012

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.

Related Post

jquery ajax status
jquery ajax status example
jquery ajax readyState
jquery ajax readyState example
jquery ajax caching
jquery ajax caching example
jquery ajax async
jquery ajax async example
jquery ajax authentication
jquery ajax authentication example

Search Flipkart Products:
Flipkart.com

2 comments:

lulur bali alus said...

salam kenal bos. lagi jalan jalan pagi nih

Anonymous said...

Really like all of your suggestions! Thank you so much with regard to sharing! I simply signed up with doodlekit and started my very own website:)
Runescape 3 Gold
runescape gold for sale
Billig WOW Gold Kaufen