YUI Library Examples: Get Utility: Quickstart Example: Getting a Script File with YUI Get

Quickstart Example: Getting a Script File with YUI Get

In this simple example, we perform the most common task for which the Get Utility is used: retrieving a script and adding it to the page.

The contents of the script we're fetching (assets/simple_get.js) are as follows:


1	//when this script is loaded by the YUI Get Utility,
2	//all of its contents will be evaluated in the context
3	//of the window object -- it has all the access to the
4	//page, the DOM, cookies, etc., that any other script
5	//would have, even if you've loaded it from a disparate
6	//domain.
7
8	//create a globally accessible namespace, assuming
9	//that YUI is already present:
10	YAHOO.namespace("simple_get");
11
12	//store some data:
13	YAHOO.simple_get.data = {
14	script: "assets/simple_get.js",
15	loaded: "loaded using YUI's Get Utility",
16	time: new Date().toString()
17	}
	view plain \| print \| ?

The script file above defines a new namespace and then adds a property to that namespace. There are no restrictions on what we can do in the retrieved script; it can contain any correct JavaScript. When retrieved, it will be evaluated by the browser in the context of the window to which it was added. By default, it will be added to the current window and evaluated in that context.

In this page, we create a button and wire it so that when it's clicked the Get Utility will create a script node and populate it with the file above.


1	//We'll use a YUI Button to actuate our request for the script:
2	var button = new YAHOO.widget.Button("getScript", {type: "link"});
3
4	//When the button is clicked, we'll make the script request:
5	button.on("click", function() {
6
7	//We have a .js file at assets/simple_get.js. We will get
8	//that script with the Get Utility:
9	YAHOO.util.Get.script("../get/assets/simple_get.js", {
10
11	//callback to fire when the script is successfully loaded:
12	onSuccess: function(obj) {
13	YAHOO.log("Success handler was called. Transaction ID: " + obj.tId, "info", "example");
14	document.getElementById("returnedData").innerHTML = YAHOO.lang.dump(YAHOO.simple_get.data, 3);
15	}
16	});
17
18	});
	view plain \| print \| ?

Above you see the important parts of this script. In the Button's click handler, we invoke YAHOO.util.Get.script and pass it the URI of the script to be loaded. (The script can be on your server or on a third-party server; it is not restricted by the Same Origin Policy, which is why this is a popular approach for consuming JSON-based web services.) We also tell Get what we want to do once the script is loaded by defining an onSuccess configuration property. This property consists of a function in which we can make use of the contents of assets/simple_get.js.

Full Script Source for This Example:

The full script source used in this example appears below; read through the inline comments to get a full understanding of how to use the Get Utility in the simple use case of retrieving a script file and making use of its contents.


1	(function() {
2
3	//We'll use a YUI Button to actuate our request for the script:
4	var button = new YAHOO.widget.Button("getScript", {type: "link"});
5
6	//When the button is clicked, we'll make the script request:
7	button.on("click", function() {
8
9	YAHOO.log("Button was clicked; loading script with Get Utility.", "info", "example");
10
11	//We have a .js file at assets/simple_get.js. We will get
12	//that script with the Get Utility:
13	YAHOO.util.Get.script("../get/assets/simple_get.js", {
14
15	//ALL OF THE CONFIGURATION OPTIONS BELOW ARE OPTIONAL;
16	//IN MANY CASES, YOU'LL NEED ONLY TO DEFINE YOUR SUCCESS/
17	//FAILURE HANDLERS.
18
19	//callback to fire when the script is successfully loaded:
20	onSuccess: function(obj) {
21	YAHOO.log("Success handler was called. Transaction ID: " + obj.tId, "info", "example");
22	document.getElementById("returnedData").innerHTML = YAHOO.lang.dump(YAHOO.simple_get.data, 3);
23	},
24
25	//callback to fire if the script does not successfully load:
26	onFailure: function(o) {
27	YAHOO.log("Failure handler was called. Transaction ID: " + obj.tId, "info", "example");
28	},
29
30	//context under which success and failure handlers should run;
31	//default is the current window, which we'll use for this example:
32	scope: window,
33
34	//by default, the script will be added to the current
35	//window; use this property to override that default
36	//(we're just using the default in this example):
37	win: window,
38
39	//will be passed as a member of the callback object to
40	//the success or failure handler:
41	data: {testData: "value"},
42
43	//For Safari 2.x, which does not support the script's onload
44	//event to determine when the script is loaded; instead, Get
45	//will check for the presence of this varName (which is
46	//defined in the script we're retrieving) and use its presence
47	//to determine when the script has been successfully loaded:
48	varName: ["YAHOO.simple_get.data"]
49	});
50
51	});
52
53	})();
	view plain \| print \| ?

(function() {
	
	//We'll use a YUI Button to actuate our request for the script:
	var button = new YAHOO.widget.Button("getScript", {type: "link"});
	
	//When the button is clicked, we'll make the script request:
	button.on("click", function() {
		
		YAHOO.log("Button was clicked; loading script with Get Utility.", "info", "example");

//We have a .js file at assets/simple_get.js.  We will get
		//that script with the Get Utility:
		YAHOO.util.Get.script("../get/assets/simple_get.js", {
			
			//ALL OF THE CONFIGURATION OPTIONS BELOW ARE OPTIONAL;
			//IN MANY CASES, YOU'LL NEED ONLY TO DEFINE YOUR SUCCESS/
			//FAILURE HANDLERS.
			
			//callback to fire when the script is successfully loaded:
			onSuccess: function(obj) {
				YAHOO.log("Success handler was called. Transaction ID: " + obj.tId, "info", "example");
				document.getElementById("returnedData").innerHTML = YAHOO.lang.dump(YAHOO.simple_get.data, 3);
			},
			
			//callback to fire if the script does not successfully load:
			onFailure: function(o) {
				YAHOO.log("Failure handler was called. Transaction ID: " + obj.tId, "info", "example");
			},
			
			//context under which success and failure handlers should run;
			//default is the current window, which we'll use for this example:
			scope: window,
			
			//by default, the script will be added to the current
			//window; use this property to override that default
			//(we're just using the default in this example):
			win: window,
			
			//will be passed as a member of the callback object to
			//the success or failure handler:
			data: {testData: "value"},
			
			//For Safari 2.x, which does not support the script's onload
			//event to determine when the script is loaded; instead, Get
			//will check for the presence of this varName (which is
			//defined in the script we're retrieving) and use its presence
			//to determine when the script has been successfully loaded:
			varName: ["YAHOO.simple_get.data"]
		});
		
	});
	
})();

Configuration for This Example

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.

YUI Logger Output:

Logger Console

INFO 229ms (+199) 4:45:25 AM:
LogReader  instance0
LogReader initialized

INFO 30ms (+1) 4:45:25 AM:

Get

Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js

INFO 29ms (+0) 4:45:25 AM:

Get

attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js

INFO 29ms (+28) 4:45:25 AM:
Get
_next: q0, loaded: undefined

INFO 1ms (+0) 4:45:25 AM:
global
Logger initialized