ExtJs学习笔记(5)_Ajax示例

2018-01-22 17:36:27 浏览数 (2)

ExtJs对于Ajax的使用非常简单,看下面的代码:

1.Html页:

代码语言:js复制
<!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

代码语言:js复制
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;
             }
         }
     }
 }
 

运行效果:

转载请注明来自"菩提树下的杨过"

0 人点赞