ExtJs对于Ajax的使用非常简单，看下面的代码:
1.Html页：
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< link rel ="stylesheet" type ="text/css" href ="js/ext2.2/resources/css/ext-all.css" />
< script type ="text/javascript" src ="js/ext2.2/adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="js/ext2.2/ext-all.js" ></ script >
< title ></ title >
</ head >
< body >
< script type ="text/javascript" >
Ext.onReady( function () {
var fnAjaxDemo = function () {
var mydata;
Ext.Ajax.request({
url: " GetData.ashx?name= " + encodeURIComponent(Ext.get( " name " ).dom.value), // 服务器端地址
success: function (request) {
mydata = request.responseText; // 服务器端文本数据
Ext.MessageBox.alert( " 返回值 " ,mydata);
},
failure: function () {
alert( " failure! " );
}
});
}
Ext.get( " btnTest " ).on( " click " , fnAjaxDemo);
})
</ script >
< input id ="name" value ="Jimmy" name ="name" />
< button id ="btnTest" > 获取服务端信息 </ button >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< link rel ="stylesheet" type ="text/css" href ="js/ext2.2/resources/css/ext-all.css" />
< script type ="text/javascript" src ="js/ext2.2/adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="js/ext2.2/ext-all.js" ></ script >
< title ></ title >
</ head >
< body >
< script type ="text/javascript" >
Ext.onReady( function () {
var fnAjaxDemo = function () {
var mydata;
Ext.Ajax.request({
url: " GetData.ashx?name= " + encodeURIComponent(Ext.get( " name " ).dom.value), // 服务器端地址
success: function (request) {
mydata = request.responseText; // 服务器端文本数据
Ext.MessageBox.alert( " 返回值 " ,mydata);
},
failure: function () {
alert( " failure! " );
}
});
}
Ext.get( " btnTest " ).on( " click " , fnAjaxDemo);
})
</ script >
< input id ="name" value ="Jimmy" name ="name" />
< button id ="btnTest" > 获取服务端信息 </ button >
</ body >
</ html >
2.服务端GetData.ashx
using
System.Web;
using System.Web.Services;
namespace Ajax_WCF
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class GetData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = " text/plain " ;
if (context.Request[ " name " ] != null && context.Request[ " name " ].ToString() != "" )
{
context.Response.Write( " Hello World, " + context.Request[ " name " ].ToString() + " ! " );
}
else
{
context.Response.Write( " Hello World " );
}
}
public bool IsReusable
{
get
{
return false ;
}
}
}
}
using System.Web.Services;
namespace Ajax_WCF
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class GetData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = " text/plain " ;
if (context.Request[ " name " ] != null && context.Request[ " name " ].ToString() != "" )
{
context.Response.Write( " Hello World, " + context.Request[ " name " ].ToString() + " ! " );
}
else
{
context.Response.Write( " Hello World " );
}
}
public bool IsReusable
{
get
{
return false ;
}
}
}
}
运行效果：
转载请注明来自"菩提树下的杨过"http://www.cnblogs.com/yjmyzz/archive/2008/08/30/1279918.html
