dojo學習第二天 ajax非同步請求之繫結資料行表

使用者不喜歡捲軸，於是我們做成了選項卡切換，使用者不喜歡重新整理頁面，於是我們就要使用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
今天的內容就這麼多了，可能有點淺顯，不過，剛入門，還是慢慢來得好。具體的樣本請點擊這裡查看。