YUI Library Examples: Connection Manager: Subscribing to Connection Manager's Custom Events via the Callback Object

Subscribing to Connection Manager's Custom Events via the Callback Object

Source file and dependencies

Load the Yahoo Global Object and Connection Manager source files:

Create an Event Handler Object

Create an object to handle all the custom events fired by Connection Manager.

var div = document.getElementById('container');

var transactionObject = {
	start:function(type, args){
		div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " fired.<li>";
	},

complete:function(type, args){
		div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " fired.<li>";
	},

success:function(type, args){
		div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " fired.<li>";
		if(args[0].responseText !== undefined){
			div.innerHTML += "<li>Transaction id: " + args[0].tId + "<li>";
			div.innerHTML += "<li>HTTP status: " + args[0].status + "<li>";
			div.innerHTML += "<li>Status code message: " + args[0].statusText + "<li>";
			div.innerHTML += "<li>HTTP headers: " + args[0].getAllResponseHeaders + "<li>";
			div.innerHTML += "<li>Server response: " + args[0].responseText + "<li>";
			div.innerHTML += "<li>Argument object: Array ( [foo] => " + args[0].argument[0] +" [bar] => " + args[0].argument[1] +" )<li>";
			}
	},

failure:function(type, args){
		div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " fired.<li>";
		if(args[0].responseText !== undefined){
			div.innerHTML += "<li>Transaction id: " + args[0].tId + "<li>";
			div.innerHTML += "<li>HTTP status: " + args[0].status + "<li>";
			div.innerHTML += "<li>Status code message: " + args[0].statusText + "<li>";
		}
	},

abort:function(type, args){
		div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " fired.<li>";
	}
};

Let's create two functions to provide handlers for callback.success and callback.failure compatibility. The inclusion of these handlers will demonstrate their backward compatibility with Custom Events.

Subscribe to the transaction custom events fired by Connection Manager by creating a customevents object in the callback object. NOTE: callback.success and callback.failure are provided here to demonstrate backward compatibility, and would be redundant to customevents.onSuccess and customevents.onFailure, respectively.

Initiate the Transaction

Call YAHOO.util.Connect.asyncRequest to make a request to get.php, and PHP will return the contents of $_GET via print_r(). Each event handler in transactionObject will be triggered in response to its custom event(e.g., transactionObject.start will be called when startEvent fires). In this example, event handlers are created and subscribed to all possible events raised by Connection Manager.

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.