- 浏览: 160323 次
- 性别:
- 来自: 重庆
文章分类
最新评论
-
坏猪猪:
Document doc = Jsoup.connect(ur ...
android中jsoup解析html的几个例子 -
我很温柔但是不丑:
你好。看了您的例子,实践了一下,有问题啊?没有解析出来数据?怎 ...
android中jsoup解析html的几个例子
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头部:
队列:
模块:
Io的 核心和补充 功能 分为 基本 模块和 子模块,来使得在选择需要的功能时,加入适合的模块。
模块 |
描述 |
io-base |
基本的io类,包含了使用HTTP请求的基本函数 |
io-xdr |
这个子模块扩展了io-base,使用交替的HTTP通讯,增加了跨区域请求的能力。 |
io-form |
这个子模块扩展了io-base,增加了为POST通讯,序列化HTML表单数据的功能。 |
io-upload-iframe |
这个子模块扩展了io-base,使用一个框架作为交互通讯,允许使用一个HTML表单上传文件。 |
io-queue |
这个子模块扩展了io-base,为io提供一个基本的队列接口 |
配置对象:
这个对象是io()方法的第二个参数,所有属性是可选的,如下。
属性 |
描述 |
method (string) |
定义通讯的HTTP方法,如果这个属性没有定义或者忽略的,那么默认的值是GET |
data (string) |
如果交互的数据被定义成名值对(如,"foo=bar&baz=boo"),也可以被定义为 a single-level object(例如.{'boo':'bar','baz':'boo'}.),然后被序列化为名值对字符串,为了应用这个功能,子模块querystring-stringify-simple(一个io-base的可选依赖)必须在Y.use()中定义。 |
headers (object) |
指定交互的HTTP头部和值。(例如,{'Content-Type':'application/xml;charset=utf-8'}) |
on (object) |
io事件。 These events fire in addition to the global io events(这句话是什么意思?除了全局io事件xxxx) start: complete: success: failure: end: 注意:These events are accessible only to the transaction's subscribers, whereas global io events are accessible by all subscribers.?????what意思 |
context (object) |
定义事件执行内容,如果没有定义,默认的Y(YUI实例)将被使用。 |
form (object) |
这个对象指明使用指定HTML表单的标签和值作为数据。 id:这个属性可以被定义为一个HTML表单的id(sting)或者是一个HTML表单对象引用。 useDisable:设置为true时,禁用区域的值被包含,作为数据的一部分。默认值为flase。 |
xdr (object) |
Defines the transport to be used for cross-domain requests (e.g.,
use:这个属性指定传输的方式;io-xdr模块提供"native"和"flash"方式。 dataType:当被设置为“xml”时,io将返回XML文档。 |
sync (boolean) |
当被设置为true,交互将被同步执行 |
arguments (object) |
可以是对象,数组,字符串或者是数字。在"start"和"end"处理器中是第二个参数,在"complete","success"和"failure"事件处理器中是第三个参数。 |
timeout |
这个值是交互的事件截至值,单位是毫秒。例如({timeout:2000}).当这个时间限制到了之后,交互的Complete事件还没有激发时,这次交互将被取消。 |
响应对象
当一个交互,以XHR对象作为传输工具,响应的数据将作为一个事件处理的对象被传递。
字段 | 描述 |
status | HTTP状况码 |
statusText | HTTP状况信息 |
getResponseHeader(headername) | 返回指定的头部标号的字符串值 |
getAllResponseHeaders() | 返回所有的HTTP 头部作为一个字符串。每一个名值对都以"\n“定界。 |
responseText | 响应数据作为一个解码字符串。 |
responseXML | 响应数据作为一个XML文件。 |
注意:涉及到文件上传或者是跨域请求的交互,使用alternate transports,将仅仅populate responseText或者responseXML域。HTTP status和响应头部(response headers)要么是不可取的(inaccessible)要么是无效的。
事件:
两种事件区别不清楚。global 和Transaction。global event,全局事件?;Transaction event 事务事件?
YUI io事件提供了在事务处理(翻译成交互准确不?)过程中获取状态和数据的功能。有两个方面的io事件:global 和transaction。对于所有的事务处理,global event总是被io激发,并且这些事件对所有的订阅者(subscribers)都是有效的。如果它们有定义在Configuration 对象的句柄(handlers),则Transaction events 被创建并激发。global event 的定义结构为:io:eventname 。
以下是subscribe Globle event的例子。
事件 | 描述 |
io:start |
当请求一个资源是被激发。事件句柄参数签名是: 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之后激发,(when the response HTTP status resolves to 4xx. 5xx,未定义,或者是一个非标准的HTTP状态。大概意思是,比如什么404错误值了的 )。这个事件也包含‘abort’和‘timeout’情况,事件句柄参数签名是: 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完成,响应数据are directly accessible through the object returned by Y.io(), and the data are also accessible through all io events。当使用同步请求,abort()和isInProgress()无效。
// 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); });
跨域请求:
alternate transport 是什么?
交互方式
默认:XMLHttpRequest
也可以用:flash
这块不会,请高手指教。
序列号HTML表单作为数据:
YUI io能够序列化HTML表单域到一个UTF-8字符串,名值对。如果transaction是HTTP GET,数据将作为查询字符串加到URI上,如果transaction是HTTP POST ,数据将为POST信息。
// 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表单中上传文件:
The default XHR transport, used in io, cannot upload HTML form data that include elements of type="file". In this situation, io will use an alternate transport -- an iframe -- to facilitate the transaction. The response data must be one of the following content types: "text/html", "text/plain", "text/xml". The following example shows how to configure a transaction involving file upload:
设置HTTP头部:
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交互,但返回值为id |
queue.start() | 启动队列,开始处理交互。 |
queue.stop() | 停止队列,交互将被停止的,知道队列从新启动re-start |
queue.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(); });
安全公告
已知的问题
发表评论
-
yui3:widget 例子_widget-extend
2011-06-26 16:07 2596<!DOCTYPE HTML PUBLIC &qu ... -
yui3:widget
2011-06-18 11:36 3274Widget 类包含什么? widget类的结构和 ... -
YUI3:node2
2011-06-18 11:23 1YUI的Node功能为获取、 ... -
YUI3:plugin
2011-06-18 10:22 1465插件让你可以无侵入地 ... -
YUI3:Base
2011-06-16 20:39 1575Base类被设计成基础类 ... -
YUI3:Attribute
2011-06-16 10:30 1547YUI的Attribute功能允 ... -
YUI 3:Event
2011-06-15 22:23 15551. 要使用Event,首先要引入YUI3的种子文件: &l ... -
YUI3:Node
2011-06-15 15:59 2223YUI的Node功能为获取、创建、操作DOM节点提供很易懂的方 ... -
yui3 :Get 例子
2011-06-15 15:43 1333Getting a Script Node with JSON ... -
YUI:globle object
2011-06-13 11:52 1672YUI模块是YUI3中的单一核 ... -
YUI3:GET
2011-06-12 22:25 1701Get 工具提供了一个,在 ... -
YUI3:DataSource
2011-06-12 21:53 1330DataSource 工具,通过广泛支持的协议,为从不同的资源 ... -
YUI3:DataSchema
2011-06-12 20:57 916DataSchema Utility 应用一个给定的模式 ,以 ... -
YUI3:Cooke
2011-06-12 16:43 1254YUI Cookie工具为与cookies ... -
yui3 :datatype
2011-06-12 12:02 2129DataType工具为数据, ... -
YUI3:cache
2011-06-12 10:14 1273Cache 工具为存储名值对到本地JavaScript内存提供 ... -
YUI 3 周边
2011-06-11 16:46 11381.跨域请求:cross-domain 初步体验“AJAX不 ... -
YUI 3 : json
2011-06-09 15:37 2657JSON (JavaScript Object ...
相关推荐
《深入理解YUI3:基于yui3-master.zip的探讨》 YUI(Yahoo! User Interface Library)是由雅虎公司开发的一套开源JavaScript库,它为Web开发者提供了丰富的功能和工具,以创建交互性强、性能优秀的网页应用。YUI3是...
3. **事件处理**:YUI的事件系统强大,支持事件绑定、解绑、事件冒泡等,使得用户交互编程简单易行。 4. **动画效果**:通过Transition和Anim模块,可以轻松实现平滑的CSS3动画和JavaScript动画效果。 5. **数据绑定...
5. **IO模块**:YUI3的IO模块支持Ajax请求,包括GET、POST等多种HTTP方法,以及异步请求和JSONP跨域数据获取。 6. **动画模块**:YUI3的动画模块可以轻松创建复杂的动画效果,支持CSS属性、颜色、尺寸等多方面的...
YUI 3包含了一系列核心模块,如Event(事件处理)、Node(DOM操作)、IO(异步数据交互)等,同时还有许多可选的组件,如Grids(表格)、Charts(图表)、Form(表单元素)等,覆盖了前端开发的多个方面。...
1. **模块系统**:YUI3引入了模块化设计,允许开发者按需加载组件,降低页面的初始化时间。模块可以通过`YUI.use()`方法来加载,实现了代码的异步加载和依赖管理。 2. **事件系统**:YUI的事件处理机制强大且灵活,...
6. **异步通信和Ajax**:YUI的IO组件提供了异步请求功能,支持JSONP、XMLHttpRequest等多种方式,便于与服务器进行数据交互。 7. **DOM操作和选择器**:YUI提供了强大的DOM操作接口,包括元素的选择、遍历、创建和...
7. **IO(Input/Output)**:YUI2的IO模块支持异步数据请求,包括AJAX、JSONP、以及文件上传,帮助开发者与服务器进行数据交换。 8. **拖放(Drag & Drop)**:YUI2的拖放功能使得用户可以轻松实现元素的拖放操作,...
YUI 3的设计目标是模块化和轻量化,它引入了模块系统,使得开发者可以根据需要只加载必要的组件,从而降低页面加载时间。在3.1.2版本中,这一特性得到了充分的体现。源码中的每个模块都是独立的,通过AMD...
YUI3的`IO`模块负责处理Ajax通信,可以进行GET和POST请求,支持异步传输和XMLHttpRequest2特性。同时,YUI3的`JSONP`模块则用于跨域数据获取,这对于获取服务器上的JSON数据非常有用。 **响应式设计** 虽然YUI3...
- IO:处理异步文件读写,提供了文件上传和下载功能。 - JSON:JSON对象的序列化和反序列化,便于数据交换。 - Calendar:日历组件,可以方便地集成到网页中,用于日期选择。 - Drag and Drop:拖放功能,使得用户...
**3. JavaScript组件** - **Event**: 事件处理模块,支持DOM事件的监听、处理和移除,提供了一套跨浏览器的事件系统。 - **Node**: Node模块提供了对DOM节点的操作,如选择、创建、修改和删除等,简化了DOM操作。 - ...
3. **CSS样式和布局**:YUI包含一套响应式设计的CSS框架,如Grids布局系统,帮助开发者快速创建响应式的网页布局。 4. **数据管理**:YUI提供了Model、ModelList和Store等组件,用于数据的存储、管理和同步,与...
3. **拖放功能**:YUI的DragDrop模块提供了强大的拖放功能,使得用户可以轻松地在页面上移动元素,这对于构建交互式应用非常关键。 4. **日期和时间选择器**:YUI Calendar组件提供了一个用户友好的日历界面,可以...
3. **Event(事件)**:YUI的事件系统支持事件监听、事件代理和事件分发,使得事件处理更加高效和灵活。 4. **Animation(动画)**:提供了平滑的CSS和属性动画,可以创建各种复杂的过渡效果。 5. **DataSource...
6. **IO和Ajax**:YUI 3 支持异步数据交互,提供了XMLHttpRequest的封装,方便开发者进行Ajax请求,实现前后端数据的通信。 7. **JSON和XML处理**:YUI 3 提供了处理JSON和XML数据的工具,方便在JavaScript中解析和...
3. **源码分析** YUI 2.5.2的源码可以深入了解其内部实现机制,对于学习JavaScript编程和优化性能非常有帮助。通过阅读源码,开发者可以学习到如何组织代码结构,以及如何设计高效的API接口。 4. **说明文档** ...
3. **DOM操作** Node模块提供了便捷的DOM操作接口,可以快速地选取、创建、修改DOM元素,增强了JavaScript对HTML文档的操作能力。 4. **CSS样式管理** YUI的StyleSheet模块允许开发者动态修改CSS样式,实现页面...
1. **模块**:YUI由多个模块组成,如Core(核心)、Event(事件)、Node(DOM节点操作)、IO(异步数据请求)等。每个模块都提供了一组相关功能。 2. **类**:每个模块下有若干个类,这些类定义了对象的行为和属性...
3. **初始化YUI**:调用`YUI().use()`方法初始化YUI,并传入需要的模块。 4. **编写代码**:在回调函数中编写具体的应用逻辑,使用YUI提供的API。 **四、YUI与其他JavaScript库的比较** YUI与jQuery、Dojo、...
<script src="http://yui.yahooapis.com/3.x.x/build/yui/yui-min.js"></script> YUI().use('node', function (Y) { // 在这里编写你的代码,此时Y对象包含了node模块的所有功能 }); ``` ### 4. 学习路径 ...