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

來源:互聯網
上載者:User

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.