Store Data on Client Side using jQuer Data

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>

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>

</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.