YUI3：GET

Get 工具提供了一个，在页面加载完之后，附加脚本和css资源（包括跨域资源）到DOM上的机制。

Get工具两种常见的用例：

1.跨站数据检索：因为XMLHttplRequest（YUI IO Utility也是使用XMLHttpRequest）依靠一个严格的同源策略，所以，要通过XHR检索第三方数据需要一个服务器代理。（具体搜索一下XMLHttpRequest工作原理）。如果是能控制或者完全信任的跨域资源，可以不通过服务端代理而直接加载 script 数据从不同源的地方；而 script 文件，可能是典型 json 格式化的数据，在 load 的时候会立马执行。有一点至关重要，如果你加载的 script file 有恶毒的代码，没有安全的机制可以保证用户不受到恶毒代码的影响，因为浏览器会以完全的权限来执行这些代码。所以记住这一点：不要让用户接触到那些不能彻底信任的数据源。

2.逐步加载方法：在富客户端应用中，基于用户动态加载需要的 js 文件和 css 文件变得非常有用， Get utility 提供了动态加载资源的功能。（注意：如果是加载 YUI 里面资源，可以使用 YUI loader 来加载， YUILoader 使用 Get Utility 来加载 YUI 组件，并且对解决 YUI 组件依赖问题） 。

 

 开始

配置一个Get Utility 事务（Configuring a Get Utility Transaction。请问如何翻译？）

使用提供给你的回调函数的参数.

Getting Started
Configuring a Get Utility Transaction
Making Use of Arguments Supplied to Your Callback
Using the Get Utility to Insert Script Nodes
Using the Get Utilty to Insert CSS Files
Using JSONP Web Services
How is the Get Utility Different From IO?
YUI on Mobile Devices

 

开始

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>;

 

 

 你可以取得一个脚本（Y.Get.script()）and/or CSS(Y.Get.css())资源到页面。script和css方法都有一下参数：

1.URL(s):指定你需要加载到页面的URL(s), URL(s)可能是字符串或者字符串数组。

2.options:一个可选的配置对象，它包含了transaction（交互？）的信息；更多内容下面会讲到。

一个简单的文件请求可能如下：

YUI().YUI().use(function(Y) { var url = http://search.yahooapis.com/SiteExplorerService/V1/inlinkData?" + "appid=3wEDxLHV34HvAU2lMnI51S4Qra5m.baugqoSv4gcRllqqVZm3UrMDZWToMivf5BJ3Mom" + "&results=20&output=json&omit_inlinks=domain" + "&callback=YAHOO.example.SiteExplorer.callback" + "&query=http://developer.yahoo.com/yui/", obj = Y.Get.script(url, { onSuccess: function() { alert("file loaded"); }; }); // 'obj'将是一个只有一个成员的对象，tID， //它是transaction中的唯一身份标识符， //它具有以下格式："q0","q1","q2"..."qn" will be an object with a });

 

 

 

配置Get Utility Transaction

通过第二个参数配置script和css方法，这个可选的参数包含一个对象，这个对象包含以下字段：

 

配置选项 目的作用

onSuccess	(function) Callback method invoked by Get Utility when the requested file(s) have loaded successfully.
onFailure	(function) Callback method invoked by Get Utility when an error is detected or abort is called.
onProgress	(function) Callback method invoked by Get Utility after each node is inserted.
onTimeout	(function) Callback method invoked by Get Utility if a timeout is detected.
onEnd	(function) Callback method invoked by Get Utility when a transaction completes no matter how the transaction ended.
attributes	(object) A hash of attributes to apply to the dynamically created nodes. You might use this to add media="print" to a css file, for example.
win	(window) The window into which the loaded resource(s) will be inserted. Default: Y.config.win.
context	(object) The execution context in which all callbacks will run. Default: the current YUI instance.
data	(any) Data to pass as an argument to onSuccess or onFailure callbacks. Default: null.
autopurge	(boolean) If set to true, script nodes will automatically be removed every 20 transactions (this number is globally configurable via theY.Get.PURGE_THRESH property); script nodes can be safely removed in most cases, as their contents (having executed) remain available. CSS nodes should not have this set to true as it will remove the CSS rules. Default: true for script nodes, false for CSS nodes.
timeout	(int) Number of milliseconds to wait for a script to finish loading before timing out

使用提供给回调函数的参数

正如上面部分，你的回调函数（无论是onSuccess还是onFailure），能够使用提供给配置对象的data 成员（将如你已经在configuration中提供了一个这样的data成员—如上表格）。当然，并不是只有data这一成员可以使用，下面的成员也可以使用：

（说简单点就是，在onSuccess或者onFailure函数中，允许使用下面的参数：）

 

 

FIELD CONTENTS

tId	(string) The unique identifier for this transaction; this string is available as the tIdmember of the object returned to you upon calling the script or css method.
data	(any) The data field you passed in your configuration object when the script or css method was called. Default: null.
nodes	(array) An array containing references to node(s) created in processing the transaction. These will be script nodes for JavaScript and link nodes for CSS.
win	(window) The window object in which the nodes were created.
purge()	(function) Calling the returned purge() method will immediately remove the created nodes. This is safe and prudent for JavaScript nodes, which do not need to persist. If CSS nodes are purged, the rules they contain are no longer available and the page will repaint accordingly.

 使用Get Utility插入脚本节点 var successHandler = function(o) { //o,包含了上表中所有描述的域。 o.purge(); //在执行之后立即移除script脚本节点。 Y.log(o.data); //传递给配置对象的data成员 } var objTransaction = Y.Get.script("http://json.org/json.js", { onSuccess: successHandler, data: { field1: value1, field2: value2 } })

 

 

 

当使用Y.Get.script()方法增加一个或者多个脚本文件到页面上时，Get Utility 按照以下步骤执行：

1.将一个脚本节点加载到请求脚本文件的目标窗口

2.将新脚本的src属性设置为指定的URL

3.如果transaction成功，脚本被加载执行。

4.脚本节点的load时间被激发

5.Get Utility检查是否有更多的URL，如果有，将返回第一步。

6.如果这个最后一个，Get Utility将唤醒onSuccess回调函数（如果指定了一个回调函数）

如下：

var handlerData = { //传递给success or failure句柄的数据。 //就像上面的。 }; var successHandler = function(oData) { //code to execute when all requested scripts have been //loaded; this code can make use of the contents of those //scripts, whether it's functional code or JSON data. }; var aURLs = [ "/url1.js", "/url2.js", "/url3.js" //等等。。。 ]; Y.Get.script(aURLs, { onSuccess: successHandler, data: handlerData });

 

 

 使用Get Utility 来插入CSS文件

当你使用使用Y.Get.css()方法来增加一个或者多个CSS文件到页面上时，Get Utility 遵循以上脚本步骤。在Firefox和Safari上不兼容。

使用JSONP Web Services

Get Utility 和IO的区别