AJAX Supporting Sharepoint Web parts with JSONP WCF Services

What is AJAX ?

AJAX = Asynchronous JavaScript and XML.
AJAX is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.
Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.

Click here for AJAX Tutorial

In this post , we are going to create a share point page with AJAX Supporting web parts which invokes JSONP services to get data from Server.

1. Create JSONP WCF Services(How to create?)


Format of the Result

Link : 
http://ServerName:PorNumber/Service.svc/jsp/GetEmployeMoreDetailsByUserName?method=JsonPCallBack&logInName=User1

Result :

JsonPCallBack(
{
    "DateOfBirth":"\/Date(969042600000+0530)\/",
    "AboutMe":"This is all About Me",
    "CurrentATC":"CMB ATC",
    "Department":"OIG--CMB-VPL-Shared Services-Center Management",
    "Experience":16.2,
    "Interests":["UX Design","SharePoint","Photography"],
    "Languages":[""],
    "NoofPastProjects":33,
    "PermanentATC":"CMB ATC",
    "ReportingManager":"Domain\\UserName",
    "Tier":0,
    "Since":"\/Date(852057000000+0530)\/"
}
);
 
2. Create Empty/Visual Web part project and create web parts.

3. In aspx page create client side controls (Button , Label , text box ...etc)

<div>

Search Employee : <input id="SearchEmpName" type="text" name="SearchEmpName"  value=""/>
<input id="btnWCFREST" type = "button" value = "Search" /><br/>

<b>Reporting Manager:</b> <label id = "EmpReportlbl" ></label><br/>
<b>Department:</b> <label id = "EmpDepartlbl" ></label><br/>
<b>Tier:</b> <label id = "EmpTierlbl" ></label><br/>
<b>Permanent Office:</b> <label id = "EmpPermAtclbl" ></label><br/>
<b>Current Office:</b> <label id = "EmpCurrAtclbl" ></label><br/>
<b>Interests:</b> <label id = "EmpIntelbl" ></label><br/>
<b>Date Of Birth:</b> <label id = "EmpDOBlbl" ></label><br/>
<b>Languages:</b> <label id = "Emplanglbl" ></label><br/>
<b>Experience:</b> <label id = "EmpExpelbl" ></label><br/>

</div>


4. Add reference to the project in order to use JQuery in Web parts

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script> 

5. Use the JQuery to invoke the WCF Services in AJAX.
Check this for more about JQuery :  JQuery, Write Less, do more

<script type="text/javascript">
    jQuery.support.cors = true;

    $(document).ready(function () {
        $("#btnWCFREST").click(function () {
            $.ajax({
                url: 'http://ServerName:PortNumber/Service.svc/jsp/GetEmployeMoreDetailsByUserName?logInName=' + $("#SearchEmpName").val() + '&method=?',
                type: 'GET',
                dataType: 'jsonp',
                error: function (x, t, r) { alert("Error In Employee More Details"); },
                success: function (data) {
                    document.getElementById('EmpReportlbl').innerText = data.ReportingManager;
                    document.getElementById('EmpDepartlbl').innerText = data.Department;
                    document.getElementById('EmpTierlbl').innerText = data.Tier;
                    document.getElementById('EmpPermAtclbl').innerText = data.PermanentATC;
                    document.getElementById('EmpCurrAtclbl').innerText = data.CurrentATC;
                    document.getElementById('EmpIntelbl').innerText = data.Interests;
                    document.getElementById('EmpDOBlbl').innerText = Date(data.DateOfBirth);  
                    document.getElementById('Emplanglbl').innerText = data.Languages;
                    document.getElementById('EmpExpelbl').innerText = data.Experience;
                }
            });

        });
    });
</script>

6. check whether AJAX is working or not by putting breakpoints in VS project in Page load method and attach appropriate process.