Connection Manager exposes Custom Events that track the progress of a transaction through its lifecycle. These Custom Events are raised at the global level and at the transaction level. The following code example provides a step-by-step approach to subscribing to global custom events raised by Connection Manager. In this scenario, an event handler object is created to handle all Custom Events. Each Custom Event is explicitly subscribed with a reference to it's event handler.
Click "Send a Request" below to try it out, then read the description below to learn how to subscribe to global Custom Events in Connection Manager.
Load the Yahoo Global Object and Connection Manager source file:
1 | <script src="yahoo.js"></script> |
2 | <script src="event.js"></script> |
3 | <script src="connection.js"></script> |
view plain | print | ? |
Construct a simple querystring with a key-value pair of s = hello world
. This data will be sent back to the client as a response from PHP to confirm the transaction.
1 | /* |
2 | * Create a querystring with example key-value pair of |
3 | * hellow = world. Remember to encode the querystring |
4 | * if and when the string contains special characters. |
5 | */ |
6 | var sUrl = "php/get.php?s=hello%20world"; |
view plain | print | ? |
Create an object to handle the global custom events fired by Connection Manager.
1 | var div = document.getElementById('container'); |
2 | |
3 | var globalEvents = { |
4 | start:function(type, args){ |
5 | div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " fired.<li>"; |
6 | }, |
7 | |
8 | complete:function(type, args){ |
9 | div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " fired.<li>"; |
10 | }, |
11 | |
12 | success:function(type, args){ |
13 | div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " fired.<li>"; |
14 | if(args[0].responseText !== undefined){ |
15 | div.innerHTML += "<li>Transaction id: " + args[0].tId + "<li>"; |
16 | div.innerHTML += "<li>HTTP status: " + args[0].status + "<li>"; |
17 | div.innerHTML += "<li>Status code message: " + args[0].statusText + "<li>"; |
18 | div.innerHTML += "<li>HTTP headers: " + args[0].getAllResponseHeaders + "<li>"; |
19 | div.innerHTML += "<li>Server response: " + args[0].responseText + "<li>"; |
20 | div.innerHTML += "<li>Argument object: Array ( [foo] => " + args[0].argument[0] +" [bar] => " + args[0].argument[1] +" )<li>"; |
21 | } |
22 | }, |
23 | |
24 | failure:function(type, args){ |
25 | div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " fired.<li>"; |
26 | if(args[0].responseText !== undefined){ |
27 | div.innerHTML += "<li>Transaction id: " + args[0].tId + "<li>"; |
28 | div.innerHTML += "<li>HTTP status: " + args[0].status + "<li>"; |
29 | div.innerHTML += "<li>Status code message: " + args[0].statusText + "<li>"; |
30 | } |
31 | }, |
32 | |
33 | abort:function(type, args){ |
34 | div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " fired.<li>"; |
35 | } |
36 | }; |
view plain | print | ? |
Let's create two functions to provide handlers for callback.success
and callback.failure
compatibility. The inclusion of these handlers will demonstrate the callback object's compatibility with Custom Events.
1 | var handleSuccess = function(o){ |
2 | div.innerHTML += "<li>Success response handler triggered in callback.success<li>"; |
3 | }; |
4 | |
5 | var handleFailure = function(o){ |
6 | div.innerHTML += "<li>Failure response handler triggered in callback.success<li>"; |
7 | }; |
view plain | print | ? |
Subscribe to the global custom events fired by Connection Manager before starting the transaction.
1 | /* Subscribe to global listeners */ |
2 | |
3 | // Create a shorthand variable for YAHOO.util.Connect |
4 | var YCM = YAHOO.util.Connect; |
5 | |
6 | YCM.startEvent.subscribe(globalEvents.start); |
7 | YCM.completeEvent.subscribe(globalEvents.complete); |
8 | YCM.successEvent.subscribe(globalEvents.success); |
9 | YCM.failureEvent.subscribe(globalEvents.failure); |
10 | YCM.abortEvent.subscribe(globalEvents.abort); |
view plain | print | ? |
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 globalEvents
will be triggered in response to its corresponding custom event(e.g., globalEvents.start will be called when startEvent fires). In this example, event handlers are created and subscribed to all possible events raised by Connection Manager.
1 | var request = YAHOO.util.Connect.asyncRequest('GET', sUrl); |
view plain | print | ? |
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
Note: Logging and debugging is currently turned off for this example.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings