:: dAsync Development » dyersWeb.com

Welcome! This page is dedicated to the development of my dAsync class. This project is the culmination of my reseach on both asynchronous scripting and the JavaScript object-oriented programming model. The “dAsync” (pronounced day+sink) logo above represents dyersWeb and Asynchronous scripting. Ajax is a rather trendy term being thrown about, and I simply prefer to differentiate from it, along with some of its misconceptions.

For whom is this intended?

At this time, I have yet to provide the workarounds to track browser state between asynchronous requests. As such, this class, and its features are primarily aimed at Web developers who have an understanding of the encapsulated features being simplified by the class, AND WHO CAN EXPAND TO INCLUDE ANY FEATURES NOT YET INCORPORATED, SO PLEASE, NO EMAILS TELLING ME THAT I BREAK THE BACK BUTTON! This class is NOT intended to make asynchronous scripting (Ajax) easy for the beginner. For now, my lengthy comments about each method and property are the only sources for documentation on how to use the class. I will be writing more thorough documentation, which will be provided on this site.

Please note the limitations of this class. This was NOT intended to be a viable alternative to backbase or dojo. At this time, I intend to keep the project open source, and do not intend to change that any time soon.

This source code is licensed under the terms and conditions set forth by the General Public License (GPL). In short, the code is provided as-is and the author will not be held liable for any mishaps.

dAsync Class Examples

Source

The source is a ZIP file containing the dAsync class and examples. In addition, a MySQL server configuration PHP script is provided to set up a table on the database of your choosing. The script will make use of your information to create a config file that will be available to the suggest example script. The script will do nothing to harm your MySQL server, and, if you like, you can run the script with only SELECT, CREATE and INSERT privileges.

If you want the absolute latest of the class, you can check it out from the text box below.

Contacting the Author

The best way to reach me is dyer85-[at]-gmail-[dot]-com. I welcome any questions you may have.

// Copyright (C) Curtis Dyer 2006.
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License,
// version 2, as published by the Free Software Foundation.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.

/**
 * dasync.js
 *
 * @desc	Object-oriented layer for simplifying asynchronous scripting.
 * @author	Curtis Dyer (owner of dyersWeb)
 * @version	1.0.5 ALPHA
 *
 * NOTE:
 * If an argument name is surrounded by [] brackets, that means it's optional.
 */

//// GLOBAL vars
var requestCount = 0; // Number of asynchronous requests

/**
 * Extend string object to escape common HTML entities.
 * !!NOTE!! EVERY ATTEMPT SHOULD BE MADE TO ESCAPE DATA
 * SERVER-SIDE.
 */
String.prototype.htmlEscape = function(newlines, spaces) {
	if ( typeof this.replace == "undefined" )
		return this;
	
	// Give string value a temporary variable
	var temp = this;
	
	// Default args
	spaces = typeof spaces == "undefined" ? 0 : 1;
	
	// Use regex to replace HTML entities
	temp = temp.replace(/&/g, "&amp;");
	temp = temp.replace(/</g, "&lt;");
	temp = temp.replace(/>/g, "&gt;");
	temp = temp.replace(/"/g, "&quot;");
	
	if ( spaces == 1 )
		temp = temp.replace(/ /g, "&nbsp;");
	
	// Handle newlines
	switch ( newlines ) {
		case 1: // Convert \n's to <br>s
			temp = temp.replace(/\n/g, "<br>");
		break;
		case 2: // Convert \n's to <br />s
			temp = temp.replace(/\n/g, "<br />");
		break;
	}
	
	return temp; // Return input
};

/**
 * Constructor
 * Acquire the XMLHttpRequest object.
 *
 * @return	void
 */
function dAsync() {
	// Amount of Ajax requests
	this.requestCount = 0;
	
	if ( window.XMLHttpRequest ) // Native JavaScript object
		this.requestObject = new XMLHttpRequest();
	else {
		// Otherwise, probe available ActiveX objects (IE only)
		try {
			this.requestObject = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e) {
			try {
				this.requestObject = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e2) {
				this.requestObject = false;
			}
		}
	}
}

/**
 * Returns true if we're on the first request
 */
dAsync.prototype.firstRequest = function() {
	if ( requestCount == 0 )
		return true;
	else
		return false;
};

/**
 * Send custom headers with request
 *
 * @param Object|String requestHeaders	Hash or string. For multiple headers in string,
 					separate each field:value
					pair with a | (pipe; no spaces before or after pipe)
 * @return	Boolean	True on success, false on failure
 */
dAsync.prototype.requestSetHeaders = function(requestHeaders) {
	if ( this.requestObject ) {
		if ( typeof requestHeaders == "string" ) {
			var pairs = new Array(), i;
			if ( requestHeaders.indexOf('|') != -1 ) {
				var headers = new Array();
				headers = requestHeaders.split('|');
				for ( i = 0; i < headers.length; i++ ) {
					pairs = headers[i].split(/:\s?/);
					this.requestObject.setRequestHeader(pairs[0], pairs[1]);
				}
			}
			else {
				pairs = requestHeaders.split(/:\s?/);
				this.requestObject.setRequestHeader(pairs[0], pairs[1]);
			}
		}
		else if ( requestHeaders && typeof requestHeaders == "object" ) {		
			var key;
			for ( key in requestHeaders ) {
				this.requestObject.setRequestHeader(key, requestHeaders[key]);
			}
		}
		else
			return false;
	}
	else {
		return false;
	}
	
	return true;
};

/**
 * Send a request to a resource
 *
 * @param String uri		Location of resource.
 * @param Function handler	Callback function to handle response.
 * @param Mixed [body]		Body of the request. Should be in name=value
				pair style or a hash. Explicitly pass null if
				you really don't want to pass anything to URI
 * @param String [method]	Method of request, such as POST, GET, or HEAD
				(Default is GET).
 * @param String [mime]		Returned MIME type of resource being requested.
				NOTE: Leave on default text/html most of the time
 * @param Boolean [asyn]	Asynchronous requests: true; synchronous: false
 * @param Object [addHeaders]	Expects same argument type as requestSetHeaders
				NOTE: DO NOT SET CONTENT-TYPE HERE
 *
 * @return	Boolean 	true: success; false: failure
 */
dAsync.prototype.requestSend = function(uri, handler, body, method, mime, asyn, addHeaders) {
	/**
	 * Default argument values
	 */
	asyn = asyn || true;
	mime = mime || "text/html";
	addHeaders = typeof addHeaders == "undefined" ? false : addHeaders;

	/**
	 * Declared local vars
	 */
	// Random value to append to URI to prevent IE caching
	var randKey = "urikey="+Math.floor(Math.random()*656536);
	var requestStr = ''; // Body of request
	var contentType = "Content-Type: "+mime; // Headers to send with request
	var noCaseMethod = method ? method.toLowerCase() : "get"; // Make method all lowercase
	var i,argPair = new Array(); // Will hold array of body, split from &
	var keyVal = new Array(); // body split from =

	// Prevent TRACE type requests
	noCaseMethod = noCaseMethod == "trace" ? "get" : noCaseMethod;
	
	// Make Content-Type application/x-www-form-urlencoded for POST
	if ( noCaseMethod == "post" )
		var contentType = "Content-Type: application/x-www-form-urlencoded";

	if ( uri.indexOf('?') != -1 )
		uri = uri.split('?')[0]; // Get rid of ? appended
	
	/**
	 * Form the request
	 */
	if ( this.requestObject ) {
		//// Handle body
		if ( typeof body == "object" && body != null ) {
			for ( var key in body ) {
				if ( noCaseMethod == "get" )
					requestStr += escape(key) + '=' + escape(body[key]) + '&';
				else
					requestStr += key + '=' + body[key] + '&';
			}
		}
		else if ( typeof body == "string" ) {
			if ( noCaseMethod == "get" ) {
				argPair = body.split('&');
				for ( i = 0; i < argPair.length; i++ ) {
					keyVal = argPair[i].split('=');
					
					requestStr += escape(keyVal[0]) + '=' + escape(keyVal[1]) + '&';
				}
			}
			else {
				requestStr = body + '&';
			}
		}
		else
			body = null;

		requestStr += randKey; // Now, append the random key at the end
		
		//// Start request
		if ( noCaseMethod == "get" )
			this.requestObject.open(noCaseMethod, uri+'?'+requestStr, asyn);
		else {
			this.abort();
			this.requestObject.open(noCaseMethod, uri, asyn);
		}
		
		// Assign handler
		if ( typeof handler == "string" )
			this.requestObject.onreadystatechange = new Function(handler);
		else
			this.requestObject.onreadystatechange = handler;
		
		// Check if additional headers need to be sent
		if ( addHeaders  )
			this.requestSetHeaders(addHeaders);
		
		if ( noCaseMethod == "get" )
			this.requestObject.send(null);
		else {
			this.requestSetHeaders(contentType);
			this.requestObject.send(requestStr);
		}
	}
	
	return true; // Hooray, success!
};

/**
 * Aborts connection
 * @return	void
 */
dAsync.prototype.abort = function() {
	this.requestObject.abort();
};

/**
 * Constructor
 *
 * @desc Subclass designed to give you DHTML and Event handling tools
   in addition to the Ajax properties and methods.
 *
 * @return void
 */
function IOResponse() {
	this.DHTML = 0;
	
	if ( document.getElementById && document.createElement )
		this.DHTML = "full";
	else if ( document.getElementById && !document.createElement )
		this.DHTML = "default";
	else if ( document.all )
		this.DHTML = "all";
	else if ( document.layers )
		this.DHTML = "layers";
}

/**
 * Establish inheritance through prototyping
 */
IOResponse.prototype = new dAsync();

/**
 * Retrieves an element object from its ID attribute
 * @param Mixed id	Either the element's ID object or a string with its name
 * @return Object
 */
IOResponse.prototype.getObjId = function(id) {
	if ( id != null && typeof id == "object" )
		return id;	
	else if ( typeof id == "string" ) {
		switch ( this.DHTML ) {
			case "full":
				id = document.getElementById(id);
			break;
			case "default":
				id = document.getElementById(id);
			break;
			case "all":
				id = document.all[id];
			break;
			case "layers":
				id = document.layers[id];
			break;
			default : id = false;
		}
		
		return id;
	}
};

/**
 * Use to set style attributes on an element
 *
 * @param Mixed id		ID of an element
 * @param Integer [state]	-1: loading; 0: call-time; 1: after request
				NOTE: call-time is independent of asynchronous request; it is the default.
 * @param Mixed [attr]	Holds either hash or string. If hash, "value" attribute won't be used
 * @param String [value]	The new property value. Default is "block"
 *
 * @return	void
 */
	// SUGGESTED USAGE:
	//	This is very helpful for handling visual feedback
	//	for the ready state of the request
	//	E.G.: Use -1 state to reveal a loading DIV, and
	//	use 1 to hide it again.
IOResponse.prototype.nodeSetStyle = function(id, state, attr, value) {
	var objId = this.getObjId(id); // Get element object
	var key; // Array loop key
	
	// Handle default arguments
	attr = attr || "display";
	value = value || "block";
	
	// Determine when to show the element
	if ( objId ) {
		switch ( state ) {
			case -1: // LOADING
				if ( this.requestObject.readyState < 4 ) {
					if ( typeof attr == "object" ) {
						for ( key in attr ) {
							objId.style[key] = attr[key];
						}
					}
					else
						objId.style[attr] = value;
				}
			break;
			case 0: // CALL-TIME
				if ( typeof attr == "object" ) {
					for ( key in attr ) {
						objId.style[key] = attr[key];
					}
				}
				else
					objId.style[attr] = value;
			break;
			case 1: // AFTER REQUEST
				if ( this.requestObject.readyState == 4 ) {
					if ( this.requestObject.status == 200 ) {
						if ( typeof attr == "object" ) {
							for ( key in attr ) {
								objId.style[key] = attr[key];
							}
						}
						else
							objId.style[attr] = value;
					}
				}
			break;
			
			default: // UNDEFINED STATE
				if ( typeof attr == "object" ) {
					for ( key in attr ) {
						objId.style[key] = attr[key];
					}
				}
				else
					objId.style[attr] = value;
		}
	}
};

/**
 * Insert code into an element node
 *
 * @param String id	Element ID or its object
 * @param Integer state	-1: loading; 0: call-time; 1: after a request
			NOTE: Call-time means independent of asynchronous request; it's the default
 * @param String [text]	Text to be inserted. Leave this out if you want response AND are
			using state 1
			NOTE: text is required when state is not 1.
 *
 * @return	void
 */
IOResponse.prototype.nodeInsert = function(id, state, text) {
	// Handle default arguments
	text = typeof text == "undefined" ? false : text;
	state = typeof state == "undefined" ? 0 : state;
	
	var objId = this.getObjId(id); // Get the element object
	var reqState = this.requestObject.readyState, statusCode, statusStr; // HTTP vars
	
	if ( objId && typeof objId.innerHTML != "undefined" ) {
		
		switch ( state ) {
			case -1: // LOADING
				if ( this.requestObject.readyState < 4 )
					objId.innerHTML = text;
			break;
			case 0: // CALL-TIME
				objId.innerHTML = text;
			break;
			case 1: // AFTER REQUEST
				if ( reqState == 4 ) {
					requestCount++; // Increment number of asynchronous requests
					
					statusCode = this.requestObject.status;
					statusStr = this.requestObject.statusText;
					
					if ( !text && statusCode == 200 ) {
						objId.innerHTML = this.requestObject.responseText;
					}
					else if ( text && statusCode == 200 ) {
						objId.innerHTML = text;
					}
					else if ( !text && statusCode != 200 ) {
						objId.innerHTML = "HTTP Error: "+statusCode+" ("+statusStr+")";
					}
					else if ( text && statusCode != 200 ) {
						objId.innerHTML = text;
					}
					else {
						objId.innerHTML = "Error in delivering response.";
					}
				}
			break;
			default:
				objId.innerHTML = text;
		}
	}
};

/**
 * This will clear the display and innerHTML of an element
 *
 * @param Mixed obj	Element's ID name or object reference
 * @param String mode	Either "display" (default) or "visibility"
 */
IOResponse.prototype.nodeClear = function(obj, mode) {
	if ( typeof mode == "undefined" ) mode = "display";
	
	io.getObjId(obj).innerHTML = ''; // Truncate contents
	// Clear window
	if ( mode == "display" )
		io.getObjId(obj).style.display = "none";
	else
		io.getObjId(obj).style.visibility = "hidden";
}

/**
 * Advanced event registration (handles both adding and removing)
 *
 * @param Mixed element		Element to which event will be attached (id attr, or object)
 * @param String event		Event to add/remove
 * @param Function handle	Function to execute with event
 * @param Boolean [phase]	true: capture (w3c only); false (default): bubbling
 * @param Boolean [remove]	true: remove event; false (default) add event
 *
 * @return	void
 */
IOResponse.prototype.eventHandle = function(element, event, handle, phase, remove) {
	// Default args
	phase = typeof phase == "undefined" ? false : true;
	remove = typeof remove == "undefined" ? false : true;
	
	// Var declarations
	var elementObj = this.getObjId(element);
	
	if ( elementObj.addEventListener ) {
		if ( !remove )
			elementObj.addEventListener(event, handle, phase);
		else
			elementObj.removeEventListener(event, handle, phase);
	}
	else if ( elementObj.attachEvent ) {
		if ( !remove )
			elementObj.attachEvent("on"+event, handle);
		else
			elementObj.detachEvent("on"+event, handle);
	}
};


/////////////////////////////////////
// This function is for debugging
// and is separate from the dAsync
// class
//
// You can delete or comment this
// out if you don't need it
/**
 * Iterates over an object's properties/methods
 *
 * @param Object obj Object to be probed
 * @param Integer [limit] Iterations before being asked to quit. Default is 3.
 */
function objProbe(obj, limit) {
	limit = limit || 3; // Default value
	limit = limit < 1 ? 1 : limit; // Handle idiot value
	
	var i = 0, p; // Declare used vars
	for ( p in obj ) {
		var probeStr = "Property: "+p+
			"\nValue: "+obj[p]+
			"\nProperty type: "+typeof(obj[p]);
		if ( (i % limit == 0) && i > 0 ) {
			if ( confirm("Continue to probe object?") )
				alert(probeStr);
			else
				break;
		} else {
			alert(probeStr);
		}
		i++;
	}
	
	return true;
}

For whom is this intended?

Copyright Info

dAsync Class Examples

Source

Contacting the Author