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 相关文章推荐
读jQuery之八 包装事件对象
Jun 21 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
Javascript之Date对象详解
Jun 07 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
非常强大的 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
2006/12/13 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
php时间戳转换代码详解
2019/08/04 PHP
过虑特殊字符输入的js代码
2010/08/05 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
python Django模板的使用方法
2016/01/14 Python
Python 处理数据的实例详解
2017/08/10 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
毕业生就业自荐书
2013/12/15 职场文书
法律七进实施方案
2014/03/15 职场文书
保研导师推荐信
2015/03/25 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
python操作xlsx格式文件并读取
2021/06/02 Python
python中if和elif的区别介绍
2021/11/07 Python