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

Comments

Anonymous at 14 Mar, 2007 01:52
"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."


Hmm, since JSON entities are valid Python objects,
the back-end receive/run process on a Python based
system, goes like this:

receive
run

But, I guess there's a chance you're not coding in
Python on the back end. ;)


Reply to this.
Anonymous at 16 Mar, 2007 01:45
That looks a little scary to me. Does Python have some security feature to make it safe?
Reply to this.
David Golightly at 08 Jun, 2007 04:57
Relatively. Unlike JavaScript, JSON-encoded strings/objects are purely data types and do not expose executable code. Python has data structures that map pretty nicely onto JavaScript's. However, as always, you want to be safe and use a parser like simplejson (http://undefined.org/python/#simplejson) instead of simply "eval"'ing the client response!

Sending data out, however, is what's especially easy about Python - you don't really need to do much more than send out str(my_dict).
Reply to this.
Anonymous at 16 Mar, 2007 02:20
Strictly speaking, I think square brackets are only allowed in URIs when wrapping IP addresses, so this isn't standard (although I haven't checked). You also should probably be escaping the keys in the URI, in case someone does something silly like: ued_encode({"a=b":1,"a[b":2,"a&b":3}).

Also, I don't think you're dealing with array recursion properly. ued_encode({a: [{a:1,b:1}]}) returns a[]=a[a]=1&a[b]=1. But getting that case right is tricky.

Personally, if I was designing a URI scheme, I'd go for something like:

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

That obviously looses some type information, but since you have to deal with that in forms normally, that shouldn't be too much of a problem. And you'd loose it for empty arrays anyway. And I'm not sure how to deal with data nested in arrays - maybe just use the index? ie. for.1.bar=x.

The other thing I'd do is add an optional parameter to alias the keys, something like:

ued_encode(foo, {name: "n", quote: "q", os: "o", "software": "s", "software.editor": "e"});

http://www.example.com/get_data.php?n=Binny&year=2007&q=Hello%2C+World%21&»
o=Windows&o=Linux&o=Mac&e=vi&s.audio=xmms&s.video=vlc

or similar for however keys are encoded.

And if I was feeling really keen, the alias object could also have members with function values that would take the key and value and return values for the URI (eg. to encode dates).

And perhaps there could also be some way of giving an object a default encoding function (i.e. a 'toUriValue' member?).

And possibly the moon on a stick. Sorry if I sound a bit demanding, it's just that I think that this is a good idea and am throwing in my thoughts. Feel free to ignore whatever you disagree with.
Reply to this.
Michal Till at 20 Apr, 2007 04:44
Is this reliable as the URL-ed object becomes bigger and bigger?
Reply to this.
Binny V A at 20 Apr, 2007 10:14
Some versions of IE has a 486 char limit for URLs - I am not sure whether it is applicable in this situation.
Reply to this.
varsity at 09 Aug, 2007 06:47
too complex for me...i think
Reply to this.
O.g at 14 Sep, 2007 02:10
Nice, work!
the function above should work nicely, I have used the other way, document.writing with
a onload to pass the information which is document.writen and than the server side script picks this up, I have had problems with passing url's containing vars in iframes
Reply to this.
Anonymous at 27 Jul, 2008 03:14
Is this reliable as the URL-ed object becomes bigger and bigger?
Reply to this.
Anonymous at 27 Jul, 2008 03:17
the function above should work nicely, I have used the other way, document.writing with
a onload to pass the information which is document.writen and than the server side script picks this up, I have had problems with passing url's containing vars in iframes
Reply to this.
?JockeR at 06 Jan, 2009 09:56
ok...
I was thinking about hacking Travian server ,so I need someone who will do this with me...It's simple,I 've done this before,so this "encoding" works fine

PM on this email : slashy-cs@hotmail.com
Reply to this.
Tatil at 06 Jun, 2009 11:20
I was thinking about hacking Travian server ,so I need someone who will do this with me...It's simple,I 've done this before,so this "encoding" works fine Thank you ı am pm
Reply to this.
tatil hotel at 01 Jul, 2009 01:51
a onload to pass the information which is document.writen and than the server side script picks this up, I have had problems with passing url's containing vars in iframes
Reply to this.
tatil yerleri at 01 Jul, 2009 01:51
a onload to pass the information which is document.writen and than the server side script picks this up, I have had problems with passing url's containing vars in iframes
Reply to this.
haberler at 01 Jul, 2009 01:52
the function above should work nicely, I have used the other way, document.writing with
Reply to this.
tatil yerleri at 01 Jul, 2009 01:53
a onload to pass the information which is document.writen and than the server side script picks this up, I have had problems with passing url's containing vars in iframes
Reply to this.
haberler at 01 Jul, 2009 01:53
I was thinking about hacking Travian server ,so I need someone who will do this with me...It's simple,I 've done this before,so this "encoding" works fine
Reply to this.
Oteller at 01 Jul, 2009 01:54
a onload to pass the information which is document.writen and than the server side script picks this up, I have had problems with passing url's containing vars in iframes
Reply to this.
konteyner at 01 Jul, 2009 01:55
the function above should work nicely, I have used the other way, document.writing with
Reply to this.
Comment

Please dont enter you comments in this form - this is a fake form to confuse spamming bots. The next form is the real one.




Comment




Comment Formating : HTML tags a, strong, em, b, i, code, pre, p and br allowed. Other tags will be shown as code(< will become &lt;). Urls, Line breaks will be auto-formated.