快捷導(dǎo)航

dojo學(xué)習(xí)第二天 ajax異步請(qǐng)求之綁定列表

更新時(shí)間：2011年08月29日 23:35:27 作者：

在上一篇《dojo學(xué)習(xí)第一天 Tab選項(xiàng)卡》，我們學(xué)到了，怎么用dojo的選項(xiàng)卡插件來制作更易于用戶使用的表單，所有的一切都是為了使用更加方便，一切都是為了用戶的體驗(yàn)

用戶不喜歡滾動(dòng)條，于是我們做成了選項(xiàng)卡切換，用戶不喜歡刷新頁面，于是我們就要使用ajax了，前些年，幾乎每個(gè)web端開發(fā)人員，都以懂得一點(diǎn)點(diǎn)ajax而自豪，但知道使用ajax是遠(yuǎn)遠(yuǎn)不夠的，因?yàn)榧夹g(shù)是為人而服務(wù)的，不能濫用技術(shù)，你總不能為了驗(yàn)證一個(gè)文本框textbox而去異步請(qǐng)求一次。我還遇到過有人，更新用戶信息的時(shí)候，使用ajax更新，用戶信息中的圖片，又使用回發(fā)來更新，一個(gè)更新中，先ajax卡在那，然后再回發(fā)，你說這是多么2的行為？這種人還不少，我還遇到過有人用ajax更新后再location定位一下，我就不明白了，他那ajax有啥意義？純是為了顯擺他知道有這么個(gè)東西。

說到ajax，不得不說下跨域的問題，就是你異步請(qǐng)求到其它域名下的文件時(shí)，出現(xiàn)了訪問安全問題，網(wǎng)上說得很多解決方法，大都是忽悠人的，不過還是有兩種絕對(duì)可行的地，比如aa.com下想異步訪bb.com下的cc.ashx：

1。我們可以在aa.com下建dd.ashx文件，然后用ajax訪問dd.ashx文件，這時(shí)，dd.ashx再去訪問bb.com下的cc.ashx，因?yàn)楹笈_(tái)的訪問是沒有跨域問題的，所以這時(shí)就不存在跨域了，因?yàn)槟惝惒皆L問的還是aa.com同域的文件dd.ashx。至于dd.ashx怎么訪問bb.com我就不多說了，可以搜下小偷程序，原理差不多。
2。jsonp返回，這種方法現(xiàn)在比較流行，因?yàn)榈谝环N多了一次請(qǐng)求，速度難免會(huì)有影響。jsonp這個(gè)名字，我覺得一點(diǎn)都不好，我更喜歡叫它"json回調(diào)",它的原理是<script src="http://bb.com/cc.ashx"></script>，你是否已經(jīng)看出來了，這樣引用外部JS文件是不存在跨域的，這里跟json有何關(guān)系呢?jsonp就是在服務(wù)端返回一個(gè)json對(duì)象，在客戶端進(jìn)行回調(diào)執(zhí)行這個(gè)對(duì)象的相關(guān)操作，是否越聽越不清楚了？我也不誤導(dǎo)你們了，自己去搜吧。

所以呢，json在整個(gè)js學(xué)習(xí)中都是至關(guān)重要的，(這個(gè)話題轉(zhuǎn)得有點(diǎn)硬) ，一般ajax返回的也都是json,所以在dojo里，對(duì)json又有了一些新的處理，我們看下面的代碼:

復(fù)制代碼代碼如下:

 
var jsons=[{},{}]; 
jsons[0].url="http://chabaoo.cn"; 
jsons[0].text="腳本之家"; 
jsons[1].url="http://www.lovewebgames.com"; 
jsons[1].text="我的網(wǎng)站"; 
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); 

還是一句句來解釋，不因事小而忽略，首先我聲明了一個(gè)數(shù)組對(duì)象jsons，里面放的是兩json對(duì)象，分別給它的url和text賦值，我為什么要分開這么幾行寫，主要是為了好理解，你也可以寫成如下一行:

var jsons=[{url:"http://chabaoo.cn",text:"腳本之家"},{url:"http://www.lovewebgames.com/",text:"我的網(wǎng)站"}];
然后我們遍歷這個(gè)數(shù)組，在這里我使用的是dojo的forEach方法，它有兩個(gè)參數(shù)，一個(gè)是要遍歷的對(duì)象，第二個(gè)是一個(gè)函數(shù)handle(你叫它句柄也好，叫它委托也行)，它有個(gè)參數(shù)，就是遍歷的每一項(xiàng)。最后我還用到了一個(gè)字符串模版來得到j(luò)son里的屬性值,${url}就相當(dāng)于取了onjson.url的值，${text}=onejson.text。例子請(qǐng)點(diǎn)擊這里

現(xiàn)在我們要做個(gè)常用的列表綁定,他擁有一些常見的功能，行樣式交替，列寬度可更拖動(dòng)，可選擇排序，算是一個(gè)標(biāo)準(zhǔn)的基礎(chǔ)表格，如下圖所示:

做這個(gè)又要引用新的組件了，還有新的針對(duì)表格主題樣式，MF的，直接上完代碼再解釋:

復(fù)制代碼代碼如下:

 
<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這個(gè)樣式，用來控制表格外觀，ItemFileReadStore這個(gè)文件是用存儲(chǔ)數(shù)據(jù)源的，dataGrid是表格聲明文件.調(diào)用如下所示：

復(fù)制代碼代碼如下:

 
<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> 

第一行，我們把數(shù)據(jù)源存儲(chǔ)在了一個(gè)擴(kuò)展屬性jsId="wishStore"的div上，然后在table上關(guān)聯(lián)store到上面的數(shù)據(jù)源上，最后在每一列上用擴(kuò)展屬性field來綁定要顯示的字段，這樣就算綁定成功，DataGrid里還有一些其他的屬性，這里有clientSort(排序)、autoHeight(自動(dòng)寬度)等等，具體其他的請(qǐng)看官網(wǎng)上的介紹
http://dojotoolkit.org/reference-guide/dojox/grid/DataGrid.html
今天的內(nèi)容就這么多了，可能有點(diǎn)淺顯，不過，剛?cè)腴T，還是慢慢來得好。具體的示例請(qǐng)點(diǎn)擊這里查看。

您可能感興趣的文章: