The async property can be
used to control the behavior of the Ajax call placed from jQuery, it can take
values either true or false. The default value for this property is true.
In this post we shall see on how to control the behavior of the Ajax call using the cache property.
$.ajax({
Run the example click on the Synchronous call button, notice that the UI is freeze till the request is processed, not the async property to true and again click on the button, notice that the UI does not wait for the Ajax request to be processed.
If you do not find any difference , try to impose a delay in the server side (eg Thread.Sleep(2000)) so see the difference.
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
In this post we shall see on how to control the behavior of the Ajax call using the cache property.
The following script sets the async
property to false, hence every Ajax request will be sent to the server and the
UI will wait till the server processes the request and sends the result.
$.ajax({
url: "AjaxData.aspx?ID=1",
cache: false,
async: false,
dataType: "xml",
success: function(result)
{
$(result).find("Name").each(function() {
nameList = nameList + $(this).text() + "
";
";
});
}
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
Properties</title>
<script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
<script type="text/javascript" src="JavaScript/base64.js"></script>
<script
type="text/javascript"
language="javascript">
$(document).ready(function() {
//
Synchronous Ajax Call
$('#btnSynchronous').click(function(event) {
event.preventDefault();
$("#divSynchronous").html('');
var
nameList = "";
$.ajax({
url: "AjaxData.aspx?ID=1",
cache: false,
async: false,
dataType: "xml",
success: function(result) {
$(result).find("Name").each(function()
{
nameList = nameList
+ $(this).text() + "<br
/>";
});
$("#divSynchronous").html(nameList);
}
});
});
//
});
</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="btnSynchronous"
runat="server"
Text="Synchronous Call" />
</td>
<td align="center">
<br /><div id="divSynchronous"></div>
</td>
</tr>
</table>
</form>
</body>
</html>
Run the example click on the Synchronous call button, notice that the UI is freeze till the request is processed, not the async property to true and again click on the button, notice that the UI does not wait for the Ajax request to be processed.
If you do not find any difference , try to impose a delay in the server side (eg Thread.Sleep(2000)) so see the difference.
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
No comments:
Post a Comment