jquery ajax enabled wcf Service call sample

    <script language="javascript" type="text/javascript">

        $(function () {
            CallSiblingMenu();
        });

        function getUrlParts(url) {
            var a = document.createElement('a');
            a.href = url;

            return {
                href: a.href,
                host: a.host,
                hostname: a.hostname,
                port: a.port,
                pathname: a.pathname,
                protocol: a.protocol,
                hash: a.hash,
                search: a.search
            };
        }

        function getNavigationUrl()
        {
            var url = window.location.href;
            var navigationUrl = getUrlParts(url).pathname;
            return navigationUrl;
        }

     

        function CallSiblingMenu() {

            var relativeUrl = getNavigationUrl();
            var baseControl = "#siblingsMenu";
            var html = '';

            //clear
            $(baseControl).html('');

            //add loading
            html = html + '<div id="loading" style="margin-left:50px;margin-top:50px;">';
            html = html + '<img src="/App_Themes/Common/Images/loading.gif"  /></div>';
            $(baseControl).append(html);

            $.ajax({
                type: "POST",
                url: "/PublicService.svc/GetSiblings",
                data: '{"relativeUrl": "' + relativeUrl + '"}',
                cache: false,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                processdata: true,
                success: function (data) {
                   
                    //remove loading
                    $('#loading').remove();

                    $.each(data.d, function (i, item) {

                        $(baseControl).append('<a class="" href="' + item.Url + '" ><div>' + item.Title + '</div></a>');
                    });

                },
                error: function (msg) {
                    $(baseControl).html('');

                    alert('CallSiblingMenu failed!!!!');
                }
            });
        }



    </script>



</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="LeftNavigationContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <div id="dynamic-wrapper">
        <div id="siblingsMenu"></div>

        <div id="content" runat="server" clientidmode="static">
        </div>

        <div class="clearfix"></div>

    </div>
</asp:Content>