Click here to Skip to main content
11,437,397 members (34,363 online)
Click here to Skip to main content

HttpQueryStringBuilder Using JavaScript

, 26 Jun 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
This is a utility class for easily creating, modifying, and using HTTP querystrings from JavaScript.

Introduction

This code may be considered as a utility tool for creating, modifying, accessing HTTP querystrings with GET/POST, very easily using JavaScript from the client side.

Background

Nowadays, 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 querystrings, it may get painful to modify one of the data items once added to the list, and so on.

To help this task, this utility should be very helpful to its users. Also, it is 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 need 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

  • June 30, 2007: Edited for the first time, and submitted as unedited post to CodeProject.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

S. M. SOHAN
Other ThoughtWorks
Canada Canada
Consultant
Read my blog at http://smsohan.blogspot.com
Follow on   Twitter

Comments and Discussions

 
GeneralDon't use escape(); Pin
Martin Nemitz3-Jul-07 23:33
memberMartin Nemitz3-Jul-07 23:33 
GeneralReinventing the wheel... Pin
Antonello Provenzano26-Jun-07 22:53
memberAntonello Provenzano26-Jun-07 22:53 
GeneralRe: Reinventing the wheel... Pin
S. M. SOHAN27-Jun-07 1:09
memberS. M. SOHAN27-Jun-07 1:09 
GeneralRe: Reinventing the wheel... Pin
Vasudevan Deepak Kumar27-Jun-07 5:06
memberVasudevan Deepak Kumar27-Jun-07 5:06 
GeneralRe: Reinventing the wheel... Pin
inetfly12327-Jun-07 6:22
memberinetfly12327-Jun-07 6:22 
GeneralRequest.QueryString Library in JavaScript Pin
Vasudevan Deepak Kumar26-Jun-07 22:37
memberVasudevan Deepak Kumar26-Jun-07 22:37 
GeneralRe: Request.QueryString Library in JavaScript Pin
S. M. SOHAN27-Jun-07 1:11
memberS. M. SOHAN27-Jun-07 1:11 
GeneralRe: Request.QueryString Library in JavaScript Pin
Vasudevan Deepak Kumar27-Jun-07 5:05
memberVasudevan Deepak Kumar27-Jun-07 5:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150428.2 | Last Updated 27 Jun 2007
Article Copyright 2007 by S. M. SOHAN
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid