簡(jiǎn)介

　　在傳統(tǒng)的中，每次datagrid控件填充或更新都相應(yīng)于一次到服務(wù)器的數(shù)據(jù)回饋。但是，借助于ajax技術(shù)，我們可以在不進(jìn)行表單提交（刷新）的情況下即可以填充datagrid控件。

　　在本文中，我們通過(guò)一個(gè)簡(jiǎn)單示例并借助于一個(gè)dropdownlist控件的幫助來(lái)討論如何達(dá)到這一目的。在這個(gè)例子中，我們使用了一個(gè)dropdownlist控件；一旦改變dropdownlist的值，它即用相應(yīng)的城市名來(lái)填充datagrid控件，在此過(guò)程中我們巧妙了引入了ajax技術(shù)。

　　既然我們已經(jīng)了解一些ajax的基本知識(shí)，現(xiàn)在讓我們進(jìn)一步討論這個(gè)datagrid示例程序。在本例中，我們主要解釋如何從客戶端發(fā)送請(qǐng)求，如何處理請(qǐng)求，以及如何運(yùn)行客戶端腳本來(lái)顯示datagrid中的數(shù)據(jù)。

　　示例應(yīng)用程序結(jié)構(gòu)

　　在本例中，我們共建立了兩個(gè)web表單（ajaxserver.aspx和datagridex.aspx），一個(gè)javascript文件和一個(gè)層疊式樣表文件（css）。文件ajaxserver.aspx負(fù)責(zé)服務(wù)器端功能（一旦選擇即返回作者結(jié)果），而文件datagridex.aspx負(fù)責(zé)使用ajax技術(shù)顯示返回的結(jié)果。下面讓我們作進(jìn)一步分析。

　　1. ajaxserver.aspx

　　這個(gè)頁(yè)面以選擇的“city”作為請(qǐng)求。它取回所有的屬于該城市的作者并且把一個(gè)xml響應(yīng)字符串返回到客戶端（見(jiàn)列表1）。

　　列表1—ajaxsever.aspx.vb代碼

private sub page_load(byval sender as system.object, 
byval e as system.eventargs) handles mybase.load

if not ispostback then

choice = request("choice")

if choice.length > 0 then

response.clear()

if choice = "all cities" then

da = new sqldataadapter("select * from authors", con)

else

da = new sqldataadapter("select * from authors where city ='" & request("choice") & "'", con)

end if

da.fill(ds)

chstring = ds.getxml()

response.clear()

response.contenttype = "text/xml"

response.write(chstring)

response.end()

else

response.clear()

response.end()

end if

else

response.clear()

response.end()

end if

end sub

　　2. datagridex.aspx

　　這個(gè)頁(yè)面開(kāi)始把所有的作者信息顯示在datagrid中。每當(dāng)dropdownlist中發(fā)生變化，它使用javascript文件取回內(nèi)容并預(yù)以顯示。注意：為了顯示當(dāng)前正運(yùn)行的進(jìn)程的狀況，我們?cè)诖耸褂昧艘粋€(gè)面板。該面板具有一個(gè)gif圖像（開(kāi)始不可見(jiàn)）—在處理發(fā)生于服務(wù)器端時(shí)它被顯示，而一旦處理結(jié)束即變?yōu)椴豢梢?jiàn)的（見(jiàn)圖1）。我們這樣做的根本目的就是為了讓用戶詳細(xì)了解當(dāng)前正運(yùn)行的進(jìn)程情況。

圖1.datagridex.aspx的快照（為了顯示進(jìn)程）

　　3.javascript文件

　　這個(gè)文件負(fù)責(zé)整個(gè)進(jìn)程的處理請(qǐng)求和響應(yīng)。這個(gè)文件將生成xmlhttprequest并且把選擇的城市發(fā)送到ajaxserver.aspx頁(yè)面。一旦返回，它得到一個(gè)類(lèi)似于數(shù)據(jù)庫(kù)表的輸出結(jié)果—該結(jié)果將被填充到datagrid中。

　　一開(kāi)始，上圖面板中的“進(jìn)程”圖像是不可見(jiàn)的。當(dāng)dropdownlist選擇發(fā)生變化時(shí)，“進(jìn)程”圖像就顯示出來(lái)，直到用返回的結(jié)果填充datagrid為止（見(jiàn)列表2）。該datagrid被返回的數(shù)據(jù)填充—通過(guò)使用一個(gè)簡(jiǎn)單的for循環(huán)來(lái)讀取返回的內(nèi)容（見(jiàn)列表3）。

　　列表2—進(jìn)程狀態(tài)

function fetchdgcontents(){

var selecteditem = document.form1.ddlcity.value;

imgtbl.style.visibility = 'visible';

var requesturl = ajaxserverpagename + "?choice=" +

encodeuricomponent(selecteditem);

createxmlreq(); 

if(xmlreq){

xmlreq.onreadystatechange = handleresponse;

xmlreq.open("get", requesturl, true);

xmlreq.send();

}

}

　　列表3—使用收到的響應(yīng)數(shù)據(jù)填充datagrid控件

function filltable(scity){

var auth = scity.getelementsbytagname('authors'); 

var tbl = document.getelementbyid('dgauthors').getelementsbytagname("tbody")[0];

for(var i=0;i
{

var row = document.createelement("tr"); 

row.setattribute("classname","text");

row.setattribute("bgcolor","#ececec");

for(var j=0;j
{

var cell = document.createelement("td"); 

cell.innerhtml = auth.context.childnodes(i).childnodes(j).text;

row.appendchild(cell); 

}

tbl.appendchild(row)

}

}

　　運(yùn)行示例代碼

　　你可以下載本文相應(yīng)的示例源碼進(jìn)行分析。首先，創(chuàng)建一個(gè)命名為myajax的虛擬目錄，然后把解壓后的文件復(fù)制到該目錄下即可。最后，打開(kāi)visual studio.net解決方案資源管理器并按f5鍵運(yùn)行程序，并觀察結(jié)果。

　　總結(jié)

　　本文通過(guò)一個(gè)簡(jiǎn)單的例子—使用ajax技術(shù)操作datagrid控件—來(lái)顯示服務(wù)器調(diào)用的處理狀態(tài)。這是把a(bǔ)jax技術(shù)應(yīng)用于.net平臺(tái)的又一簡(jiǎn)單示例。