How to load this ASP.NET-div after page loading?

Question

Currently, there is a div on my page that makes a lot of requests to the server, so it takes about 10 seconds to load the pages. We do not always need this data, so I want to be able to load a page with all the information except for this one div. As soon as the page is 100% loaded, I want it to load this div (maybe it will show the loading ...).

I made an ajax request from my TrackingData.aspx as a test, but I can't get it to work.

My javascript

 function ShowCurrentTime() {
    $.ajax({
        type: "POST",
        url: "TrackingData.aspx/GetCurrentTime",
        data: '{name: "' + $("#<%=txtUserName.ClientID%>")[0].value + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        failure: function(response) {
            alert("bye");
        }
    });
}
function OnSuccess() {
    alert("hi");
}

And HTML

Your Name :
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
<input id="btnGetTime" type="button" value="Show Current Time"
    onclick = "ShowCurrentTime()" />
</div>

C # code is simple

public static string GetCurrentTime(string name)
{
    return "Hello " + name + Environment.NewLine + "The Current Time is: "
        + DateTime.Now.ToString();
}

There is TrackingData.aspx in the same folder, and it has the GetCurrentTime method. This is just a test method, but I should be able to do the rest myself as soon as I get this working.

Answer 1

(GetCurrentTime):

[System.Web.Services.WebMethod]

, json stringify :

data: { name: JSON.stringify($("#<%=txtUserName.ClientID%>")[0].value)}