Using jQuery with custom Web services in SharePoint

I had an requirement of using  jQuery for fetching data from my custom web service. The approach was adopted to have better UI experience,

So the user doesn’t feel the post back and flickering of screens. 


I faced lot of issues to make it work, with all the note points found by goggling J made it work like charm.



The approach as follows


Step 1. Create a web service

Step 2. Client Side JavaScript definition to consume the web service


Step 1: Create web service


We will create a custom web service with a web method HelloWorld that takes a name as parameter and returns back a string in JSON format.


JSONJava Script Object Notation more info


It’s the same as C# objects. Object.Property to access the value.


Create a new web service project in ASP.NET and the web service definition as follows


namespace WebService1


    using System.ComponentModel;

    using System.Web.Services;

    using System.Web.Script.Services;

    using System.Web.Script.Serialization;

    /// <summary>

    /// Summary description for Service1

    /// </summary>

    [WebService(Namespace = "")]


    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]


    public class Service1 : System.Web.Services.WebService


        /// <summary>

        /// Hello world

        /// </summary>

        /// <param name="name">Name</param>

        /// <returns>Hello name</returns>


        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

        public string HelloWorld(string name)


            responseObject = new


                    MyName = "Hello " + name


            return new JavaScriptSerializer().Serialize(responseObject);






ü  [ScriptService] to be added to allow calls from java script


ü  [ScriptMethod(ResponseFormat = ResponseFormat.Json)] over the method definition to return JSON


SharePoint context

Deploy the web service to the 12 hive folder to be accessible for any user regardless of the permission rights.

The following handler has to be added to the web.config in the layouts folder to avoid the 500 internal server error that will occur when you call the service from jQuery.


    <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory,

System.Web.Extensions, Version=, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />



Step 2: Client Side JavaScript definition


jQuery AJAX calls are very simple to use compared to the native AJAX calls.  The call is made in jQuery by calling the function with required parameters.


var Name="Balaji";

var servicePath = "/_layouts/1033/myservice/Service1.asmx";

//the current site url + service url

var serviceURL = location.href.substring(0, location.href.lastIndexOf(‘/’)) + servicePath;



        type: "POST",

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

        url: serviceURL + "/HelloWorld",

        data: ‘{"name":"’ + Name + ‘"}’,

        dataType: "json",

        success: processResult,

        error: failure,

        crossDomain: true



//Handle result

function processResult(xData) {

    var responseObject = jQuery.parseJSON(xData.d);




//Handle Failure

function failure(){

         alert("Error occurred");





ü  contentType and dataType to be defined as JSON

ü  crossDomain is set to true when you make cross domain queries like your app runs in a different domain and the service runs in another domain.


ü  The parameter passed to the webservice is case sensitive and the format should be JSON.

The parameter "name" in the web method HelloWorld is the same in the jQuery call "data" attribute.

data: ‘{"name":"’ + Name + ‘"}’


Hope this kick starts.

This message is for the designated recipient only and may contain privileged, proprietary, or otherwise private information. If you have received it in error, please notify the sender immediately and delete the original. Any other use of the email by you is prohibited.

  1. hi, how can i consume third party web service using jquery in sharepoint ?
    for ex : weather publicweb service

  2. Check this out it should help

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

%d bloggers like this: