dojo学习第二天 ajax异步请求之绑定列表


Posted in Javascript onAugust 29, 2011

用户不喜欢滚动条,于是我们做成了选项卡切换,用户不喜欢刷新页面,于是我们就要使用ajax了,前些年,几乎每个web端开发人员,都以懂得一点点ajax而自豪,但知道使用ajax是远远不够的,因为技术是为人而服务的,不能滥用技术,你总不能为了验证一个文本框textbox而去异步请求一次。我还遇到过有人,更新用户信息的时候,使用ajax更新,用户信息中的图片,又使用回发来更新,一个更新中,先ajax卡在那,然后再回发,你说这是多么2的行为?这种人还不少,我还遇到过有人用ajax更新后再location定位一下,我就不明白了,他那ajax有啥意义?纯是为了显摆他知道有这么个东西。

说到ajax,不得不说下跨域的问题,就是你异步请求到其它域名下的文件时,出现了访问安全问题,网上说得很多解决方法,大都是忽悠人的,不过还是有两种绝对可行的地,比如aa.com下想异步访bb.com下的cc.ashx:

1。我们可以在aa.com下建dd.ashx文件,然后用ajax访问dd.ashx文件,这时,dd.ashx再去访问bb.com下的cc.ashx,因为后台的访问是没有跨域问题的,所以这时就不存在跨域了,因为你异步访问的还是aa.com同域的文件dd.ashx。至于dd.ashx怎么访问bb.com我就不多说了,可以搜下小偷程序,原理差不多。
2。jsonp返回,这种方法现在比较流行,因为第一种多了一次请求,速度难免会有影响。jsonp这个名字,我觉得一点都不好,我更喜欢叫它"json回调",它的原理是<script src="http://bb.com/cc.ashx"></script>,你是否已经看出来了,这样引用外部JS文件是不存在跨域的,这里跟json有何关系呢?jsonp就是在服务端返回一个json对象,在客户端进行回调执行这个对象的相关操作,是否越听越不清楚了?我也不误导你们了,自己去搜吧。

所以呢,json在整个js学习中都是至关重要的,(这个话题转得有点硬) ,一般ajax返回的也都是json,所以在dojo里,对json又有了一些新的处理,我们看下面的代码:

var jsons=[{},{}]; 
jsons[0].url="https://3water.com"; 
jsons[0].text="三水点靠木"; 
jsons[1].url="http://www.lovewebgames.com"; 
jsons[1].text="我的网站"; 
var list=document.getElementById("list"); 
dojo.forEach(jsons,function(onejson){ 
var li=document.createElement("li"); 
li.innerHTML=dojo.string.substitute("<a href='${url}'>${text}</a>",onejson});,); 
list.appendChild(li);

还是一句句来解释,不因事小而忽略,首先我声明了一个数组对象jsons,里面放的是两json对象,分别给它的url和text赋值,我为什么要分开这么几行写,主要是为了好理解,你也可以写成如下一行:

var jsons=[{url:"https://3water.com",text:"三水点靠木"},{url:"http://www.lovewebgames.com/",text:"我的网站"}];
然后我们遍历这个数组,在这里我使用的是dojo的forEach方法,它有两个参数,一个是要遍历的对象,第二个是一个函数handle(你叫它句柄也好,叫它委托也行),它有个参数,就是遍历的每一项。最后我还用到了一个字符串模版来得到json里的属性值,${url}就相当于取了onjson.url的值,${text}=onejson.text。例子请点击这里

现在我们要做个常用的列表绑定,他拥有一些常见的功能,行样式交替,列宽度可更拖动,可选择排序,算是一个标准的基础表格,如下图所示:

dojo学习第二天 ajax异步请求之绑定列表
做这个又要引用新的组件了, 还有新的针对表格主题样式,MF的,直接上完代码再解释:
<style> 
@import url(../dijit/themes/tundra/tundra.css); 
@import url(../dojo/resources/dojo.css); 
@import url(../dojox/grid/resources/tundraGrid.css); 
</style> 
<script> 
dojo.require("dojo.parser"); 
dojo.require("dojo.data.ItemFileReadStore"); 
dojo.require("dojox.grid.DataGrid"); 
</script>

这里新加了tundraGrid.css这个样式,用来控制表格外观,ItemFileReadStore这个文件是用存储数据源的,dataGrid是表格声明文件.调用如下所示:
<div dojoType="dojo.data.ItemFileReadStore" 
jsId="wishStore" url="services/cigar_wish_list.json"> 
</div> 
<table id="grid" dojoType="dojox.grid.DataGrid" width='100%' store="wishStore" clientSort="true" autoHeight="true" autoWidth="true"> 
<thead> 
<tr> 
<th field="description" width="15em">Cigar</th> 
<th field="size">Length/Ring</th> 
<th field="origin">Origin</th> 
<th field="wrapper">Wrapper</th> 
<th field="shape">Shape</th> 
</tr> 
</thead> 
</table>

第一行,我们把数据源存储在了一个扩展属性jsId="wishStore"的div上,然后在table上关联store到上面的数据源上,最后在每一列上用扩展属性field来绑定要显示的字段,这样就算绑定成功,DataGrid里还有一些其他的属性,这里有clientSort(排序)、autoHeight(自动宽度)等等,具体其他的请看官网上的介绍
http://dojotoolkit.org/reference-guide/dojox/grid/DataGrid.html
       今天的内容就这么多了,可能有点浅显,不过,刚入门,还是慢慢来得好。具体的示例请点击这里查看。
Javascript 相关文章推荐
javascript XML数据显示为HTML一例
Dec 23 Javascript
jquery validator 插件增加日期比较方法
Feb 21 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
js函数排序的实例代码
Jul 01 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
实例教学如何写vue插件
Nov 30 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 #Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 #Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 #Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 #Javascript
Javascript 面向对象编程(一) 封装
Aug 28 #Javascript
Javascript继承机制的设计思想分享
Aug 28 #Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 #Javascript
You might like
php生成图片验证码-附五种验证码
2015/08/19 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
JavaScript库 开发规则
2009/01/31 Javascript
jquery创建div 实现代码
2009/04/27 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
js实现本地时间同步功能
2017/08/26 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python WEB应用部署的实现方法
2019/01/02 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
python能开发游戏吗
2020/06/11 Python
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
业务总经理岗位职责
2014/02/03 职场文书
投标担保书范文
2014/04/02 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
辩论会主持词
2015/07/03 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
python爬虫框架feapde的使用简介
2021/04/20 Python
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android