1.代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <!--ExtJs框架开始--> 6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script> 7 <script type="text/javascript" src="/Ext/ext-all.js"></script> 8 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" /> 9 <!--ExtJs框架结束--> 10 <script type="text/javascript"> 11 Ext.onReady(function () { 12 //创建panel 13 var panel = new Ext.Panel({ 14 title: 'Ajax与数据显示', 15 width: 200,128); line-height:1.5!important"> 16 height: 200,128); line-height:1.5!important"> 17 frame: true 18 }); 19 创建数据显示模板 20 var template = new Ext.XTemplate( 21 '<table id="template">',128); line-height:1.5!important"> 22 '<tr><td>编号:</td><td>{id}</td></tr>',128); line-height:1.5!important"> 23 '<tr><td>姓名:</td><td>{name}</td></tr>',128); line-height:1.5!important"> 24 '<tr><td>生日:</td><td>{brithday}</td></tr>',128); line-height:1.5!important"> 25 '<tr><td>身高:</td><td>{height}</td></tr>',128); line-height:1.5!important"> 26 '<tr><td>性别:</td><td>{sex}</td></tr>',128); line-height:1.5!important"> 27 '<tr><td valign="top">描述:</td><td>{discribe}</td></tr>',128); line-height:1.5!important"> 28 '</table>' 29 ); 30 获取数据 31 Ext.Ajax.request({ 32 url: '/App_Ashx/Demo/Ajax.ashx',128); line-height:1.5!important"> 33 method: 'post',128); line-height:1.5!important"> 34 params: { id: 1 },128); line-height:1.5!important"> 35 success: function (response,options) { 36 for (i in options) { 37 alert('options参数名称:' + i); 38 alert('options参数[' + i + ']的值：' + options[i]); 39 } 40 var responseJson = Ext.util.JSON.decode(response.responseText); 41 template.compile(); 42 template.overwrite(panel.body,responseJson); 43 },128); line-height:1.5!important"> 44 failure: 45 alert('系统出错，请联系管理人员！'); 46 } 47 }); 48 创建窗体 49 var win = new Ext.Window({ 50 title: '窗口',128); line-height:1.5!important"> 51 id: 'window',128); line-height:1.5!important"> 52 width: 476,128); line-height:1.5!important"> 53 height: 374,128); line-height:1.5!important"> 54 resizable: true,128); line-height:1.5!important"> 55 modal: 56 closable: 57 maximizable: 58 minimizable: 59 items: [panel] 60 }); 61 win.show(); 62 }); 63 </script> 64 </head> 65 <body> 66 <!-- 67 说明： 68 (1)new Ext.XTemplate():创建模板对象，常用于数据显示，也就是我们在开发中提到的“内容页或详细页”。 69 (2)'<tr><td>编号:</td><td>{id}</td></tr>':中间的{id}占位符要和我们在后台输出 json 对象对应。 70 (3)Ext.Ajax.request()：创建一个AJAX请求. 71 (4)url: '/App_Ashx/Demo/Ajax.ashx'：请求地址。method: 'post'，提交方式，params: { id: 1 }参数，我们在做内容页时，经常会这样使用“根据编号取出详细信息”，这个参数在本例中并没有实际意义，在这里只显示用法。 72 (5)success: 方法。 73 这里有两个参数. 74 response：服务端返回的数据，通过response.responseText来获得XMLHttpRequest的数据，并通过Ext.util.JSON.decode方法把字符串转换成json对象。 75 options：向服务端发送的对象。 76 我们在开发中，经常会遇到这样的问题，就是不知道参数是做什么用的，传的是什么，当我们 alert(parm)的时候，弹出的是[Object]或是[Object][Object]。 77 那么我们怎么样知道他到底传的是什么呢？我在上页的代码中写了这样的程序： 78 79 alert('options参数名称:' + i); 80 alert('options参数[' + i + ']的值：' + options[i]); 81 } 82 对象我们不知道的对象 options 我们用 for 语句进行遍历，看看对象里存的是什么，这样就可以判断对象是什么了。 83 for(){}：不知属性个数时,用于对某个对象的所以属性进行循环操作,返回字符串形式的属性名，获取属性值方式。 84 那如果，我们的子对象还是 Object 怎么办？ 85 86 alert('options参数名称:' + i); 87 alert('options参数[' + i + ']的值：' + options[i]); 88 方式一，判断子对象类型，如果是object则继续遍历子对象 89 if (typeof (options[i]) == 'object') { 90 for (j in options[i]) { 91 alert('子对象名称：' + j); 92 alert('子对象值：' + options[i][j]); 93 } 94 } 95 方式二，options[i].toSource()，查看对象源码。 96 语法：object.toSource() 注：该方法在 Internet Explorer 中无效。 97 } 98 (6)template.compile();编译模板。 99 (7)template.overwrite(panel.body,responseJson)：把数据填充到模板中。 100 --> 101 </body> 102 </html>
服务端代码/App_Ashx/Demo/Ajax.ashx
1 using System.Web;
2
3 namespace HZYT.ExtJs.WebSite.App_Ashx.Demo
4 {
5 public class Ajax : IHttpHandler
6 {
7 void ProcessRequest(HttpContext context)
8 {
9 if (context.Request.Params["id"] != null && context.Request.Params["].ToString() == 1")
10 {
11 context.Response.Write({id:1,name:'张三',brithday:2001-01-01,height:178,sex:'0',discribe:'张三是一个.net软件工程师<br />现在正在学习ExtJs。'}");
12 }
13 }
14
15 bool IsReusable
16 {
17 get
18 {
19 return false;
20 }
21 }
22 }
23 }
