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.
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" >
<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>
<div
id="divHTML"></div>
</td>
</tr>
</table>
</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.
1 comments:
Click here for commentsgood learning
ConversionConversion EmoticonEmoticon