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控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
JS中跳出循环的示例代码
Sep 14 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
vue中轮训器的使用
Jan 27 Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 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中的HashTable结构详解
2013/06/13 PHP
php实现微信公众号无限群发
2015/10/11 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
javascript数据类型示例分享
2015/01/19 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
vue.js数据绑定操作详解
2018/04/23 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
python正则表达式中的括号匹配问题
2014/12/14 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
详解Django CAS 解决方案
2019/10/30 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
佳能德国网上商店:Canon德国
2017/03/18 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
《槐乡五月》教学反思
2014/04/25 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
企业法人任命书
2015/09/21 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
JavaScript的function函数详细介绍
2021/11/20 Javascript