Ajax Data Transfer Format - UED(Url Encoded Data)

JSON has taken the award for the easiest method for transporting data when using Ajax. JSON is great to get data from the server side to the client side. What what about when you need to send data to the server side? Sure you can use JSON then - but the advantage of using JSON is lost. So I propose using another format for it - UED or URL Encoded Data. Its a very simple concept - and it has been in use for a long time - all I have done is create a function that will encode the data into this format. The basic concept behind this is that the most used data structures can be easily encoded into a URL. You can create variables, numerical arrays, associative arrays, multi-level arrays etc. using existing syntax. The best part is all the server side languages are capable of handling this format - so no parsing is needed.

ued_encode() will take an array as its argument and return the data encoded in UED format - as a string. You can use that string to send the data via POST or GET in the query part of the URL.

Demonstration

See ued_encode() in action.

A Brief Look at URL Syntax

scheme://host[:port]/path[?query]
http://www.google.com:80/search?q=hello

The syntax for the data part is given below

Variables (for the lack of a better name)

name=Binny
year=2007
quote=Hello%2C+World%21		- That is "Hello, World!" in a 'url encoded' format.

List(Numerical Arrays)

os[]=Windows
os[]=Linux
os[]=Mac

Arrays(Associate Arrays)

software[editor]=vi
software[audio]=xmms
software[video]=vlc

All these will be joined using '&' - that will be the final string. Note: Line wrapped at '»'

name=Binny&year=2007&quote=Hello%2C+World%21&os[]=Windows&os[]=Linux&os[]=Mac »
&software[editor]=vi&software[audio]=xmms&software[video]=vlc

No, it is not readable - it is not designed to be readable. But it is a very compact format. You can send this data to the server side by appending it to a url as the query(using the get method)

http://www.example.com/get_data.php?name=Binny&year=2007&quote=Hello%2C+World%21&»
os[]=Windows&os[]=Linux&os[]=Mac&software[editor]=vi&software[audio]=xmms&software[video]=vlc

But if you are a web developer, you already know that. You use it every day. Sometime you don't see it - the browser will automatically format the data from a form into this format and send it. In other occasions you have to create such URL by hand to send data to the server side in your Ajax(or non-Ajax) app.

So I have created a function that will encode the given data to this format.

Usage

//The JS Array format of the example given above
var arr = {
	'name':"Binny",
	'year':2007,
	'quote':"Hello, World!",
	'os':['Windows','Linux','Mac'],
	'software':{
		'editor':"vi",
		'audio':"xmms",
		'video':"vlc"
	}
}
var data = ued_encode(arr);

Code

ued_encode.js - <1 KB


//ued_encode() will take an array as its argument and return the data encoded in UED format - as a string.
//http://www.openjs.com/scripts/data/ued_url_encoded_data/
function ued_encode(arr,current_index) {
	var query = ""
	if(typeof current_index=='undefined') current_index = '';

	if(typeof(arr) == 'object') {
		var params = new Array();
		for(key in arr) {
			var data = arr[key];
			var key_value = key;
			if(current_index) {
				key_value = current_index+"["+key+"]"
			}

			if(typeof(data) == 'object') {
				if(data.length) { //List
					for(var i=0;i<data.length; i++) {
						params.push(key_value+"[]="+ued_encode(data[i],key_value)); //:RECURSION:
					}
				} else { //Associative array
					params.push(ued_encode(data,key_value)); //:RECURSION:
				}
			} else { //String or Number
				params.push(key_value+"="+encodeURIComponent(data));
			}
		}
		query = params.join("&");
	} else {
		query = encodeURIComponent(arr);
	}

	return query;
}

License

BSD License

blog comments powered by Disqus