Extjs和Asp.NET后台的数据交互（二） => Ext.data.Connection

本文介绍如何使用Ext.data.Connection进行前后端异步数据交互，通过具体实例展示了配置连接、发送请求及处理响应的方法。

Ext.data.Connection应该说提供了最为简洁的与后台的异步调用功能

实例如下

首先是aspx页面内容（省略了head和对js文件引用的部分）

关于Extjs的内容写在jsdataConnection.js文件中

内容如下：

Ext.onReady(function() { var form1 = new Ext.form.FormPanel({ width: 350, frame: true, renderTo: "form1", labelWidth: 80, title: "form1", bodyStyle: "padding:5px 5px 0", defaults: { width: 150, xtype: "textfield" }, items: [ { fieldLabel: "ID", id: "ID", anchor: "90%" }, { fieldLabel: "name", id: "name", anchor: "90%" } ], buttons: [ { text: "確定", handler: function() { doUpdate(); } } ] }); //新建连接 var conn = new Ext.data.Connection({ autoAbort: false, defaultHeaders: { referer: 'http://localhost:1068' //此处defaultHeaders可以不设置 }, disableCaching: false, extraParams: { params: 'Update' }, method: 'post', timeout: 300, url: 'Handler.ashx'//此处如不指定，则默认访问当前页面 }); /* 其中 ①autoAbort：该request是否会自动断开（默认值false）。 ②disableCaching：设置为true就会添加一个独一无二的cache-buster参数来获取请求（默认值为true）。 ③extraParams：这些属性在该Connection发起的每次请求中作为外部参数使用 ④timeout：连接的超时时间 ⑤method：请求时使用的默认的http方法。【post】【get】 ⑥url:请求的网页地址，关于url最好使用ashx页面文件，如果用aspx的话要把所有的页面元素都清除干净，否则前台接收到的内容会有问题。 */ function doUpdate() { //在创建了conn之后，可以调用request()函数发送请求，处理返回的结果，如下面的代码所示。 conn.request({ success: function(response) { Ext.Msg.alert('info', response.responseText); //response.responseText为返回的信息 }, failure: function() { Ext.Msg.alert('warn', 'failure'); } }); } //success：成功后执行的方法（参数返回response） //failure：失败时执行的方法 });

其中Handler.ashx的内容如下

（新建ashx文件，我对内容没有做任何改动，除了加上一句注释之外）

<%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; //返回字符串Hello World context.Response.Write("Hello World"); } public bool IsReusable { get { return false; } } }