Small JavaScript Goodies: WDDX

**Niheel** · Nov 25 '09, 07:12 AM

on this and the rest of the series, can you also include examples on how to use it:

you've got the description and the code, a quick example on how to call the functions and use them it and i think it would work out well

**Dormilich** · Jan 15 '10, 12:56 PM

I have updated the serializer (using a common method for Number, String and Boolean, as well as some cleanup in the type switch)

Code:

/**
 * WDDX Deserializer for Javascript
 * File: *.mod_wddx_des.js
 * Author: Bertold von Dormilich (Dormilich@netscape.net), 2009
 */

/**
 * formats a number to have leading zeros if the number length 
 * is smaller than num.
 *
 * @param (int)                 length of the final number string
 * @return (string)             number with leading zeroes
 */
Number.prototype.toDigits = function(num)
{
	var zahl = new String(this.valueOf());
	for (var i=zahl.length; i<num; i++) {
		zahl = "0" + zahl;
	}
	return zahl;
}

/**
 * returns the XML source code of an XML tag.
 *
 * @return (string)             source code of the element
 */
Element.prototype.getString = function()
{
	// lowercase the tag names
	var tag = this.tagName.toLowerCase();
	// fix dateTime & wddxPacket
	tag = ("datetime" == tag) ? "dateTime" : tag;
	tag = ("wddxpacket" == tag) ? "wddxPacket" : tag;
	// opening tag
	var str = "<" + tag;
	// attributes
	var atb = this.attributes;
	for (var l, i=0, l=atb.length; i<l; i++) {
		if (i in atb) {
			str += " " + atb[i].name + '="' + atb[i].value + '"';
		}
	}
	var cn  = this.childNodes;
	// if empty element
	if (0 == cn.length) {
		return str + "/>";
	} else {
		str += ">";
	}
	// loop through child nodes (text/cdata/elements)
	for (var l, i=0, l=cn.length; i<l; i++) {
		// text or cdata
		if (cn[i] instanceof Text) {
			if (String.trim) {
				str += cn[i].data.trim();
			} else {
				str += cn[i].data;
			}
		}
		// elements (recursive)
		else if (cn[i] instanceof Element) {
			str += cn[i].getString();
		}
	}
	// closing tag
	return str + "</" + tag + ">";
}

// http://www.webreference.com/programming/javascript/definitive2/index.html
/**
 * Create a new Document object. If no arguments are specified,
 * the document will be empty. If a root tag is specified, the document
 * will contain that single root tag. If the root tag has a namespace
 * prefix, the second argument must specify the URL that identifies the
 * namespace.
 *
 * @param (string) rootTagName  tag name of the root element
 * @param (string) namespaceURL root namespace
 * @return (Document)           XML document
 */
var XML = {};
XML.newDocument = function(rootTagName, namespaceURL) {
	if (!rootTagName) rootTagName = "";
	if (!namespaceURL) namespaceURL = "";
	if (document.implementation && document.implementation.createDocument) {
		// This is the W3C standard way to do it
		return document.implementation.createDocument(namespaceURL, rootTagName, null);
	} else { // This is the IE way to do it
		// Create an empty document as an ActiveX object
		// If there is no root element, this is all we have to do
		var doc = new ActiveXObject("MSXML2.DOMDocument");
		// If there is a root tag, initialize the document
		if (rootTagName) {
			// Look for a namespace prefix
			var prefix = "";
			var tagname = rootTagName;
			var p = rootTagName.indexOf(':');
			if (p != -1) {
				prefix = rootTagName.substring(0, p);
				tagname = rootTagName.substring(p+1);
			}
			// If we have a namespace, we must have a namespace prefix
			// If we don't have a namespace, we discard any prefix
			if (namespaceURL) {
				if (!prefix) prefix = "a0"; // What Firefox uses
			}
			else prefix = "";
			// Create the root element (with optional namespace) as a
			// string of text
			var text = "<" + (prefix?(prefix+":"):"") +	 tagname +
					(namespaceURL
					 ?(" xmlns:" + prefix + '="' + namespaceURL +'"')
					 :"") +
					"/>";
			// And parse that text into the empty document
			doc.loadXML(text);
		}
		return doc;
	}
};

/**
 * create a new (empty) WDDX document.
 *
 * @param (string) comment      comment text
 * @return (void)
 */
function WDDXDocument(comment)
{
	// create a new XML document 
	// <wddxPacket>
	var doc = XML.newDocument("wddxPacket");
	// <header>
	var hd  = document.createElement("header");
	if (comment) {
		var cm = document.createElement("comment");
		cm.appendChild(document.createTextNode(comment));
		hd.appendChild(cm);
	}
	// <data>
	this.data = document.createElement("data");
	this.root = doc.firstChild;
	this.root.appendChild(hd);
	this.root.appendChild(this.data);
	this.setTargetApplicationType();
}
/**
 * set flag for additional class names (if the type attribute is not used).
 * 
 * @param (string)              application identifyer
 * @return (void)
 */
WDDXDocument.prototype.setTargetApplicationType = function(app)
{
	var app = (new String(app)).toLowerCase().valueOf();
	this.applicationType = app || "javascript";
}

/**
 * return the WDDX document source code. 
 *
 * @return (string)             WDDX Document source code
 */
WDDXDocument.prototype.toString = function()
{
	var str = '<?xml version="1.0" encoding="UTF-8" ?>';
	return str + this.root.getString();
}

/**
 * public method to serialize a value and add it to the WDDX document.
 *
 * @param (mixed) value         the variable to serialize
 * @param (string) klasse       optional class name to use for deserialization
 * @return (void)
 */
WDDXDocument.prototype.serialize = function(value, klasse)
{
	var wsv = this.serializeValue(value, klasse);
	this.data.appendChild(wsv);
}

/**
 * internal method to serialize the passed value.
 *
 * @param (mixed) obj           variable to serialize
 * @param (string) klasse       optional class name to use for deserialization
 * @return (Element)            serialized value as WDDX element
 * @throws (Error)              invalid parameter type
 * @throws (Error)              parameter is an error instance
 */
WDDXDocument.prototype.serializeValue = function(obj, klasse)
{
	// DOM objects
	// deserialization would be a problem
	if (obj instanceof Node || obj instanceof NodeList || obj instanceof NamedNodeMap) {
		throw new Error("DOM elements cannot be serialized.");
	}
	// default JavaScript objects
	if (obj instanceof Array) {
		return this.serializeArray(obj);
	}
	if (obj instanceof Boolean || false === obj || true === obj) {
		return this.wddxElement("boolean", obj, true);
	}
	if (obj instanceof Date) {
		return this.serializeDate(obj);
	}
	if (obj instanceof Number || "number" == typeof obj) {
		return this.wddxElement("number", obj);
	}
	if (obj instanceof String || "string" == typeof obj) {
		return this.wddxElement("string", obj);
	}
	// 1)
	if (obj instanceof Function || obj instanceof RegExp || obj instanceof Error) {
		throw new Error("Unsupported Object Type.");
	}
	if (obj instanceof Object) {
		return this.serializeObject(obj, klasse);
	}
	// real primitives
	if (undefined === obj) {
		throw new Error("Undefined variables cannot be serialized.");
	}
	if (null === obj) {
		return document.createElement("null");
	}
	// 1) - does it make sense to de-/serialize these?
}

/**
 * serialize an Array.
 *
 * @param (Array) obj           array to serialize
 * @return (Element)            serialized value as WDDX element
 * @throws (TypeError)          obj not an array
 */
WDDXDocument.prototype.serializeArray = function(obj)
{
	if (!(obj instanceof Array)) {
		throw new TypeError("Supplied value is not an Array.");
	}
	var AE, LA, l = obj.length;
	// create <array> element
	LA = document.createAttribute("length");
	LA.value = l;
	AE = document.createElement("array");
	AE.setAttributeNode(LA);
	// create data elements of the array
	for (var i=0; i<l; i++) {
		try {
			AE.appendChild(this.serializeValue(obj[i]));
		} catch (e) {
			alert(e.message);
		}
	}
	return AE;
}

/**
 * serialize a Date.
 *
 * @param (Date) obj            date to serialize
 * @return (Element)            serialized value as WDDX element
 * @throws (TypeError)          obj not a date object
 */
WDDXDocument.prototype.serializeDate = function(obj)
{
	if (!(obj instanceof Date)) {
		throw new TypeError("Supplied value is not a Date.");
	}
	// get UTC date parts 
	var year = obj.getUTCFullYear();
	var mon  = obj.getUTCMonth() + 1;
	var day  = obj.getUTCDate().toDigits(2);
	var hour = obj.getUTCHours().toDigits(2);
	var min  = obj.getUTCMinutes().toDigits(2);
	var sec  = obj.getUTCSeconds().toDigits(2);
	var tzo  = obj.getTimezoneOffset();
	// yyyy-mm-ddThh:mm:ss+hh:mm
	var time = year + "-" + mon.toDigits(2) + "-" + day + "T" 
	         + hour + ":" + min + ":" + sec + (tzo > 0 ? "-" : "+") 
	         + Math.floor(Math.abs(tzo/60)).toDigits(2) + ":" + (tzo % 60).toDigits(2);
	var DE;
	// create <dateTime>
	DE = document.createElement("dateTime");
	DE.appendChild(document.createTextNode(time));
	return DE;
}

/**
 * serialize an Object. except null, undefined everything
 * can be converted into an object.
 *
 * @param (object) obj          object to serialize
 * @return (Element)            serialized value as WDDX element
 * @throws (TypeError)          object is NULL or UNDEFINED
 */
WDDXDocument.prototype.serializeObject = function(obj, klasse)
{
	if (null === obj || undefined === obj) {
		throw new TypeError("Supplied value is a Primitive.");
	}
	var OE, VE, NA, TA;
	// create <struct>
	TA = document.createAttribute("type");
	TA.value = obj.constructor.name;	// use native object for class name
	OE = document.createElement("struct");
	OE.setAttributeNode(TA);
	// create target application class name
	if ("javascript" != this.applicationType) {
		try {
			OE.appendChild(this.createClassName(klasse));
		} catch (e) {
			if (console) console.log(e.message);
			alert(e.message);
		}
	}
	for (var i in obj) {
		if (obj[i] instanceof Function) continue;
		try {
			// create <var>
			NA = document.createAttribute("name");
			NA.value = i;
			VE = document.createElement("var");
			VE.setAttributeNode(NA);
			// create serialized value
			VE.appendChild(this.serializeValue(obj[i]));
			OE.appendChild(VE);
		} catch (e) {
			if (console) console.log(e.message);
			alert(e.message);
		}
	}
	return OE;
}

/**
 * create a variable bearing the class name for the target application.
 *
 * @param (string) klasse       class name to serialize
 * @return (Element)            serialized class name (<var>)
 * @throws (Error)              unsupported appliction type
 */
WDDXDocument.prototype.createClassName = function(klasse)
{
	var app = document.createElement("var");
	var acn = document.createAttribute("name");
	if ("php" == this.applicationType) {
		acn.value = "php_class_name";
	} else {
		throw new Error("Unsupported Target Application Type.");
	}
	app.setAttributeNode(acn);
	app.appendChild(this.serializeString(new String(klasse)));
	return app;
}

/**
 * create a simple WDDX Element.
 *
 * @param (object) obj          object to serialize
 * @param (string) tagname      tag name of the WDDX Element
 * @param (bool) hasAttribute   object value to be saved in text or 
 *                              attribute node
 * @return (Element)            WDDX Element
 */
WDDXDocument.prototype.wddxElement = function(tagname, obj, hasAttribute)
{
	if (null === obj || undefined === obj) {
		throw new TypeError("Supplied value is a Primitive.");
	}
	var WE = document.createElement(tagname);
	if (hasAttribute) {
		var WA = document.createAttribute("value");
		WA.value = obj.toString();
		WE.setAttributeNode(WA);
	} else {
		WE.appendChild(document.createTextNode(obj.toString()));
	}
	return WE;
}

Small JavaScript Goodies: WDDX

Small JavaScript Goodies: WDDX

Comment

Comment