Php文档 Php问答行业资讯 Php论坛 Php手册 Php博客

游戏榜单

软件榜单

关闭导航

热搜榜

热门下载

热门标签

关闭搜索

php爱好者> php文档>YUI3 IO

YUI3 IO

时间：2010-09-21 来源：花吻道

YUI ~ IO

YUI IO 组件其原身就是 YUI2 中的 Connection的组件

YUI2 Connection

YAHOO.util.Connection.asyncRequest方法发起Ajax请求

Connection.asyncRequest方法通过XHR对象创建一个异步请求

1 var callback = {
2        success : function(r){
3            console.log(r.responseText);
4         },
5         failure : function(r){
6               console.log(r.status);
7         },
8         timeout : 500
9 }
10 YAHOO.util.Connection.asyncRequect("get","url",callback);

YUI~2X中connection的XHR(XMLHttpRequest) 对象创建方式

XMLHttpRequest 对象
XMLHttpRequest 是Ajax的核心对象，也是Ajax技术应用的基础,所有的浏览器厂商都实现了具有相
同功能的XMLHttpRequest对象,不过,不同的浏览器间创建XMLHttpRequest对象会存在差异，微软从
ie5以ActiveX插件的形式已经可以进行Ajax应用的开发了。

1、Connection组件首先尝试通过 new XMLHttpRequest(); 创建对象

　　微软从ie7开始添加了对xmlhttp原生的支持,除ie5,和ie6以外的浏览器则使用名 XMLHttpRequest 的javascript内建对象

2、最后使用Microsoft.XMLHTTP ActiveX组件来实例化MLHttpRequest 对象

YUI~2X Connection提供了3种progid不同的 ActiveXObject 对象

YAHOO.util.Connection.setForm()

设置表单提交

YAHOO.util.Connection.setForm()

YAHOO.util.Connection.asyncRequect("post","url",callback);

在使用setForm上传文件时，需要定义upload回调函数代替success和failure ,

在setForm中会把表单的值拼装起来，记录在内部变量_sFormData中，然后再异步请求时将数据提交至服务端

YAHOO.util.Connection.abort()

终止请求

1 o.conn.abort();
2 window.clearInterval(this._poll[o.tId]);

终止请求，并且停止对XHR状态的轮询检测

YUI 2x 中并没有用原生提供的onreadystatechange属性检测每个请求的状态，它的方案则是利用定时器轮训去检测xhr的状态

1 this._poll[o.tId] = window.setInterval( /*检测xhr状态的函数*/,this._polling_interval);

疑惑 : 为何Yui 2x中要用轮询去代替 onreadystatechange ?

．·°∴ ☆．．·°．·°∴ ☆．．·°．·°∴ ☆．．·° ．·°∴ ☆．．·°．·°∴ ☆．．·°．·°∴ ☆．．·° ．·°∴ ☆．．·°．·°∴ ☆．．·°．·°∴ ☆．．·°

YUI3 IO

YUI3 的 IO组件划分的粒度更细了

IO组件由 io-base,io-queue,io-form,io-upload,io-xhr 组成

一般情况使用 io-base即可 min文件只需4k,比起 YUI2x中 Connection文件小巧了很多

YUI 3x 中创建xhr的方式更为简短

function _xhr() {
return w.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
}

和 jquery创建方式基本相同，并且只提供了一个 "Microsoft.XMLHTTP" ActiveXObject对象

在IO 中抛弃了 2x 中使用轮询方式去检测状态的方案，开始回到使用onreadystatechange属性检测请求的状态

io-base 中 handleTransactionResponse 和 Yui 2x conn组件中判断XHR请求是否成功

在 status >=200 且 status < 300 为成功

在ie浏览器下有时候会返回1223状态码，其实是状态204 ，还有opera下返回0代表返回304,这些状态码下，都视为请求成功

拿yui和 jquery 和 dojo比较

欠缺了对location.protocol === "file:" 时的判断

window.location.protocol 这个属性是得到当前的网络通信协议如"http:" 或 "file:" 等;

在IE7浏览器下网络通讯协议为 file 的时候不能用 window.XMLHttpRequest

使用IO组件发送异步请求

1 YUI().use("io-base", function(Y){
2     var handleStart = function(){},
3         handleSuccess = function(){},
4         handleFailure = function(){},
5     cfg = {
6         method: "GET",
7         on: {
8             start: handleStart,
9             success: handleSuccess,
10             failure: handleFailure
11         }
12     };
13     Y.io("http://www.google.com.hk/",cfg);
14 });

start : 请求开始时的回调, success : 请求成功后回调, failur : 请求失败后的回调 .

Y.on 对于公共的事件处理提供了接口,例如:

Y.on("io:success" , function(){} , this, true ); Y.on( "io:failure" , function(){} , this );

需要单独做特殊处理的可以在 cfg.on中自定义start,success,failure方法等。

公共事件和自身的事件会同时存在，定义在cfg中的事件并不会覆盖公共事件。