Today’s web applications are unthinkable without AJAX techniques. These techniques provide an improved user experience, and tighten the gap between traditional desktop applications and web applications. This means that mastering AJAX technologies is a must for anyone who’s doing serious web application development. In this article I’ll explain the basics of AJAX, and I will show how to program some AJAX calls using ASP.NET technology.

First things first: the basics

AJAX is a set of web application development techniques used to create RIA (Rich Internet Applications). These techniques are used in the web browser at the client’s computer, while an asynchronous communication with the web server is held in the background. Thus, it is possible to make changes in the pages without the need to reload them, increasing interactivity, speed and usability in these applications, compared to traditional click-and-wait web pages.

An AJAX call is nothing more than a request to the server for some data. It is the same thing as when you type in a web page address in your browser’s address box and hit Enter: your browser requests the server the HTML code representing that webpage. The only difference is that with an AJAX call, all this process takes place in the background, without the user’s knowledge. It is performed programmatically, using JavaScript.

AJAX stands for Asynchronous JavaScript and XML, which means that in its first conception XML was used to transmit data from the server to the client. But XML is not used much anymore, JSON is the preferred notation for this task. JSON is a lighter notation as it uses less characters, and follows the natural syntax of the JavaScript language. This means that, once you’ve received the data from the server in your JavaScript code, it is much simpler and faster to process it if it’s in JSON notation.

Let’s see a couple of examples to understand it better. This would be XML:

<Person firstName="John" lastName="Smith">
    <address>
      <streetAddress>21 2nd Street</streetAddress>
      <city>New York</city>
      <state>NY</state>
      <postalCode>10021</postalCode>
    </address>
    <phoneNumber type="home">212 555-1234</phoneNumber>
    <phoneNumber type="fax">646 555-4567</phoneNumber>
    <newSubscription>false</newSubscription>
    <companyName />
</Person>

And this would be the same data transmitted in JSON notation:

{
       "firstName": "John",
       "lastName": "Smith",
       "address": {
           "streetAddress": "21 2nd Street",
           "city": "New York",
           "state": "NY",
           "postalCode": 10021
       },
       "phoneNumbers": [
           { "type": "home", "number": "212 555-1234" },
           { "type": "fax", "number": "646 555-4567" }
       ],
       "newSubscription": false,
       "companyName": null
}

As you can see XML is lengthier to transmit. Besides, as it is not natural to JavaScript, the data must be interpreted and translated to a JavaScript object once it gets to the client, whereas JSON must not. Don’t worry though, you won’t have to deal with converting data to JSON and back, all this is done automatically.

Different ways of requesting data from the web server

There are several different techniques used to retrieve data from the server using ASP.NET technology. The most common ones are:

  • URL. This is the most used technique to provide data through AJAX. Most JavaScript plugins are designed to work this way, so it can be considered the most important technique as well. At the server, this type of request can be processed using two different approaches:
    • The request is processed as if it was a regular web page
    • The request is processed through an HTTP Handler
  • Page method. Server methods can be easily called just by using an attribute.
  • Web service. Web services can be consumed from JavaScript, providing for an easy way to request data to the server.
  • Web sockets. Not quite AJAX itself, web sockets are here to revolutionize the logic behind traditional client-server communication. Web sockets bring full-duplex and server-initiated communications, two techniques not possible in the web till now. They belong to the new HTML5 specification, and as such must be treated, meaning there’s not much support for it yet.

We’ll be taking a look at each of these techniques. Stay tuned!

Related posts:

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