ExtJs学习笔记(5)_Ajax示例 - 面向对象网,web开发,Extjs,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > Extjs > 正文

ExtJs学习笔记(5)_Ajax示例

来源: www.bianceng.cn 阅读:

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>

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;
}
}
}
}

Tags:
相关文章列表: