Creating a Webservice Proxy with jQuery

24 thoughts on “Creating a Webservice Proxy with jQuery”

  1. Great articles.
    One discovery… jQuery 1.5 and above breaks it.
    I’m not a hardcore javascript developer, but the easiest workaround is to remove the dataFilter property in _doAjax.
    This unfortunately means the ‘d’ property added by the WCF service to all json responses is still present. The workaround to that is to change all ‘results’ to ‘results.d’ in index.html, but it would be nicer if the ‘d’ could be removed inside _doAjax as in the original code.

  2. Followup…
    since the jquery ajax method now automatically converts responses to json, and the fact that dataFilter runs before this magic happens, the most sensible solution to me (feel free to disagree) is to manipulate the raw response before jQuery does the conversion to json. So for my own project, I’ve reinstated the dataFilter property with simple text manipulation to remove the ‘d’ property added by WCF.

    dataFilter: function (data) {
    //remove the ‘d’ property inserted by all WCF services (if it exists)
    return data.replace(/^\{“d”:(.*)\}$/, “$1″);
    }

    1. Hi Greg,
      Its a great point you bring up, ive been meaning to update the article or write a new one but havent gotten around to doing it yet.
      In any case, since im very much adverse to string manipulation, however simple they may be, what i did in my usage of the proxy is wrap the Success handler with my own so it looks like this:

      $.ajax({

      success: function(data, status, xhr)
      {
      var newData = (data.hasOwnProperty(“d”) ? data.d : data)

      fnSuccess(newData, status, xhr);
      },

      });

      Thanks!
      Yoav

  3. Where is the service?, I can’t find any file called : “Services/XXXX.svc/”

    I can find the Service References\WCFService\Reference.cs
    and the WCFService.asmx .

    Can you please help me what I should write in the _baseURL ?

  4. Yosi :
    Where is the service?, I can’t find any file called : “Services/XXXX.svc/”
    I can find the Service References\WCFService\Reference.cs
    and the WCFService.asmx .
    Can you please help me what I should write in the _baseURL ?

    I did:
    this._baseURL = “Service/WcaService.asmx/”;

    and add my function
    GetPictures: function (link, success, error) {
    var data = { link: link };

    this._doAjax(“GetPictures”, data, success, error)
    },

    I call :

    var proxy = new ServiceProxy();
    prox.GetAlbums(0, OnGetPicturesSucceed, OnDefaultErrorHandler);

    nothing happen!

    1. Hi Yosi,
      Im not sure to which asmx youre referring to… the web service exposed in the download i provided in this article (http://www.mediafire.com/file/jutyzjrzm5m/ServiceProxy%20-%20Turotial%20Site.zip) has an svc file called: TutorialService.svc
      you can find it in the zip file: JTemplatesWCF – Tutorial Site\Services folder.

      the bsae url property should point to the SVC file:
      this._baseURL = “Services/TutorialService.svc/”;

      you should find everything there :)

  5. I successful, but with the following changes:
    1. type: “POST”, instead of “GET” -> any comment?
    2. success: fnSuccess, -> the “wrap the Success handler with my own” does not works.

  6. Yoav Niran :
    Hi Yosi,
    Im not sure to which asmx youre referring to… the web service exposed in the download i provided in this article (http://www.mediafire.com/file/jutyzjrzm5m/ServiceProxy%20-%20Turotial%20Site.zip) has an svc file called: TutorialService.svc
    you can find it in the zip file: JTemplatesWCF – Tutorial Site\Services folder.
    the bsae url property should point to the SVC file:
    this._baseURL = “Services/TutorialService.svc/”;
    you should find everything there

    Thanks a lot Yoav, I successfully configure, in my case it is this._baseURL = “Service/WcaService.asmx/”;

    It works great, except he 2 issues I sent:
    1. type: “POST”, instead of “GET” -> any comment?
    2. success: fnSuccess, -> the “wrap the Success handler with my own” does not work, I use the change suggested by “Greg”, and it works fine.

    1. Hi Yosi,

      Regarding the need to change to POST rather than using GET. thats up to how you create your webservice and its methods. You need to allow GET operations and make sure you mark the method as expecting GET. In WCF thats done using the WebGet attribute in combination with the OperationContract attribute decorating the method of the service class.

      The code for this method is a bit out of date and uses an older version of jQuery. things have changed a bit since then with they way jQuery handles AJAX so Greg’s comment is very valid and useful. Ill try and put up a post showing the AJAX with a current jQuery version.

      thanks for the feedback.
      Yoav.

      1. Thanks a lot Yoav,
        Sorry I didn’t say what I think and should say before:

        it is a great article very very useful and helpful, especially to new web dev like me.

        Thanks a gain , well done.

  7. Wow! This blog looks just like my old one!

    It’s on a entirely different topic but it has pretty much the same page layout and design. Superb choice of colors!

  8. Hi,

    Im making use of the same feature. The change is that, I use Post instead of Get and the application i am working on is a portal application.

    Everytime i run the app, it gives me a error that it cannot find the resource file i.e. the asmx file which I have added.

    FYI, the asmx file is in the root of the project and the aspx file form which I am accessing the webservice is under the project in a folder like “content/abcd/xyz.aspx”.

    what shoudl be the URL like?

    1. Hi Jathin,

      How are you setting the URL? can you share that piece of code?

      Are you using it from javascript?

      Basically it should point to “/myservice.asmx” if its indeed at the root of the site.

      Yoav.

  9. $.ajax({
    type: “POST”,
    url: “./myservice.asmx/HelloWorld”,
    dataType: “xml”,
    data: “sName=” + newName,
    success: function (msg) { ajaxFinish(msg); },
    error: function (msg) { ajaxError(msg); }
    });

    This is the code I am using.

    URLs tried (ABC is the folder in the server in which the service is present and the web page from which I am accessing is present in ABC/Page/Content/page.aspx)

    url: “./myservice.asmx/HelloWorld”

    url: “/ABC/myservice.asmx/HelloWorld”

    url: “~/ABC/myservice.asmx/HelloWorld”

    url: “/portal/ABC/myservice.asmx/HelloWorld

    Every iteration it gave the same error “Resource not found” and pointed to the web service for check whether it is spelt correct.

    1. Hi,
      You mentioned that the ASMX is at the root of your project. Would it then be accessible simply from: “/myservice.asmx”?

  10. Your facebook like module is not working right, at least it isn’t on my end. Does not appear to work no matter what I do. Wanted to provide you with a like, but I can’t.
    I’m sorry.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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