KISSY基础篇乄KISSY之IO（2）
第14天：KISSY之IO（2）
今日任务：创建Maven Project并学习IO模块.
这一节我们主要来看一下IO模块里的一些方法。
一、Maven Project
（1）创建mavenproject
创建Maven Project->maven-archetype-webapp,创建自己的Group Id和Artfact id，至于Package可以先不写
（2）项目配置
1、在pom.xml里添加SpringMVC需要的jar包
2、添加SpringMVC需要的配置文件spring-mvc.xml
3、配置web.xml文件
注：详细配置可参看项目实例中这三个文件的配置，这里就不再赘述了。
二、数据传输
这是IO模块数据传输实例中的js文件中的代码，本实例只在controller层获取数据作为模拟，详情请参考项目实例。
实例1：
这个实例的功能是传输字符串给后台，后台经过处理后返回响应信息代表的 json 对象。
| KISSY.use('io,node', function(S, io, Node) { io({ url : '/kissyDemo/testController/ioTest.do', data : { top:30, bottom:15 }, dataType : "json", success : function(databack) { Node.one('#datas').html( '最高温度范围：' + databack.top1 +'~' + databack.top2 + '摄氏度<br>最低温度范围：' + databack.bottom1+'~' + databack.bottom2 + '摄氏度'); }, error : function() { alert("显示错误"); } }); }); |
实例2：
这个实例的功能时读取文件，并返回响应信息代表的 json 对象。
| KISSY.use('io,node', function(S, io, Node) { io({ url : './file/ioFile.txt', dataType : "json", success : function(data) { Node.one('#filetxt').html('您正在使用：' + data.name + '，版本号：' + data.version + '，此技术用于：'+ data.use + '。感谢您的使用！'); }, error : function() { alert("显示错误"); } }); }); |
三、IO模块各个方法
(1)IO.setupConfig()
为所有的ajax请求（包括未来）设定默认设置。参数cfg（Object）用来配置默认请求配置的键值对对象。其中的每个配置都是可选的。通过setuoConfig设置后，除非单个请求设置了对应的配置值，否则后续所有的ajax请求都是用该设置。例如：
设置默认的请求地址为 /xmlhttp/ ，并使用 POST 方式。那么接下来的请求都会往 /xmlhttp/ 发送请求L
| IO.setupConfig({ url:'/xmlhttp/', type:'post' }); |
再使用IO时便默认url和type设置：
| IO({ data:{x:'mydata'} }); |
(2)IO.get()与IO.post()
发送http get请求。参数：url(string) –请求地址；data(Object|string) –请求附带的参数；callback (function)– 请求成功后的回调；dataType(string) –传到回调函数作为参数的数据类型。
请求页面 test.txt , 但是忽略返回结果：
| IO.get("test.txt"); |
请求页面 test.txt , 并附带一些参数传递给后端：
| IO.get("test.txt",{ name:"john", time:"2pm" }); |
alert 请求成功后返回的结果，数据类型由响应的 content-type 决定
| IO.get("test.txt",function(d){ alert(d); }); |
alert 请求成功后返回的 json 数据，和响应的 content-type 无关
| IO.get("test.txt",function(d){ alert(d); },"json"); |
如实例2可改写为中：
| KISSY.use('io,node', function(S, io, Node) { io.post('./file/ioFile.txt',function(data) { Node.one('#filetxt').html('您正在使用：' + data.name + '，版本号：' + data.version + '，此技术用于：'+ data.use + '。感谢您的使用！'); },"json"); }); |
注：post与get用法类似。
四、IO.getJSON()
发送http get请求，无视请求响应的 Content-type，将返回信息解析为 json 作为第一个参数调用 callback 回调。参数：url，data，callback。
实例3：
| KISSY.use('node,io',function(S,Node,IO){ var $=Node.all; $("#getJSON").on("click",function(){
IO.getJSON("/kissyDemo/testController/test.do",function(d){ Node.one('#details').html('用户名：' + d.user + '<br>密码：' + d.password); }); }); }); |
这里是在SpringMVC框架的基础上获取json数据并显示在页面。
五、IO.jsonp()
发送jsonp请求，将返回信息解析为json作为第一个参数调用callback 回调。参数：url，data，callback。
| IO({ dataType:'jsonp', url:/../, data:{ //数据 }, jsonp:"jsoncallback", success:function (data) { //处理成功返回的数据 } }); |
六、IO.upload()
发送jsonp请求，将返回的json信息作为第一个参数调用callback 回调。参数：url，form(表单元素)，data，callback，dataType。form参数代表的form节点中如果有input type=”file”的节点会自动启动iframe-upload模式，否则收集form内input数据启动普通xhr模式。Form参数用户文件上传时请设置type：’post’。
| IO.upload("/kissyDemo/testController/test.do","#form",function(d){ //your code },"json"); |
七、IO.serialize()
序列化一系列表单元素为可提交的字符串。参数：elements代表表单元素的集合。方法返回一个将表单元素 url 编码过的字符串，表单元素通常包括 <input> <textarea> <select> ，元素必须使用 name 属性。或者直接对整个 <form> 元素的所有表单子孙元素进行序列化。
测试页面代码：
| <form id='f'> <div> <input type="text" name="a" value="1" id="a" /> </div> <div> <input type="text" name="b" value="2" id="b" /> </div> <div> <input type="hidden" name="c" value="3" id="c" /> </div> <div> <textarea name="d" rows="8" cols="40">4</textarea> </div> <div> <select name="e"> <option value="5" selected="selected">5</option> <option value="6">6</option> <option value="7">7</option> </select> </div> <div> <input type="checkbox" name="f" value="8" id="f" /> </div> <div> <input type="submit" name="g" value="Submit" id="g" /> </div> </form> |
进行序列化js代码：
| KISSY.use('node,io',function(S,Node,IO){ var $=Node.all; var str1 = IO.serialize("#f"); var str2 = IO.serialize(Node.all("#f").all("input")); $("#results1").text(str1); $("#results2").text(str2); }); |
结果是：
id为results1的值：a=1&b=2&c=3&d=4&e=5
id为results2的值：a=1&b=2&c=3