AJax技术

EXT调用ASP.NET AJAX WebService

字号+ 作者:H5之家 来源:H5之家 2017-09-11 13:31 我要评论( )

在asp.net ajax中,使客户端调用WebService变得非常的简单,而且非常有用(个人觉得这个功能是asp.net ajax的核心,很多与客户端的交互都需要个功能来辅助实现

  在asp.net ajax中,使客户端调用WebService变得非常的简单,而且非常有用(个人觉得这个功能是asp.net ajax的核心,很多与客户端的交互都需要个功能来辅助实现)。那在EXT中,标准的客户端与服务器端交互,使用的是自定义的HttpHandler,而且服务器在处理客户端提交的参数也都必须是弱类型的使用方式,也会使用带一定的不便。如果你曾经使用过Asp.net ajax调用WebService,那你肯定非常希望EXT也能像那样简单的调用WebService。

  默认情况下,EXT也是可以调用WebService的,在这篇博客里已经有做介绍《ExtJS与.NET结合开发实例(Grid之批量删除篇)》。但是在调用时传入多个参数和输出JSON字符串时,就需要使用asp.net ajax WebService的方式来调用了。

  能被asp.net ajax调用的WebService必须被标上System.Web.Script.Services.ScriptServiceAttribute。根据我们的需要,我们还可以对每个WebService Method指定的它输出的序列化方式。默认情况下,使用的是JSON序列化,当然我们还是可以使用XML序列化。

  通过研究asp.net ajax的WebServiceProxy类,和Fiddler观察调用WebService传往服务器的请求。不难发现,asp.net ajax调用WebService普通的请求唯一的不同就在于它在Request Header传递的Content-Type值是application/json;utf-8。而这也是EXT调用asp.net ajax WebService的关键,我们只需要在请求的头部的Content-Type传这个值就行了(注意,一定只能是这个值,如果加上其它的字符串就无法调用)。

  向WebService传递的参数也必须有一定规则。使用GET和POST请求,分别有不同的传参方式。如果使用POST请求,需要将用户传递参数当成对象序列化成JSON串,而当是GET请求时,使用与默认的传参方式即可(普通的地址栏传参方式,以用&来连接不同的参数)。

  只要严格遵守这两条请求规则,就可以正确的访问asp.net ajax WebService。

  新建一个Ext.data.EnhancedConnection类,从Ext.data.Connection继承下来,

Ext.data.EnhancedConnection = function(config){
    Ext.apply(this,config);
    Ext.data.EnhancedConnection.superclass.constructor.call(this);   
}

  重写它的request方法如下:

Ext.extend(Ext.data.EnhancedConnection,Ext.data.Connection,{
    webServiceHeaders : {'Content-Type': 'application/json;utf-8'},
    request : function(o){
         if(this.fireEvent("beforerequest", this, o) !== false){           
            var p = o.params;
            var hs = o.headers;;
            var url = o.url || this.url;
            if(typeof url == 'function'){
                url = url.call(o.scope||window, o);
            }
            var method = o.method||this.method||(p ? "POST" : "GET");
             //是否为WebService
            if(!o.isWebService)
            {
                //如果不是WebService请求,不改变EXT的请求行为
                if(typeof p == "function"){
                    p = p.call(o.scope||window, o);
                }
                if(typeof p == "object"){
                    p = Ext.urlEncode(p);
                }
                if(this.extraParams){
                    var extras = Ext.urlEncode(this.extraParams);
                    p = p ? (p + '&' + extras) : extras;
                }

                if(o.form){
                    var form = Ext.getDom(o.form);
                    url = url || form.action;

                    var enctype = form.getAttribute("enctype");
                    if(o.isUpload || (enctype && enctype.toLowerCase() == 'multipart/form-data')){
                        return this.doFormUpload(o, p, url);

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JAVA EE 项目常用知识 之AJAX技术实现select下拉列表联动的两种

    JAVA EE 项目常用知识 之AJAX技术实现select下拉列表联动的两种

    2017-09-11 11:42

  • Ajax请求在数据量大的时候出现超时的解决方法

    Ajax请求在数据量大的时候出现超时的解决方法

    2017-09-10 17:02

  • JQuery AJAX提交中文乱码的解决方案

    JQuery AJAX提交中文乱码的解决方案

    2017-09-10 16:06

  • ztree点击文字勾选checkbox,radio实现方法

    ztree点击文字勾选checkbox,radio实现方法

    2017-09-10 15:01

网友点评
r