jQuery AJAX and HttpHandlers in ASP.NET

https://www.codeproject.com/Articles/170882/jQuery-AJAX-and-HttpHandlers-in-ASP-NET

Introduction

In this article, we will see how we can make use of the jQuery library to make AJAX calls in ASP.NET with the help of HTTPHandlers. We will also see the use of JSON (JavaScript Object Notation) which is a format describing name/value pairs in a structured manner.

Asynchronous JavaScript and XML (AJAX) is a method which we can use to exchange data with the server without reloading the complete page.

jQuery is a JavaScript library which makes it easier to manipulate and navigate DOM elements in a web page. It also helps in implementing AJAX in rapid web application development. Currently, we have Intellisense support for jQuery in Visual Studio 2008/2010.

HTTPHandler is a process which returns data when its URL is called. The returned data can be anything from a simple string to data formats like JSON or XML.

References: jQuery, MSDN

Prerequisite

Download the latest version of jQuery from the jQuery site (http://jquery.com/). In Visual Studio 2010, it is added by default when a new web application is created.

Example: Making a Simple AJAX Call

In this example, we will make a simple AJAX call with the help of the jQuery.ajax API to an HTTPHandler.

The response from the HTTPHandler will be the JSON response which is then updated in the web page.

JavaScript Object notation (JSON) is a format of key/value pairs to store data.

It’s easy to consume in JavaScript and compact than XML. So let’s start with creating a handler page.

public void ProcessRequest (HttpContext context) {
    string method = context.Request.QueryString["MethodName"].ToString();
    context.Response.ContentType = "text/json";
    switch (method)
    {
        case "GetData" :
            context.Response.Write(GetData());
            break;
    }
}

protected string GetData()
{
    return (@"{""FirstName"":""Ravi"", ""LastName"":""Baghel"", 
               ""Blog"":""ravibaghel.wordpress.com""}");
}

As you can see, we are simply putting a response of JSON type with sample data.

In order to demonstrate passing a parameter to a handler, I have used the querystring methodname which will simply switch to the method you want to execute.