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

用户不喜欢滚动条,于是我们做成了选项卡切换,用户不喜欢刷新页面,于是我们就要使用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="http://www.jb51.net";
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:"http://www.jb51.net",text:""},{url:"http://www.lovewebgames.com/",text:"我的网站"}];
然后我们遍历这个数组,在这里我使用的是dojo的forEach方法,它有两个参数,一个是要遍历的对象,第二个是一个函数handle(你叫它句柄也好,叫它委托也行),它有个参数,就是遍历的每一项。最后我还用到了一个字符串模版来得到json里的属性值,${url}就相当于取了onjson.url的值,${text}=onejson.text。例子请点击这里

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


做这个又要引用新的组件了, 还有新的针对表格主题样式,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
       今天的内容就这么多了,可能有点浅显,不过,刚入门,还是慢慢来得好。具体的示例请点击这里查看。

时间: 2024-08-02 07:28:04

dojo学习第二天 ajax异步请求之绑定列表_dojo的相关文章

大数据-ajax异步请求数据问题。。。看不出哪里错了。。。跪求大神指点。。。

问题描述 ajax异步请求数据问题...看不出哪里错了...跪求大神指点... 我做ajax读取Excel表格里的数据...这是JAVA代码 java: public static List<HashMap<Object,Object>> readExcel(String excelPath){ //声明一个集合用于存储解析出来的数据 List<HashMap<Object,Object>> maps = new ArrayList<HashMap&l

jquery ajax异步请求回调的详解

是指在写ajax异步请求时该如果写回调呢?写啥回调呢?错误时触发哪个回调呢? 常见的有: $.post(url, {}, function(res){ }, 'json'); 殊不知这种在出错的时候没有任何的处理... 通常我这样写: $.ajax({     url: '',     data: {},     dataType: 'json',     type: 'POST',     success: function(res){},     error: function(){},  

Ajax异步请求技术实例讲解

AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX不是新的编程语言,而是一种使用现有标准的新方法.ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. ajax是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换.ajax可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分

Ajax异步请求PHP数据

接到了老师的一个作业,实现的布局如图: 如果输入了科室ID,科室名字只显示与ID对应的,若没有输入,则显示全部,然后根据I科室名字的值,在所属大科中的文本框自动显示科室名字所在的大科.例如:选择了心血管内科,则在所属大科显示内科. 主要代码如下: 根据ID请求科室 function showHint(str) { var xmlhttp; if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new

Ajax异步请求JSon数据(图文详解)_AJAX相关

上一篇讲了Ajax请求数据text类型,text和html都是处理比较简答的数据,而在编程过程中使用Ajax调用数据的时候,难免要进行逻辑的处理,接受的数据也变的复杂比如数组类型的数据,这时候就需要使用JSON数据类型进行处理,今天就说说,JSON数据请求过程中的一些细节: 友情提醒本文所需工具和原料如下: wamp或lamp环境.jquery.js.编辑器 具体方法/步骤请看下面: 1.创建基本的文件结构json_ajax.html和json_ajax.php,下载jquery.js,如图:

ajax-Chrome处理本地Ajax异步请求的问题

问题描述 Chrome处理本地Ajax异步请求的问题 --allow-file-access-from-files 加了这个还是会显示XMLHttpRequest cannot find file怎么回事 求解 解决方案 请求的文件不存在也会报这种错误,自己检查下路径是否存在,文件名是否拼写正确 解决方案二: 解决办法是给chrome添加启动参数:--allow-file-access-from-files ,这样本地ajax请求就不会报跨域错误了.(注意如果给chrome添加多个启动参数,每个

java ajax-分析ajax异步请求的过程?

问题描述 分析ajax异步请求的过程? function check_name(){ alert(1); var xhr = getXhr(); xhr.open('post','check_name.do',true); alert(2); xhr.setRequestHeader( 'content-type', 'application/x-www-form-urlencoded'); alert(3); xhr.onreadystatechange=function(){ alert(4

SpringMVC环境下实现的Ajax异步请求JSON格式数据_AJAX相关

一 环境搭建 首先是常规的spring mvc环境搭建,不用多说,需要注意的是,这里需要引入jackson相关jar包,然后在spring配置文件"springmvc-servlet.xml"中添加json解析相关配置,我这里的完整代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schem

浅谈Jquery中Ajax异步请求中的async参数的作用_jquery

之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html <a href="javascript:void(0)" onmouseover="testAsync()"> asy.js function testAsync{ var temp; $.ajax({ async: false, type : "GET", url : 'tet.php', complete: functi