Extjs和Asp.NET后台的数据交互1
Ext.data.Connection应该说提供了最为简洁的与后台的异步调用功能
实例如下
首先是aspx页面内容(省略了head和对js文件引用的部分)
view plaincopy to clipboardprint?
<body>
<div id="form1"></div>
</body>
<body>
<div id="form1"></div>
</body>
关于Extjs的内容写在jsdataConnection.js文件中
内容如下:
view plaincopy to clipboardprint?
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:失败时执行的方法
});
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文件,我对内容没有做任何改动,除了加上一句注释之外)
view plaincopy to clipboardprint?
<%@ 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;
}
}
}
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/gishero/archive/2010/01/05/5133922.aspx