In this article I will explain with an example, how to use FormData with XmlHttpRequest (XHR) using JavaScript in ASP.Net using C# and VB.Net.
 
 

Adding Generic Handler

You will need to add a new Generic Handler (ASHX) file using Add New Item Dialog of Visual Studio as shown below.
Using FormData with XmlHttpRequest (XHR) using JavaScript in ASP.Net
 
 

Building the Generic Handler for fetching the values

The following Generic Handler gets called, when AJAX call is made using XmlHttpRequest (XHR).
Inside the ProcessRequest method, the value of the Name and Age are read from Request.Form collection.
C#
<%@ WebHandler Language="C#" Class="Handler" %>
 
using System;
using System.Web;
 
public class Handler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        string name = context.Request.Form["name"];
        string age = context.Request.Form["age"];
    }
 
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}
 
VB.Net
<%@ WebHandler Language="VB" Class="Handler" %>
 
Imports System
Imports System.Web
 
Public Class Handler : Implements IHttpHandler
    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Dim name As String = context.Request.Form("name")
        Dim age As String = context.Request.Form("age")
    End Sub
 
    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property
End Class
 
 

HTML Markup

The following HTML Markup consists of:
TextBox – For entering Name and Age.
Button – For calling the Generic Handler.
The Button has been assigned with an OnClientClick event handler.
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>Name:</td>
        <td><asp:TextBox ID="txtName" runat="server" /></td>
    </tr>
    <tr>
        <td>Age:</td>
        <td><asp:TextBox ID="txtAge" runat="server" /></td>
    </tr>
    <tr>
        <td></td>
        <td><asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClientClick="return Submit()" /></td>
    </tr>
</table>
 
 

Sending FormData to Generic Handler with XmlHttpRequest (XHR) using JavaScript

Inside the JavaScript Submit function, first an object of FormData is created.
Then, the value of Name and Age are fetched from their respective TextBoxes and set into the FormData object using append method.
After that, a check is performed whether the browser supports the XMLHttpRequest, if it supports then the new XMLHttpRequest object will be created.
Another check is performed for older versions on browser like Internet Explorer if it supports ActiveXObject, if it supports then the new Microsoft.XMLHTTP ActiveXObject object will be created.
Finally, a request variable is checked for NULL it is not NULL then the AJAX call is made to the Generic Handler using JavaScript XmlHttpRequest (XHR) and FormData is sent using send method.
<script type="text/javascript">
    function Submit() {
        var formData = new FormData();
        formData.append("name", document.getElementById("<%=txtName.ClientID%>").value);
        formData.append("age", document.getElementById("<%=txtAge.ClientID%>").value);
 
        var request;
        if (window.XMLHttpRequest) {
            //New browsers.
            request = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            //Old IE Browsers.
            request = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (request != null) {
            var url = "Handler.ashx";
            request.open("POST", url, false);
            request.send(formData);
        }
        return false;
    }
</script>
 
 

Screenshots

The Form

Using FormData with XmlHttpRequest (XHR) using JavaScript in ASP.Net
 

Values received in generic handler

Using FormData with XmlHttpRequest (XHR) using JavaScript in ASP.Net
 
 

Downloads

Download Code