We already saw what an AJAX call is and the different types there are. Today we’re going to see how to perform an AJAX call using a regular web page at the server. The page will be the connection between the client’s web browser and the server. It will take care of performing the operations at the server (let it be some kind of processes or calculations, or just a regular database access).

I’ll be using jQuery in this example. jQuery is a superb Javascript framework, and is the one I use the most. If you don’t know what it is yet, then the first thing you should do is getting acquainted with it. This JavaScript framework has many convenient functions to make an AJAX call. These functions hide much of the complexity of an AJAX call: you can forget about the XMLHttpRequest object if you wish, and only worry about what to do with the data once you get it back from the server.

So, in order to perform an AJAX request, we’ll follow these steps:

  1. We’ll perform an AJAX call from the client, using Javascript. As I said before, we’ll be using jQuery. It makes the process much easier.
  2. We’ll construct some way for the server to receive the request: in this example we’ll use a regular .aspx web page.
  3. We’ll fetch the data to be returned to the client. This example is just a proof of concept, so we’ll leave this task to the reader. We’ll just return the server time.
  4. We’ll convert that data into JSON notation.
  5. Once the data gets back to the client, the jQuery library takes care of the conversion of the string received from the server to a Javascript object.
  6. In this point we’ll have the data available to us. We’ll do something with it to show it on screen, for example.

Ok, we already have the theory covered. Now, let’s get to work! Start a new Visual Studio project, and get to the newly created page. On the C# codebehind of the new page we won’t be changing anything. Leave everything by default. We’ll be doing our work in the .aspx part. First, we’ll need a little bit of HTML to draw our page:

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

This is a very simple page. We’ll just have a heading, a button to perform the AJAX call, and an empty DIV to hold the data retrieved from the server.

Now we need some actual code to make the AJAX call:

<script type="text/javascript">

    function ExecuteAJAXCall() {
        $.ajax({
            url: "AJAXCall.aspx",
            dataType: 'json',
            success: Callback_AJAXCall
        });
    };

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

</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. We’re passing three parameters to the function: the URL of the page that will get called, they type of data we’re expecting back (JSON in this case) and the javascript function to execute once the data gets back to the client. The jQuery ajax function has many more parameters, but we didn’t need them this time since the example is not very complicated.

The function called when the data is returned is very simple: its only purpose is to take the string returned from the server and write it in the container we previously created for this purpose. Note that the parameter it receives, data, is already a javascript object. The AJAX call returned a simple string from the server, but the jQuery function is smart enough to convert that string to a javascript object and pass it to the function we indicated.

Ok, so now that we have the test page in place, let’s deal with the AJAX call server-side. The AJAXCall.aspx page is the link between the client web browser and the server. Here we’ll process everything we need and we’ll return a string to the client with the data requested.

Here is the C# codebehind from the AJAXCall.aspx page:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;

namespace jQueryAJAXCall
{
    public partial class AJAXCall : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e) // Returns the server current date and time
        {
            JavaScriptSerializer JSSerializer = new JavaScriptSerializer();
            string CurrentDate = DateTime.Now.ToString();
            Response.CacheControl = "no-cache";
            Response.Write(JSSerializer.Serialize(CurrentDate));
        }
    }
}

Note the System.Web.Script.Serialization class we’re importing. This class takes care of converting the object we want to return to JSON format.

This page is very simple: it just takes the current date and time from the server, converts it to JSON format and returns it. Nothing more is needed. Simple enough, right? Be aware that this page must not return anything else than the JSON string: if you’re using Visual Studio be careful when creating this new webpage, as VS adds a bunch of HTML code by default in the .aspx page. Erase all HTML code, otherwise your javascript won’t be able to understand the data sent back.

Note the line in which we deactivate the cache. If you don’t do this, the AJAX call will always seem to return the same data, as the web browser will have kept a copy of it the first time it was executed. Most AJAX calls need the cache disabled in order to work properly.

So this is it! Nothing else is required. Donwload the Visual Studio project and play with it as much as you want:

jQueryAJAXCall.zip

Related posts:

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