ExtJs学习笔记(20)利用ExtJs的Ajax与服务端WCF交互

zoukankan html css js c++ java

ExtJs学习笔记(20)利用ExtJs的Ajax与服务端WCF交互

ExtJs是一套非常不错的javascript UI库(第一次接触ExtJs的，可到官方网站http://www.extjs.com/deploy/dev/examples/samples.html看下示例。相信不少人会心动的)，不仅组件丰富，效果漂亮，而且ExtJs集成的Ajax功能可以方便的与.Net的WCF进行交互.

这里我们将演示ExtJs的FormPanel从WCF加载数据，以及如何提交数据到WCF服务端

1.首先来定义一个用于传输信息的Class（实际开发中，可以是Linq to Sql的Class或任何可序列化的实体类）

[DataContract]
    public class MyData
    {
        [DataMember]
        public string id;

        [DataMember]
        public string text;
    }

非常简单，MyData中仅定义了二个成员id,text，加上[DataContract]与[DataMember]表明该类可以序列化

2.再定义几个用于跟ExtJs交互的方法(初次接触Ajax与WCF交互的同志，建议参考一下老张的"Ajax与WCF交互-WCF之美(http://www.cnblogs.com/jillzhang/archive/2008/06/13/1219201.html)")

[ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class MyService
    {
    [OperationContract]
        [WebInvoke(ResponseFormat = WebMessageFormat.Json, Method = "*", UriTemplate = "GetMyData")]
        public MyData GetMyData()
        {
            System.Threading.Thread.Sleep(1000);
            MyData _Node = new MyData() { id = "1", text = "test text" };
            return _Node;
        }

     /**//// <summary>
        /// RESTFul WCF用于Get方式取得ExtJs提交的数据(Json)
        /// </summary>
        /// <param name="id"></param>
        /// <param name="text"></param>
        /// <returns></returns>
        [OperationContract]
        [WebInvoke(Method = "*", ResponseFormat = WebMessageFormat.Json, UriTemplate = "SaveMyData?id={id}&text={text}")]
        public MyData SaveMyData(string id,string text)
        {
            System.Threading.Thread.Sleep(1000);
            MyData _Node = new MyData() { id = id, text = text };
            return _Node;
        }

/**//// <summary>
        /// Post方法处理ExtJs提交的数据(Json格式)
        /// </summary>
        /// <param name="input"></param>
        /// <returns></returns>
        [OperationContract]
        [WebInvoke(Method = "*", ResponseFormat = WebMessageFormat.Json, UriTemplate = "SaveMyData2")]
        public MyData SaveMyData2(Stream input)
        {
            string s = "";
            using (StreamReader sr = new StreamReader(input))
            {
                s = sr.ReadToEnd();
            }
            NameValueCollection qs = HttpUtility.ParseQueryString(s);
            string id = qs["id"];
            string text = qs["text"];

            System.Threading.Thread.Sleep(1000);
            MyData _Node = new MyData() { id = id, text = text };
            return _Node;
        }
}

这里定义了三个方法，GetMyData用来让ExtJs获取WCF端的数据，SaveMyData,SaveMyData2用来保存ExtJs提交过来的数据，区别是SaveMyData用于Get方法,SaveMyData2用于Post方法

需要说明的是[WebInvoke(Method = "*", ResponseFormat = WebMessageFormat.Json, UriTemplate = "SaveMyData?id={id}&text={text}")]这一行，这里标明该方法可用Get/Post来处理数据，输出格式是Json字符串，UriTemplate表示该方法支持RESTFul风格，可用/MyService.svc?id=xxx&text=xxx来访问(关于RESTFul WCF，可参见雨痕的文章http://www.rainsts.net/article.asp?id=651　[RESTful WCF])

3.ExtJs前端页面

ExtJs

这里利用ExtJs的Ajax对象完成与WCF的交互(初次接触ExtJs Ajax的，可参见ExtJs学习笔记(5)_Ajax示例http://www.cnblogs.com/yjmyzz/archive/2008/08/30/1279918.html)，相当简单!

最近学习了ExtJs和WCF后，个人强力推荐.net3.x时代web开发的绝佳组合: ExtJs(前端) + WCF(web服务层) + Linq To Sql(DAL，以后可能会换成Ado.Net Entity FrameWork)，用起来简直是一种享受，目前用ExtJs的人似乎还不多，这里推荐一些学习的资源：http://www.cnblogs.com/yjmyzz/archive/2008/08/31/1280510.html

测试效果图:

1.加载数据

2.Get方法提交数据

3.Post方法提交数据

作者：菩提树下的杨过
出处：http://yjmyzz.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

查看全文

相关阅读:
org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'getDataSource' defined in class path resource nested exception is org.springframework.beans.factory.BeanCreat异常
 Caused by: org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating Caused by: tk.mybatis.mapper.MapperException: 无法获取 cn.itcast.mapper.UserMapper.existsWithPrimaryKey 方法的泛型信息!
fibnacci数列递归实现
 XOR加密
 Pep8课下作业
 求最大公约数伪代码
 《信息安全专业导论》第五周学习总结
 20191306《信息安全专业导论》第四周学习总结
 用或非门实现其他逻辑门
 寻找黑客偶像

原文地址：https://www.cnblogs.com/yjmyzz/p/1284122.html