无废话ExtJs 入门教程二十[数据交互：AJAX]
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,
16 height: 200,
17 frame: true
18 });
19 //创建数据显示模板
20 var template = new Ext.XTemplate(
21 '<table id="template">',
22 '<tr><td>编号:</td><td>{id}</td></tr>',
23 '<tr><td>姓名:</td><td>{name}</td></tr>',
24 '<tr><td>生日:</td><td>{brithday}</td></tr>',
25 '<tr><td>身高:</td><td>{height}</td></tr>',
26 '<tr><td>性别:</td><td>{sex}</td></tr>',
27 '<tr><td valign="top">描述:</td><td>{discribe}</td></tr>',
28 '</table>'
29 );
30 //获取数据
31 Ext.Ajax.request({
32 url: '/App_Ashx/Demo/Ajax.ashx',
33 method: 'post',
34 params: { id: 1 },
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 },
44 failure: function () {
45 alert('系统出错，请联系管理人员！');
46 }
47 });
48 //创建窗体
49 var win = new Ext.Window({
50 title: '窗口',
51 id: 'window',
52 width: 476,
53 height: 374,
54 resizable: true,
55 modal: true,
56 closable: true,
57 maximizable: true,
58 minimizable: true,
59 items: [panel]
60 });
61 win.show();
62 });
63 </script>
64 </head>
65 <body>
66 <!--
67 说明：
68 (1)var template = 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: function (response, options) {}成功时执行方法。
73 这里有两个参数.
74 response：服务端返回的数据，通过response.responseText来获得XMLHttpRequest的数据，并通过Ext.util.JSON.decode方法把字符串转换成json对象。
75 options：向服务端发送的对象。
76 我们在开发中，经常会遇到这样的问题，就是不知道参数是做什么用的，传的是什么，当我们 alert(parm)的时候，弹出的是[Object]或是[Object][Object]。
77 那么我们怎么样知道他到底传的是什么呢？我在上页的代码中写了这样的程序：
78 for (i in options) {
79 alert('options参数名称:' + i);
80 alert('options参数[' + i + ']的值：' + options[i]);
81 }
82 对象我们不知道的对象 options 我们用 for 语句进行遍历，看看对象里存的是什么，这样就可以判断对象是什么了。
83 for(){}：不知属性个数时,用于对某个对象的所以属性进行循环操作,返回字符串形式的属性名，获取属性值方式。
84 那如果，我们的子对象还是 Object 怎么办？
85 for (i in options) {
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 public void ProcessRequest(HttpContext context)
8 {
9 if (context.Request.Params["id"] != null && context.Request.Params["id"].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 public bool IsReusable
16 {
17 get
18 {
19 return false;
20 }
21 }
22 }
23 }
2.效果如下：
无废话ExtJs 入门教程二十[数据交互：AJAX]的更多相关文章
- 无废话ExtJs 入门教程二十一[继承：Extend]
无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
- 无废话ExtJs 入门教程二[Hello World]
无废话ExtJs 入门教程二[Hello World] extjs技术交流,欢迎加群(201926085) 我们在学校里学习任何一门语言都是从"Hello World"开始,这里我 ...
- 无废话ExtJs 入门教程十二[下拉列表联动：Combobox_Two]
无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...
- 无废话ExtJs 入门教程十六[页面布局：Layout]
无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...
- 无废话ExtJs 入门教程十九[API的使用]
无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...
- 无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]
无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...
- 无废话ExtJs 入门教程十四[文本编辑器：Editor]
无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...
- 无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]
无废话ExtJs 入门教程十[单选组:RadioGroup.复选组:CheckBoxGroup] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个单选组,一个复 ...
- 无废话ExtJs 入门教程十七[列表：GridPanel]
无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
随机推荐
- ES6新特性：使用新方法定义javascript的Class
ES6中定义类的方式, 就是ES3和ES5中定义类的语法糖,虽然也有些区别,但是整体定义类的方式更加简洁,类的继承更加方便, 如果想对ES6中的继承更加熟悉, 最好了解ES5中原型继承的方式, 博客园 ...
- Oracle之分页查询
select * from ( select a.*, rownum rn from (select * from table_name) a where rownum<= 40 ) where ...
- a版本冲刺第三天
队名:Aruba 队员: 黄辉昌 李陈辉 林炳锋 鄢继仁 张秀锋 章 鼎 学号 昨天完成的任务 今天做的任务 明天要做的任务 困难点 体会 408 看了构建之法的第二章和十三章 完成学习Java ...
- ubuntu qtcreator 硬件权限问题
在使用 qtcreator 在 ubuntu(debian.mint 等类同)下做开发时,常用到权限问题,无法直接操作硬件,比如串口等. 办法之一是使用 root 打开 creator,进而进行其他操 ...
- MySQL 常用函数和语句笔记
CONCAT()函数 CONCAT()函数代表着字符串的链接,例子有 SELECT COUNT(1) FROM ums_commodity WHERE 1 = 1 and deleted=0 and ...
- HTML2
1. IIS是一个软件,在"客户端服务器"模型中,它是服务器端软件,它主要提供基于HTTP的文档服务,主要是WWW 的发送,以及FTP的文件下载服务. VS提供了" ...
- centos ADSL 拨号上网设置
下面主要介绍一下,在CentOS命令行环境下如何配置 ADSL 联网: 1.确保安装了网卡并能正常运行,使用命令查看一下网卡状态: [root@localhost simon]# /sbin/ifco ...
- 面试题目——《CC150》栈与队列
面试题3.1:描述如何只用一个数组来实现三个栈. 方法1:固定分割 方法2:弹性分割(较难) package cc150; public class ArrayStack { public stati ...
- 网络中两台主机的通信过程(TCP)
两台主机通信有两种情况:1.在同一网段中 2.不在同一网段中 (1.)在同一网段的通信过程 主机在应用层上的操作: TCP/IP协议上tcp的端口对应的各种应用程序,客户机要访问某个应用程序就会要求打 ...
- 浅谈ARP协议以及应用
0. 前言 本章主要简单的介绍ARP的协议格式,主机如何发送和处理ARP报文,以及免费ARP. 1. ARP协议原理 ARP,全称Address Resolution Protocol,地址解析协议, ...