We’ve already seen quite a few ways of performing AJAX calls: web pages, HTTP Handlers and Page Methods. Today we’ll see how to request data from the server using ASP.NET Web Services.

Web Services are a very general model for building applications, and can be implemented for any operation system that supports communication over the Internet. A Web Service is some programmable application logic accessible via standard Web protocols. It is often referred to as Web APIs as well, since they are a set of methods that provide some functionality through remote method calls. It is a way of offering some of your functionality to all of the internet. But, of course, some kind of restrictions and security can be built into your web services, if that’s what you wish.

As it turns out, the previous article I posted showing how to use Page Methods was also a Web Service: Web Methods are the building blocks of Web Services (a Web Service has many different Web Methods). But it was a very small and simple implementation, intended to return simple data to a small script placed in that same web page. The example we’re going to see follows the same concept, but in a larger way. We’re going to see the basics of how to implement a full-blown Web Service that can be accessed from anywhere on the internet.

This is very handful if you want to develop a collection of methods to be called from anywhere in your application. Imagine you’d like to know in which moment the user logged in to the system: you could write this server method and then make it public as a web service. This way, you’ll have this server functionality available through an AJAX call from anywhere in the application.

Ok, enough theory, now let’s get our hands dirty. Get to the .aspx part of the web page in which you wish to implement your ajax call, and write the HTML code we’ve been using in all our examples:

<body>
    <form id="form1" runat="server">
      <h2>AJAX call test page</h2>
      <button type="button" onclick='ExecuteAJAXCall()'>Get server time</button>
      <br /><br />
      <div id="DataContainer" ></div>
    </form>
</body>

We need a button to perform the AJAX call, and an empty DIV to hold the data retrieved from the server. Now, the Javascript code:

<script type="text/javascript">
    function ExecuteAJAXCall() {
        $.ajax({
            type: "POST",
            url: "AJAXCalls.asmx/GetServerTime",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            success: Callback_AJAXCall
        });
    };

    function Callback_AJAXCall(data) {
        document.getElementById("DataContainer").innerHTML = "The time at the server is: " + data.d;
    };
</script>

Note that the first function is invoked when the button is pressed. This function is in charge of performing the AJAX call by using the jQuery framework. This time, this function has changed a bit from other examples. Web Services calls require more parameters to set the communication between client and server up. The content type must be declared as “application/json; charset=utf-8”. And, as with the previous Page Method example, server procedures are called using the syntax [page name] + “/” + [method name].

When the AJAX call returns, we have the usual function that takes care of painting the result on the screen. Note how we need to use the d property to access the data this time.

Now, we need to write the Web Service. The easiest way is to right-click on your project and add a new item from there. Select Web Service, and you’ll get a skeleton from which you can implement the functionality you wish in your web service. For our example, we’ll write this piece of code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace WebServiceAJAXCall
{
    /// <summary>
    /// Summary description for AJAXCalls
    /// </summary>
    [WebService(Namespace = "http://www.undisciplinedbytes.com/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [System.Web.Script.Services.ScriptService]
    public class AJAXCalls : System.Web.Services.WebService
    {

        [WebMethod] public string GetServerTime()
        {
            return DateTime.Now.ToString();
        }
    }
}

As you can see, we’ve only written the code required to return the server date and time. If you compare this example to the previous one where I explained how to implement AJAX calls with page methods, you can see that this is essentially the same thing. It all comes down to using the WebMethod attribute from the System.Web.Services library. However, this example that we’re seeing today is more complete, as it is implemented using a full-blown web service. The objective of this article is not to fully explain ASP.NET Web Services (I’ll leave that to some other post I have in mind), but to explain the very basics to be able to implement and AJAX call using them, so I won’t bother about diving into the details. But keep in mind that Web Services are much more powerful than this, and that their intention aim much higher than simple AJAX calls.

Here’s the Visual Studio project for you to play with:

WebServiceAJAXCall.zip

Related posts:

  1. AJAX call using an ASP.NET Page Method
  2. AJAX call using an ASP.NET web page
  3. AJAX call using an ASP.NET HTTP Handler
  4. Different ways to use AJAX in ASP.NET
  5. HTML 5 C# Web Sockets server and ASP.NET client implementation