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