基于AJAX技术的DataGrid控件编程
利用AJAX_JSON实现DataGrid
开发研究与设计技术本栏目责任编辑：谢媛媛１概述在现在的企业应用中，大量需要显示表数据，在Ｊ２ＥＥ中，大部分情况下，很多的开发人员普遍采用迭代或遍历的办法显示数据，再根据需要显示发那也信息，而用过ＡＳＰ．Ｎｅｔ的人肯定对它的ＤａｔａＧｒｉｄ组件印象很深刻，它不但能显示数据集和数据表数据而且还提供分页功能，但是在ＪＡＶＡ里面却没有类似的ＤａｔａＧｒｉｄ组件可以复用，而在我们实际的项目中却大量需要用到它，为此我们在项目中利用ＪＳＯＮ＋ＡＪＡＸ自己开发出了一个ＤａｔａＧｒｉｄＪＳＰ标签组件，它具有以下特性：（１）分页方式可采取超级链接、按钮或者图片，设置ｐａｇｅＳｉｚｅ＝０不显示分页；（２）设置ｏｐｔｉｏｎＴｙｐｅ属性可以在第一列自动添加ＣｈｅｃｋＢｏｘ或者Ｒａｄｉｏ或不加；（３）支持日期格式化以及奇数行和偶数行不同的风格；（４）采用ＡＪＡＸ＋ＪＳＯＮ实现第一次之后数据的读取，大大提高了效率；（５）采取类似ＪＳＦＤａｔａＭｏｄｅｌ数据模型，可扩展性强；（６）支持ＡＪＡＸ模式和非ＡＪＡＸ模式以及默认风格设置；（７）支持绝大部分表格属性的设置，支持ＩＥ和Ｆｉｒｅｆｏｘ。
其效果图如图１所示（为了减小图片占用幅面，故使用简单表结构和较少的行）：图１采用ＣｈｅｃｋＢｏｘ和图片分页效果上面的效果图对应ＪＳＰ标签代码为：＜ｄａｔａ：ｄａｔａｇｒｉｄｄａｔａＳｏｕｒｃｅ＝＂ｄａｔａ＂ｉｄ＝＂ｄｉｃｔ＂ｂｏｒｄｅｒ＝＂０＂ａｌｉｇｎ＝＂ｃｅｎｔｅｒ＂ｄｅｆａｕｌｔＲｏｗＳｔｙｌｅ＝＇ｔｒｕｅ＇ｐａｇｅＳｉｚｅ＝＇６＇ｃｓｓＣｌａｓｓ＝＇ｔａｂｌｅ０＇ｐａｇｅｒＳｔｙｌｅ＝＇２＇ｗｉｄｔｈ＝＇５００ｐｘ＇ｏｐｔｉｏｎＴｙｐｅ＝＇１＇ｏｐｔｉｏｎＢｉｎｄ＝＇ＤａｔａＮｏ＇ｈｅａｄＳｔｙｌｅ＝＂ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ：＃ＥＥＥＥＥＥ；ｈｅｉｇｈｔ：２０ｐｘ；＂ｃｅｌｌＳｐａｃｉｎｇ＝＂１＂ｃｅｌｌＰａｄｄｉｎｇ＝＂１＂ａｊａｘ＝＇ｔｒｕｅ＇ｆｉｒｓｔＩｍａｇｅ＝＂ｉｍａｇｅｓ／ａｒｒｏｗ－ｆｉｒｓｔ．ｇｉｆ＂ｌａｓｔＩｍａｇｅ＝＂ｉｍａｇｅｓ／ａｒｒｏｗ－ｌａｓｔ．ｇｉｆ＂ｎｅｘｔＩｍａｇｅ＝＂ｉｍａｇｅｓ／ａｒｒｏｗ－ｎｅｘｔ．ｇｉｆ＂ｐｒｅｖＩｍａｇｅ＝＂ｉｍａｇｅｓ／ａｒｒｏｗ－ｐｒｅｖ．ｇｉｆ＂＞＜ｄａｔａ：ｃｏｌｕｍｎｎａｍｅ＝＂ＤａｔａＮｏ＂ｔｉｔｌｅ＝＂数据编号＂ｈｅａｄＡｌｉｇｎ＝＂ｃｅｎｔｅｒ＂ｒｏｗＡｌｉｇｎ＝＂ｃｅｎｔｅｒ＂ｗｉｄｔｈ＝＇１００ｐｘ＇／＞＜ｄａｔａ：ｃｏｌｕｍｎｎａｍｅ＝＂ＤａｔａＮａｍｅ＂ｔｉｔｌｅ＝＂数据名称＂ｈｅａｄＡｌｉｇｎ＝＂ｃｅｎｔｅｒ＂ｒｏｗＡｌｉｇｎ＝＂ｃｅｎｔｅｒ＂ｗｉｄｔｈ＝＇１７０ｐｘ＇ｌｉｎｋ＝＂ＤａｔａＬｉｎｋ＂／＞＜ｄａｔａ：ｃｏｌｕｍｎｎａｍｅ＝＂ＤａｔａＴｉｍｅ＂ｔｉｔｌｅ＝＂时间＂ｈｅａｄＡｌｉｇｎ＝＂ｃｅｎ－ｔｅｒ＂ｒｏｗＡｌｉｇｎ＝＂ｃｅｎｔｅｒ＂ｗｉｄｔｈ＝＇２００ｐｘ＇ｄａｔｅＦｏｒｍａｔ＝＂ｙｙｙｙ－ＭＭ－ｄｄＨＨ：ｍｍ＂／＞＜／ｄａｔａ：ｄａｔａｇｒｉｄ＞２ＡＪＡＸ及ＪＳＯＮ简介２．１ＡＪＡＸＡＪＡＸ用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。
dhtmlXGrid表格显示控件简介
dhtmlXGrid表格显示控件简介dhtmlXGrid表格显示控件简介dhtmlxGrid是一个基于AJAX的Javascript表格控件，它提供非常强大的应用功能，易用的数据绑定技术，更好的性能用于支持大的数据量。
丰富的库函数JavaScript API使得程序更容易被定制和二次开发。
dhtmlxGrid可以加载不同类型的数据源：XML(支持自定义XML格式),JSON,CSV,JavaScript 数组,和HTML原生表格。
使用该表格控件,程序员可以容易的编写一个界面漂亮的，基于AJAX的表格。
该表格还内置多种单元格编辑器，条件查询功能，分组功能等等。
智能渲染和分页机制可以确保在大数据量的情况下仍然能够快速加载和显示。
丰富的事件处理函数可以让你更加灵活的控制和自定义和自己逻辑相关的功能。
双击或者按[F2]开始编辑选择的单元格。
使用[Tab]键到下一个单元格，使用[Up/Down]键在上下的单元格中移动。
使用[Shift/Ctrl]键选择一个或多个行.使用鼠标拖拽可以选择连续的单元格。
可以和Copy block to clipboard(if clipboard operations allowed)with Ctrl+C and paste to another program(e.g.,MS Excel).可以使用类似"X"的表达式来基于某列做查询。
服务器端集成作为一个纯客户端的解决方案,dhtmlxGrid可以和任意的服务器端集成，包括但不限于(PHP,Java,Ruby on Rails,,ColdFusion,以及其他语言).我们还提供一个和服务器通信的库dhtmlxConnector，支持利用AJAX 的方式（页面无刷新）保存或更新表格中的数据。
功能强大的电子表格dhtmlxGrid支持Web表格应用的各种场景，例如单元格合并，锁定行和锁定列，通过拖拽或函数调用的方式来移动列或者改变列的位置，甚至拷贝数据到剪贴板中和excel电子表格交互(CSV格式)。
JQueryEasUI的datagrid的使用方式总结
JQuery EasyUI的datagrid的使用方式总结第一步：添加样式和js脚本在前台添加展示数据表格的table元素例如：<div><table id="tt" style="width: 700px;" title="标题，可以使用代码进行初始化，也可以使用这种属性的方式" iconcls="icon-edit"></table></div>注：表格的属性可以在table中设置（Unobtrusive），也可以直接使用js脚本进行控制。
建议使用js脚本控制属性的定义：请参见Jquery easyui API第二步：引入jquery,jquery easyui,在doucment.ready中初始化表格的属性以及数据获取的方式。
例如：$("#tt").treegrid({url : 'role.do?action=findMenuRight',method : 'get',idField : 'menuIid',treeField : 'menuName',onLoadSuccess : function(row, data) {// 方便查看获取到的数据// alert(data);},columns : [[{title : '菜单名称',field : 'menuName',width : 321,formatter : menuDraw}, {field : 'htmlValue',title : '功能权限',width : 800,formatter : rightDraw}]],onLoadSuccess : function() {if ($("#isAdd").val() != "true") {var roleId = $("#roleId").val();checkedRights(roleId);}}});function menuDraw(value, row, index) {if (row.menuId != null & row.menuId != undefined) {var htmlValue = '<input onclick="cmChange(this)"type="checkbox" class="roleCM" parentId="'+ row._parentId+ '" name="menuCH_'+ row.menuId+ '" value="'+ row.menuId + '" />' + row.menuNamereturn htmlValue;}}function rightDraw(value, row, index){//TODO:Do something}Formatter指向的是一个方法,表示该字段是怎么绘制的html,该方法是继承dataGrid的,jquery easyui api的datagrid中The cell formatter function, take three parameters:value: the field value.绑定字段的值rowData: the row record data. 这一行的对象,可以使用行的其他字段rowIndex: the row index. 行号Code example:$('#dg').datagrid({columns:[[{field:'userId',title:'User', width:80,formatter: function(value,row,index){if (er){return ;} else {return value;}}}]]});后台返回的数据格式:{total: 7,rows: [{id: 1,name: "All Tasks", begin: "3/4/2010",end: "3/20/2010", progress: 60,iconCls: "icon-ok"},{id: 2,name: "Designing", begin: "3/4/2010",end: "3/10/2010", progress: 100,_parentId: 1,state: "closed"},{id: 21,name: "Database", persons: 2,begin: "3/4/2010",end: "3/6/2010", progress: 100,_parentId: 2},{id: 22,name: "UML",persons: 1,begin: "3/7/2010",end: "3/8/2010", progress: 100,_parentId: 2},{id: 23,name: "Export Document", persons: 1,begin: "3/9/2010",end: "3/10/2010",progress: 100,_parentId: 2},{id: 3,name: "Coding",persons: 2,begin: "3/11/2010",end: "3/18/2010",progress: 80},{id: 4,name: "Testing",persons: 1,begin: "3/19/2010",end: "3/20/2010",progress: 20}],footer: [{name: "Total Persons:",persons: 7,iconCls: "icon-sum"}]}Total中存放总记录数,用于分页,数据数组存在rows中,字段中必须有_parentId,id和name可以是别的字段,在idField : 'menuIid', treeField : 'menuName',中指定.footer可以省略。
利用jQuery及AJAX技术定时更新GridView的某一列数据
利⽤jQuery及AJAX技术定时更新GridView的某⼀列数据看到⼀个问题：定时更新GridView的某⼀列中的状态⽂本。
马上就有了思路：GridView最后会⽣成表格，所以我们在页⾯中通过Ajax更新表格的列，从⽽达到ajax更新GridView的效果。
具体实现：准备⼀个xml⽂件，⽤于存储要更新的数据，在页⾯中启动⼀个定时器，每隔5秒钟调⽤⼀个函数，函数⾥边通过$.ajax获取xml中的数据，解析xml，遍历表格⾏，匹配要更新的数据，更新。
getuserlist.xml定义⼀个UserList的根节点，下边每个UserItem对应⼀条数据，UID可以理解成主键，UStatus是最新的状态。
<?xml version="1.0" encoding="utf-8" ?><UserList><UserItem><UID>1</UID><UStatus>关闭</UStatus></UserItem><UserItem><UID>2</UID><UStatus>关闭</UStatus></UserItem><UserItem><UID>3</UID><UStatus>开放</UStatus></UserItem></UserList>test.html具体的逻辑都写到这⾥边了。
<html><head><title>Ajax Update Table Column</title><script src="jquery-1.3.1.min.js" type="text/javascript"></script><script type="text/javascript">window.onload=function(){//每隔5秒检查⼀下数据window.setInterval(checkStatus,5000);};//检查数据function checkStatus(){//ajax请求数据$.ajax({//换成你的⽂件，构造xml格式的数据就⾏了url: 'getuserlist.xml',//请求类型type: 'GET',//数据格式dataType: 'xml',//超时时间：1秒timeout: 2000,//加载数据发⽣错误error:function (XMLHttpRequest, textStatus, errorThrown) {alert("XMLHttpRequest="+XMLHttpRequest.responseText+"\ntextStatus="+textStatus+"\nerrorThrown="+errorThrown);},//成功加载数据success: function(xml){//遍历表格的⾏，需要给表格定义⼀个ID$("#userListTable tr").each(function(){//获取⾏的第⼀列，这⾥边保存了XML中对应的UID信息var trID=$(this).find("td").eq(0).text();//数据的新状态var trStatus="";//遍历xml中的UserItem$(xml).find("UserList > UserItem").each(function(){//获取UID和UStatus的值var uid = $(this).find("UID").text();var ustatus = $(this).find("UStatus").text();//⽐对当前⾏的ID和UID，如果相等，给数据的新状态赋值if(trID==uid){trStatus=ustatus;}});//如果数据的新状态不为空，则更新单元格中现实的⽂本if(trStatus!=""){$(this).find("td").eq(2).text(trStatus);}});}});}</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><!--这个表格有三列ID：数据的ID，相当于主键，⽤于从xml中查询新数据Name：只是显⽰Status：要更新的列--><table border="1" id="userListTable"><tr><th>ID</th><th>Name</th><th>Status</th></tr><tr><td>1</td><td>张三</td><td>开放</td></tr><tr><td>2</td><td>李四</td><td>开放</td></tr><tr><td>3</td><td>王五</td><td>开放</td></tr></table></body></html>最后将所需⽂件放到⼀个可以浏览的站点下边，打开test.html。
通过代码实例跟我学JQuery DataTables表格控件的数据源定义和设置实例
{ data: 'name' }, { data: 'salary' }, { data: 'office()' }, { data: 'position' } ] } ); 注意上面的 name、salary、position 是属性，而 office 是一个方法。
1.1.2 产生数据源的方式
]; $('#dataTable1').DataTable({
data: data });
杨教授工作室，版权所有2 ，盗版必究， 2/16 页
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
var data2 = [
{
"name":
"Tiger Nixon",
"position": "System Architect",
杨教授工作室，版权所有6 ，盗版必究， 6/16 页
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
在初始化参数对象中，通过 sAjaxSource 的属性传递请求的地址，bProcessing 表示是 否需要显示一个工作中的提示。
$(document).ready(function(jqueryEvent){
杨教授工作室，版权所有5 ，盗版必究， 5/16 页
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
$("#dataTableTagID").dataTable({ "bProcessing": true, "sAjaxSource": './ajaxData.txt', "oLanguage": { "sProcessing": "正在加载数据..." }
应用JSTL EL表达式技术的Datagrid应用实例
杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料
<th field="name5" width="50">Col 5</th> <th field="name6" width="50">Col 6</th> </tr> </thead> <tbody> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> </tbody> </table> 4、复杂的表头 列的每个元素是定义一组可使用 rowspan 或 colspan 属性来进行组合的单元格。 <thead> <tr> <th field="name1" width="50" rowspan="2">Col 1</th> <th field="name2" width="50" rowspan="2">Col 2</th> <th field="name3" width="50" rowspan="2">Col 3</th> <th colspan="3">Details</th> </tr> <tr> <th field="name4" width="50">Col 4</th> <th field="name5" width="50">Col 5</th> <th field="name6" width="50">Col 6</th> </tr> </thead>
jQuery+ajax实现动态添加表格trtd功能示例
jQuery+ajax实现动态添加表格trtd功能⽰例本⽂实例讲述了jQuery+ajax实现动态添加表格tr td功能。
分享给⼤家供⼤家参考，具体如下：功能：ajax获取后台返回数据给table动态添加tr/tdhtml部分：<table><tbody></tbody></table>ajax部分：var year = $('#year').val();//下拉框数据var province= $('#province').val();//下拉框数据$('table tbody').html('');$.ajax({url:"/Plan/sendJson.html",type:"get",data:{'year':year,'province':province},datatype:'json',success:function(data){switch(data.msg){case '0':$('table tbody').prepend('<tr><td colspan='2'>暂⽆数据</td></tr>');break;case '1':$.each(data.data,function(i,n){var $tr = $("<tr>"+"<td>"+n.year+"</td>"+"<td>"+n.province+"</td>"+"</tr>");var $table = $('table tbody');$table.append($tr);});}}})php后台（thinkPHP处理）：$year = I('get.year');$province = I('get.province');$condition = array();$year && $condition = array('eq',$year);$province && $condition = array('eq',$province);$dataList = M('Plan')->where($condition)->select();if(false != $dataList){$data['msg'] = '1';$data['data'] = $dataList;echo json_encode($data);exit;}else{$data['msg'] = '0';$data['data'] = '';echo json_encode($data);exit;}更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家jQuery程序设计有所帮助。
jquery datatable ajax用法
一、引言在web开发中，经常会涉及到表格数据的展示和操作。
而jquery datatable是一个非常方便高效的表格插件，结合ajax技术，能够实现对大量数据的快速加载和操作。
本文将介绍jquery datatable与ajax的结合用法，帮助读者更好地掌握这一技术。
二、jquery datatable简介1. jquery datatable是一款基于jquery库的表格插件，它提供了丰富的功能和选项，可以让用户对表格数据进行排序、过滤、分页等操作，使得数据展示更加直观和易用。
2. 使用jquery datatable可以大大简化对表格数据的操作，提高用户体验和开发效率，因此在web开发中被广泛应用。
三、ajax技术简介1. ajax是一种在web应用中实现异步数据交互的技术，通过在不刷新整个页面的情况下向服务器发送请求和获取数据，能够提升用户体验和页面加载速度。
2. ajax技术可以实现对服务器端数据的异步获取和更新，是实现动态交互式web页面的重要手段。
四、jquery datatable与ajax的结合用法1. 初始化datatable在使用jquery datatable之前，首先需要对表格进行初始化设置。
通过调用datatable()方法，可以传入一些选项参数，来配置表格的各种功能和样式。
例如：```javascript$('#example').DataTable({"processing": true,"serverSide": true,"ajax": {"url": "data.php","type": "POST"}});```在上面的例子中，我们设置了表格的处理模式为服务器端处理，然后通过ajax选项指定了数据的获取方式，url为数据获取的信息，type为请求的方式。
wpfdatagrid的用法
wpfdatagrid的用法一、基本用法：要使用DataGrid，首先需要在XAML中添加DataGrid控件。
以下是一个简单的示例：```<Grid><DataGrid ItemsSource="{Binding Customers}" AutoGenerateColumns="True"/></Grid>```上面的示例中，我们将DataGrid绑定到一个名为"Customers"的数据源，并设置AutoGenerateColumns属性为True，这将自动生成列，每个列对应数据源的一个属性。
二、列定义：除了自动生成列，我们还可以手动定义列，以便更好地控制显示的方式。
以下是一个手动定义列的示例：```<DataGrid ItemsSource="{Binding Customers}"><DataGrid.Columns><DataGridTextColumn Header="Name" Binding="{Binding Name}"/><DataGridTextColumn Header="Age" Binding="{Binding Age}"/><DataGridTextColumn Header="Address" Binding="{Binding Address}"/></DataGrid.Columns></DataGrid>```上面的示例中，我们定义了三个列，分别是"Name"、"Age"和"Address"。
dojox.grid.DataGrid编程篇（2）--方法与事件
dojox.grid.DataGrid编程篇（2）--方法与事件dojox.grid.DataGrid 组件还提供了一些方法，使用者利用这些方法可以进一步丰富表格的表现体验。
1. 获取、修改任一单元格的数据：取得第3行，字段"f3"的值[javascript] view plaincopy1.var grid = dijit.byId("grid1");2.var row = grid.getItem(3);3.// 获取值4.var value = grid.store.getValue(row, "f3");5.// 修改值6.grid.store.setValue(row, "f3", "abc");或者直接写为[javascript] view plaincopy1.var grid = dijit.byId("grid1");2.var row = grid.getItem(3);3.var value = row["f3"];注意：默认情况下，每次修改值都会导致Grid该行刷新2. 获取(取消)选中行[javascript] view plaincopy1.var grid = dijit.byId("grid1");2.var selectedRows = grid.selection.getSelected();3.var value = selectedRows[0]["f3"];因为支持多选，所以 grid.selection.getSelected 返回的是选中的行数组。
[javascript] view plaincopy1.// 获得选择的第一行2.grid.selection.getFirstSelected();3.// 清除所有选中行4.grid.selection.deselectAll();5.// 选中第n行6.grid.selection.select(4);3. 设置单元格焦点[javascript] view plaincopy1.// 设置第一行，第二列的单元格的焦点2.grid.focus.setFocusIndex(0, 1);4. 将某一行显示在视图中[javascript] view plaincopy1.// 滚动显示出第4行2.grid.scrollToRow(3);5. 隐藏某一列[javascript] view plaincopy1.// 隐藏第五列yout.setColumnVisibility(4, false);6. 改变行的显示 onStyleRow (参数：row对象) [javascript] view plaincopy1.dojo.connect(grid, "onStyleRow", function(row) {2.// 第二行背景设为红色3.if (row.index == 1) {4.row.customClasses += " redRow ";5.}6.});7.grid.resize();8.9.<style type="text/css">10..redRow tr { background-color: red !important; }11.</style>7. 行点击事件 onRowClick (参数: Event 对象)[javascript] view plaincopy1.dojo.connect(grid, "onRowClick", function(e) {2.alert(e.rowIndex);3.});另外：Enter键也能触发 onRowClick 事件。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
基于AJAX技术的DataGrid控件编程
2006-05-10 14:55 作者:朱先忠编译出处:
【导读】在本文中，我们使用AJAX技术来实现填充网页中的DataGrid控件。
为此，我们使用了一个DropDownList控件作为DataGrid控件的数据源。
每当DropDownList的选择发生改变，该DataGrid控件的内容将基于AJAX技术进行相应的刷新。
简介
在传统的Web开发中，每次DataGrid控件填充或更新都相应于一次到服务器的数据回馈。
但是，借助于AJAX技术，我们可以在不进行表单提交（刷新）的情况下即可以填充DataGrid控件。
在本文中，我们通过一个简单示例并借助于一个DropDownList控件的帮助来讨论如何达到这一目的。
在这个例子中，我们使用了一个DropDownList控件；一旦改变DropDownList的值，它即用相应的城市名来填充DataGrid控件，在此过程中我们巧妙了引入了AJAX技术。
既然我们已经了解一些AJAX的基本知识，现在让我们进一步讨论这个DataGrid示例程序。
在本例中，我们主要解释如何从客户端发送请求，如何处理请求，以及如何运行客户端脚本来显示DataGrid中的数据。
示例应用程序结构
在本例中，我们共建立了两个Web表单（AjaxServer.aspx和DataGridEx.aspx），一个JavaScript文件和一个层叠式样表文件（css）。
文件AjaxServer.aspx负责服务器端功能（一旦选择即返回作者结果），而文件DataGridEx.aspx负责使用AJAX技术显示返回的结果。
下面让我们作进一步分析。
1. AjaxServer.aspx
这个页面以选择的“City”作为请求。
它取回所有的属于该城市的作者并且把一个XML响应字符串返回到客户端（见列表1）。
列表1—AjaxSever.aspx.vb代码
2. DataGridEx.aspx
这个页面开始把所有的作者信息显示在DataGrid中。
每当DropDownList中发生变化，它使用JavaScript文件取回内容并预以显示。
注意：为了显示当前正运行的进程的状况，我们在此使用了一个面板。
该面板具有一个GIF图像（开始不
可见）—在处理发生于服务器端时它被显示，而一旦处理结束即变为不可见的（见图1）。
我们这样做的根本目的就是为了让用户详细了解当前正运行的进程情况。
图1.DatagridEx.aspx的快照（为了显示进程）
3.JavaScript文件
这个文件负责整个进程的处理请求和响应。
这个文件将生成XMLHttpRequest并且把选择的城市发送到AjaxServer.aspx 页面。
一旦返回，它得到一个类似于数据库表的输出结果—该结果将被填充到DataGrid中。
一开始，上图面板中的“进程”图像是不可见的。
当DropDownList选择发生变化时，“进程”图像就显示出来，直到用返回的结果填充DataGrid为止（见列表2）。
该DataGrid被返回的数据填充—通过使用一个简单的for循环来读取返回的内容（见列表3）。
列表2—进程状态
列表3—使用收到的响应数据填充DataGrid控件
运行示例代码
你可以下载本文相应的示例源码进行分析。
首先，创建一个命名为MyAjax的虚拟目录，然后把解压后的文件复制到该目录下即可。
最后，打开Visual 解决方案资源管理器并按F5键运行程序，并观察结果。
总结
本文通过一个简单的例子—使用AJAX技术操作DataGrid控件—来显示服务器调用的处理状态。
这是把AJAX技术应用于.NET平台Web开发的又一简单示例。