YUI 3 :IO
?YUI IO是一个通讯工具,用于数据获取和内容更新,它使用XMLHttpRequest对象来用于“同区域”请求,当用于“跨区域”请求时,使用相反的传输工具。
开始<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js" charset="utf-8"></script>
?
// Create a new YUI instance and populate it with the required modules.YUI().use('io', function (Y) { // IO is available and ready for use.});一个简单的通讯
?io()方法是用于HTTP请求的最主要方法,这个方法接受的两个参数:uri和configuration
uri:这个参数指定通讯的的URI
configuration:这个参数是一个名值对(key value)的对象,它指定通讯的配置。更多的配置参数请参见下面的:The Configuration Object
io()方法返回一个带有下列成员的对象。
id:通讯过程中的唯一标识
abort():终止指定的通讯
isInProgress():放回一个布尔值,指出通讯是否已经完成。
下面是一个GET通讯:
?
使用IO工具使用io模块:
配置对象:
事件:
同步请求:
跨域请求:
序列号HTML表单作为数据:
在HTML表单上上传文件:
设置HTTP头部:
队列:
?
模块:function onStart(transactionid, arguments) { // transactionid : The transaction's ID. // arguments: Array ['foo','bar'].}// Subscribe to "io.start".Y.on('io:start', onStart, Y, { start: ['foo','bar']; );?io:complete
当交互完成了,响应的数据有效了,在io:start之后被激发。这是获得响应数据的最早时刻,事件句柄参数签名是:
function onComplete(transactionid, response, arguments) { // transactionid : The transaction's ID. // response: The response object. // arguments: Object containing an array { complete: ['foo', 'bar'] }.}// Subscribe to "io.complete".Y.on('io:complete', onComplete, Y, { complete: ['foo', 'bar'] } );?io:success
在complete之后激发,(when hte response HTTP status resolves to 2xx????),事件句柄参数签名是:
function onSuccess(transactionid, response, arguments) { // transactionid : The transaction's ID. // response: The response object. // arguments: Boolean value "true".}// Subscribe to "io.success".Y.on('io:success', onSuccess, Y, true);?io:failure
在complete之后激发,(function onFailure(transactionid, response, arguments) { // transactionid : The transaction's ID. // response: The response object. Only status and // statusText are populated when the // transaction is terminated due to abort // or timeout. The status will read // 0, and statusText will return "timeout" // or "abort" depending on the mode of // termination. // arguments: String "Transaction Failed".}// Subscribe to "io.failure".Y.on('io:failure', onFailure, Y, 'Transaction Failed');
?
io:end在交互结束时激发,在”success“或者”failure“被确定之后,
function onEnd(transactionid, arguments) { // transactionid : The transaction's ID. // arguments: Number 0.}// Subscribe to "io.end".Y.on('io:end', onEnd, Y, 0);?io:xdrReady在flash XDR 传送准备使用时激发。当transport初始化完成时,这个事件仅仅激发一次
下面的例子证实一个io 交互,这个交互带有订阅到(subscribe to)io:complete上的事件句柄。
// Create a YUI instance using io module.YUI().use("io-base", function(Y) {/* * 为事件"io:complete"创建一个函数作为事件句柄。 * * 这个函数将接受以下参数: * - ID:The ID of the transaction * - response data:Object containing the response data. * - Argument one defined when subscribing to the event(e.g., "foo"). * - Argument two defined when subscribing to the event(e.g., "bar"). */function onComplete(transactionId, responseObject, arg1, arg2) {/* * 参数responseObject是响应对象,它提供的属性包括: * - status * - statusText * - getResponseHeader(headerName) * - getAllResponseHeaders * - responseText * - responseXML * * 注意:一个XDR交互中,只有responseText或者responseXML是被定义的属性。 */};/* * 使用Y.on订阅到事件io:complete * * - 'io:complete' : 订阅到这个io事件 * - onComplete : 将被定义到io:complete上的事件句柄。 * - Y : 事件句柄执行的内容,在这个例子中,theYUI sandbox???(什么意思?)。因为onComplete被定义为一个全局函数。 * * - 'foo' : The first argument received by the event handler. * - 'bar' : The second argument received by the event handler. * Additional arguments can be defined, as desired. */Y.on('io:complete', onComplete, Y, "foo", "bar");// Starts the transaction.var request = Y.io(uri);});?同步事务:
对于同域请求,YUI io可以被指明来发送一个同步请求,它将停止所有的脚本执行,直到transaction完成。当transaction完成,响应数据// Create a YUI instance using the io-base module.YUI().use("io-base", function(Y) {var cfg,request;// Create a configuration object for the synchronous transaction.cfg = {sync: true,arguments: { 'foo' : 'bar' }};/* * var request will contain the following fields, when the * transaction is complete: * - id * - status * - statusText * - getResponseHeader() * - getAllResponseHeaders() * - responseText * - responseXML * - arguments */request = Y.io(uri, cfg);});?跨域请求:
// Create a YUI instance using the io-form sub-module.YUI().use("io-form", function(Y) {// Create a configuration object for the file upload transaction.// The form configuration should include two defined properties:// id: This can be the ID or an object reference to the HTML form.// useDisabled: Set this property to "true" to include disabled// HTML form fields, as part of the data. By// default, disabled fields are excluded from the// serialization.// The HTML form data are sent as a UTF-8 encoded key-value string.var cfg = {method: 'POST',form: {id: formObject,useDisabled: true}};// Define a function to handle the response data.function complete(id, o, args) { var id = id; // Transaction ID. var data = o.responseText; // Response data. var args = args[1]; // 'ipsum'.};// Subscribe to event "io:complete", and pass an array// as an argument to the event handler "complete".Y.on('io:complete', complete, Y, { 'foo':'bar' });// Start the transaction.var request = Y.io(uri, cfg);});?在HTML表单中上传文件:
YUI().use("io-base", function(Y) {// 设置一个新的HTTP头部。Set a new default HTTP header.Y.io.header('Content-Type', 'application/json');// 移除一个已经存在的头部,使用相同的方法,但忽略它的值。Y.io.header('Content-Type');});?队列:
?
FIELD描述queue(uri,configuration)同io交互,但返回值为idqueue.start()启动队列,开始处理交互。queue.stop()停止队列,交互将被停止的,知道队列从新启动re-startqueue.promote(id)移动队列中存储的指定交互到队首queue.remove(id)删除指定的交互。// Create a YUI instance using the io queue sub-module.//比较简单,不翻译了。YUI().use("io-queue", function(Y) {// Stop the queue so transactions can be stored.Y.io.queue.stop();// Send four transactions into the queue for storage.var task0 = Y.io.queue(uri);var task1 = Y.io.queue(uri);var task2 = Y.io.queue(uri);var task3 = Y.io.queue(uri);// Promote task2 to the top of the queue.Y.io.queue.promote(task2);// Purge task3 from the queue.Y.io.queue.purge(task3);// Re-start the queue.// Transactions are sent in the following order: task2, task0, task 1.// Transaction callbacks, if provided, will be processed in the same// sequence: task2, task0, task1, regardless of actual response order.//Y.io.queue.start();});?安全公告
?