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 相关文章推荐
JSON 教程 json入门学习笔记
Sep 22 Javascript
JS高级笔记
Jul 13 Javascript
简单实用的全选反选按钮例子
Oct 18 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
js简单抽奖代码
Jan 16 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
vue2.x 对象劫持的原理实现
Apr 19 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
非常强大的 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购物车实现代码
2011/10/10 PHP
PHP实现下载功能的代码
2012/09/29 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
CSS常用网站布局实例
2008/04/03 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
Python实现注册、登录小程序功能
2018/09/21 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
一个C/C++编程面试题
2013/11/10 面试题
医学实习生自我鉴定
2013/12/12 职场文书
化学学院毕业生自荐信范文
2013/12/17 职场文书
大班开学家长寄语
2014/04/04 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
六查六看六改心得体会
2014/10/14 职场文书
婚庆答谢词
2015/01/04 职场文书
大学学生会辞职信
2015/05/13 职场文书
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript