Ext JS_Sencha Ext JS 4.0.3 利用 Ext.Ajax.request({…}) 发出 Ajax 请求

Ext.Ajax.request({…})

该方法向远程服务器发送一个HTTP请求。

注意：Ajax服务请求是异步的。服务器的响应到达后，这个调用将会返回。在回调函数中处理回调返回的数据。

参考 http://dev.sencha.com/deploy/ext-4.0.2a/docs/index.html#/api/Ext.Ajax-method-request

例子

本例，页面ExtNetAjaxRequest.aspx向ExtNetAjaxRequestPage.aspx页面发送一个Ajax请求，如果没有请求变量，则返回全部，否则返回指定的数据。

ExtNetAjaxRequestPage.aspx 响应页面创建数据源

在该页面创建数据源，并在Page_Load事件里判断是否有参数传过来。如果有，则按参数返回相应的值。否则，返回全部数据。

1 protected void Page_Load(object sender, EventArgs e)
2 {
3     if (!X.IsAjaxRequest)
4     {
5         if (Request["id"] == null)
6         {
7             DataTable dt = this.CreateDataSource();
8             string json = Ext.Net.JSON.Serialize(dt);
9             Response.Write(json);
10             Response.End();
11         }
12         else
13         {
14             DataTable dt = this.CreateDataSource();
15             DataRow[] dr = dt.Select("id=" + Request["id"]);
16             Response.Write(Ext.Net.JSON.Serialize(dr[0].Table));
17             Response.End();
18         }
19     }
20 }
21 private DataTable CreateDataSource()
22 {
23     DataTable dataSource = new DataTable();
24     dataSource.Columns.Add(new DataColumn("ID", typeof(int)));
25     dataSource.Columns.Add(new DataColumn("NAME", typeof(string)));
26     for (int i = 0; i < 100; i++)
27     {
28         DataRow dr = dataSource.NewRow();
29         dr[0] = i;
30         dr[1] = "名称" + i;
31         dataSource.Rows.Add(dr);
32     }
33     dataSource.AcceptChanges();
34     return dataSource;
35 }

ExtNetAjaxRequest.aspx 请求Ajax服务

1 Ext.Ajax.request({
2     url: 'ExtNetAjaxRequestPage.aspx',
3     type: 'post',
4     success: function(response) {
5         var respText = response.responseText;
6         var json = Ext.encode(respText);
7         var obj = Ext.decode(respText);
8
9         Ext.net.Notification.show({
10             iconCls: 'icon-information',
11             pinEvent: 'click',
12             html: respText,
13             title: 'response',
14             width: 800,
15             height: 300
16         });
17         ......
18 });

或

1 var find = function() {
2     var txt = Ext.getCmp("TextField1");
3     var val = txt.getValue();
4     Ext.Ajax.request({
5         url: 'ExtNetAjaxRequestPage.aspx',
6         type: 'post',
7         params: { id: val },
8         success: function(response) {
9             var obj = Ext.decode(response.responseText);
10             Ext.net.Notification.show({
11                 iconCls: 'icon-information',
12                 pinEvent: 'click',
13                 html: obj[0].ID + obj[0].NAME,
14                 title: 'Result',
15                 width: 800,
16                 height: 300
17             });
18         }
19     }
20 )
21 };

第一个方法不带参数的Ajax请求；第二个方法是带参数的。

说明

1，在ExtNetAjaxRequestPage.aspx页面创建一个DataTable，然后系列化到页面里，供ExtNetAjaxRequest.aspx的Ajax请求使用。

2，Ext.Net向某个页面发送Ajax请求使用Ext.Ajax.request({…})，大括号中是请求时的相关设置，包括请求的页面（可以是页面，如.aspx、.html，也可以是文件），请求类型（如post），超时时间、是否传递变量等等，以及回调函数，如success、failure。

3，Ext.encode转换成json字符串；Ext.decode把json字符串转换成object。

4，例子里 四个Ext.net.Notification.show({…}) 仅仅以各种方式将回调的字符串显示出来。

下载 Demo