HttpQueryStringBuilder Using JavaScript

Introduction

This code may be considered as a utility tool to its users for creating, modifying, accessing http query strings with GET/POST very easily using JavaScript from client side.

Background

Now a days, when working with raw Ajax, we need to create and manipulate the query strings at the client side using JavaScript and send it to the server. Sometimes, specially when relatively large data are transmitted in query string it may get painful to modify one of the data once added to the list and so on.

To help this task, this utility should be very helpful to its users. Also its simple to use as it is developed using Object Oriented JavaScript code.

Using the code

The code contains two segments

1. The Utility Routine.

2. The Test method demonstrating how to make use of the Utility Routine.

// The class for Creating HTTPQueryString

function HttpQueryStringBuilder()
{
    //Holds the Url

    this.Url = '';    
    //Holds the Array of Key Value Pairs

    this.Pairs = new Array();    
    //The method for getting the final query string

    HttpQueryStringBuilder.prototype.GetFullString = function()
    {
        var queryString = (this.Url.length > 0) ? this.Url + "?" : '';
        for(var key in this.Pairs)
        {
            queryString += escape(key) + "=" + escape(this.Pairs[key]) + "&";
        }
        return queryString.substring(0, queryString.length - 1);
    }
}

////////////////////////////////////////

//

// The Test() Method is added for demonstration purpose only

// Delete this method when you are done with testing

//

////////////////////////////////////////

function Test()
{
    //Define the Object

    var builder = new HttpQueryStringBuilder();
    
    //Supply values

    builder.Url = "http://www.google.com"
    //Pairs[Key] = value (Dont worry about url encoding, it will be handled automatically)

    builder.Pairs["FirstName"] = "S M";
    builder.Pairs["LastName"] = "Sohan";
    builder.Pairs["EMail"] = "sohan39@gmail.com";
    
    //Done with insertions! show it! 

    alert(builder.GetFullString());    
    
    //Make some changes

    builder.Pairs["FirstName"] = "Sheikh Mohammad";
    builder.Pairs["EMail"] = "sohan39@yahoo.com";
    
    //Done with modifications! show it again! 

    alert(builder.GetFullString());    
}

To use the supplied Test code you may have a markup like this in one of your pages

<script type="text/javascript" src="HttpQueryStringBuilder.js"></script>
<input type="button" value="Button" onClick="Test()" /> 

History