In this post I give the demo of jquery ajax to call server side method and use ajax start event to handling ajax start and display loading image and on ajax stop I hide loading image after request return response. I use web method to call server side method and add thread to delay response.

AjaxDemo.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxDemo.aspx.cs" Inherits="AjaxDemo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title></title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">

function displayMessage() {

$('#result').html('');

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: "AjaxDemo.aspx/GetMessage",

data: "{}",

success: function (result) {

$('#result').html(result.d);

}

})

}

$(document).ajaxStart(function () {

$("#loading").show();

});

$(document).ajaxStop(function () {

$("#loading").hide();

});

</script>

</head>

<body>

<form id="form1" runat="server">

<div style="text-align: center; margin-top: 150px;">

<input type="button" value="click me" onclick="displayMessage();" />

<div id="result"></div>

<div id="loading" style="display: none">

<img src="ajax-loader.gif" />

</div>

</div>

</form>

</body>

</html>

AjaxDemo.cs

using System;

using System.Web.Services;

public partial class AjaxDemo : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

[WebMethod]

public static string GetMessage()

{

System.Threading.Thread.Sleep(3000);

return "Hello Ajax";

}

}

Store data on client side using jquery data.