使用javascript调用webservice示例

再javascript中使用soap调用webservice的示例代码

代码再IE6和FF测试通过,对于c#写的webservice和java(xfire)写的,都测试过,没有问题

此代码原型来源于 http://www.guru4.net/ 的javascript soapclient

发现这个下载的js只能用于调用c#的webservice,所以利用mootools,重新封装,达到IE和火狐的兼容的同时,兼容java和c#

(再例子中使用的 mootools.v1.11.js 文件,做过修改)

客户端js调用代码如下

js 代码

function ajaxRequest()
    {
        var url = "http://localhost:88/webservicedemo.asmx";

        //设置webService传入参数
        //
        //注意:
        //
        //    调用.Net 写的webservice(如例子中的webservicedemo.asmx)
        //           HelloTo(String name)   针对name参数必须写成 <name></name>wqj,还有更多参数一样写,使用名称匹配
        //           传入的参数数量可以不等于(多于或少于)方法要求的参数
        //
        //    调用java(xfire) 发布的webService
        //           传入的参数必须与调用方法的参数数量相等,且按传入值的顺序进行匹配
        //

        var para = "<name></name>wqj"; 这里应该是一个标准的xml形式,源码贴出来时被虑掉了,请参看附件源码

        var op = {
                    data:para,
                    onComplete: showResponse,
                    onFailure:showError,
                    update:'ajaxBack'
                 };

        var service = new WebService(url,"HelloTo",op);
        service.request();
        return false;
    }
    function showError(obj)
    {
        //obj 是一个xmlHttpRequest对象
        alert("error");
    }
    function showResponse(requestText,requestXML)
    {
        //requestText 返回的文本
        //requestXML 返回的XML
        alert("ok");
    }

WebService类的代码如下(webservice.js)

js 代码

var WSDLS = {};

var WebService = new Class({

    url : '',
    method : '',
    options:
    {
        method:'GET',
        data: null,
        update: null,
        onComplete: Class.empty,
        onError:Class.empty,
        evalScripts: false,
        evalResponse: false
    },

    initialize: function(url,method,options)
    {
        this.url = url;
        this.method = method;
        this.options = options;

    },

    request : function()
    {
        var wsdl = WSDLS[this.url];
        if(!wsdl)
        {
            var op = {method:'GET',async: false};
            var wsdlAjax = new XHR(op).send(this.url + "?wsdl", null);
            wsdl = wsdlAjax.transport.responseXML;
            WSDLS[this.url] = wsdl;
        }
        this.setSoap(wsdl);
    },

    setSoap : function(wsdl)
    {

        var ns = (wsdl.documentElement.attributes["targetNamespace"] + "" == "undefined") ? wsdl.documentElement.attributes.getNamedItem("targetNamespace").nodeValue : wsdl.documentElement.attributes["targetNamespace"].value;
        var sr =
                "<!---->" +
                ""
                "xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" " +
                "xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" " +
                "xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\">" +
                "<soap:body>"</soap:body> +
                "<" + this.method + " xmlns=\"" + ns + "\">" +
                     (this.options.data === null ?"":this.options.data) +
                " + this.method + ">;

        this.options.method = 'post';
        this.options.data = null;

        var soapaction = ((ns.lastIndexOf("/") != ns.length - 1) ? ns + "/" : ns) + this.method;

        var soapAjax = new Ajax(this.url,this.options);
        soapAjax.setHeader("SOAPAction", soapaction);
        soapAjax.setHeader("Content-type", "text/xml; charset=utf-8");
        soapAjax.request(sr);
    }

});

 在第一个版本中存在以下问题

1. 不能根据webservice的要求输入参数自动组织参数

2. 没有处理返回值

3.一旦webservice调用过程出错,会形成一个死循环(一直弹出error)

V2 说明

1. 解决第一版中死循环的问题

2. 统一输入参数的传入形式(与mootools的ajax使用方式完全一致),形式如name=wqj&age=20&........

3. 自动根据参数名对应的值,组织webservice的传入参数,只根据webservice要求的参数名查找对应的值

    与顺序不再有关系.(对于xfire中的输入参数使用名称 in0,in1........)

    传入的参数数量也不再要求一致,多的自动丢弃,少的自动传空

4. 对于返回的XML,增加提取方法,返回需要的关键返回值(去掉XML的框框)

详细参照附件源码,下面是部分关键代码

WebService类的代码如下(webservice.js)

js 代码

var WSDLS = {};

var WebService = new Class({

    url : '',
    method : '',
    options:
    {
        method:'GET',
        data: null,
        update: null,
        onComplete: Class.empty,
        onError:Class.empty,
        evalScripts: false,
        evalResponse: false
    },

    initialize: function(url,method,options)
    {
        this.url = url;
        this.method = method;
        this.options = options;
    },

    request : function()
    {
        var wsdl = WSDLS[this.url];
        if(!wsdl)
        {
            var op = {method:'GET',async: false};
            var wsdlAjax = new XHR(op).send(this.url + "?wsdl", null);
            wsdl = wsdlAjax.transport.responseXML;
            WSDLS[this.url] = wsdl;
        }

        this.setSoap(wsdl);
    },

    setSoap : function(wsdl)
    {
        var paraXML = this.getParaXML(wsdl);
        alert(paraXML);
        var ns = (wsdl.documentElement.attributes["targetNamespace"] + "" == "undefined") ? wsdl.documentElement.attributes.getNamedItem("targetNamespace").nodeValue : wsdl.documentElement.attributes["targetNamespace"].value;
        var sr =
                "" +
                " +
                "xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" " +
                "xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" " +
                "xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\">" +
                "<soap:body>"</soap:body> +
                "<" + this.method + " xmlns=\"" + ns + "\">" +
                    paraXML  +
                "<!----> + this.method + ">";

        this.options.method = 'post';
        this.options.data = null;

        var soapaction = ((ns.lastIndexOf("/") != ns.length - 1) ? ns + "/" : ns) + this.method;

        var soapAjax = new Ajax(this.url,this.options);
        soapAjax.setHeader("SOAPAction", soapaction);
        soapAjax.setHeader("Content-type", "text/xml; charset=utf-8");
        soapAjax.request(sr);
    },
    getParaXML : function(wsdl)
    {

        var objNode = null;
        var rtnValue = "";
        //java(xfire)
        var ell = this.getElementsByTagName(wsdl,"xsd:element");
        if(ell.length == 0)
        {
            //c#
            ell = this.getElementsByTagName(wsdl,"s:element");
        }
        for(var i = 0; i < ell.length; i++)
        {
            if(this.getElementAttrValue(ell[i],"name") == this.method)
            {
                objNode = ell[i];
                break;
            }
        }

        if(objNode == null) return rtnValue;
        //java(xfire)
        ell = this.getElementsByTagName(objNode,"xsd:element");
        if(ell.length == 0)
        {
            //c#
            ell = this.getElementsByTagName(objNode,"s:element");
        }
        if(ell.length == 0) return rtnValue ;

        var hash = new Hash();

        if(this.options.data != null && this.options.data.clean != "")
        {
            hash = this.options.data.split("&").toHash("=");
        }

        for(var i = 0; i < ell.length; i++)
        {
            var paraName = this.getElementAttrValue(ell[i],"name");
            rtnValue = rtnValue + this.getSingleXML(paraName,hash);
        }

        return rtnValue;
    },

    getSingleXML : function (name,hash)
    {
        name = name.trim();

        var rtnValue = "";
        if(hash.hasKey(name))
        {
            rtnValue = hash.get(name);
        }
        rtnValue = "<" + name + ">" + xmlscc(rtnValue) + "<!----> + name + ">"
        return rtnValue;
    },
    getBackData: function(xml)
    {
        var rtnValue = "";
        //java(xfire)
        var soap = this.getElementsByTagName(xml,"ns1:out");
        if(soap.length == 0)
        {
            //c#
            soap = this.getElementsByTagName(xml,this.method + "Result");
        }
        return soap[0].childNodes[0].nodeValue;

    },
    getElementsByTagName : function(objNode,tagName)
    {
        //tagName 形式如 xsd:element ,写出tag的全称

        var ell;
        if(this.isIE())
        {
            ell = objNode.getElementsByTagName(tagName);
        }
        else
        {
            if(tagName.contains(":")) tagName = tagName.split(":")[1];
            ell = objNode.getElementsByTagName(tagName);
        }
        return ell;
    },
    getElementAttrValue : function(objNode,attrName)
    {
        var rtnValue = "";

        if(objNode == null) return rtnValue;

        if(objNode.attributes[attrName] + "" == "undefined")
        {
            if(objNode.attributes.getNamedItem(attrName) != null)
                rtnValue = objNode.attributes.getNamedItem(attrName).nodeValue ;

        }
        else
        {
            if(objNode.attributes[attrName] != null)
                rtnValue = objNode.attributes[attrName].value;
        }
        return rtnValue;
    },
    isIE : function()
    {
        var isMSIE = /*@cc_on!@*/false;
        return isMSIE;
    }
});

Array.extend({

    toHash : function (splitChar)
    {
        var hash = new Hash({});
        for(var i=0;i<this.length;i++)
        {

            if(this[i].split(splitChar).length == 1) contrnue;

            var key = this[i].split(splitChar)[0].trim();
            var value = this[i].split(splitChar)[1].trim();

            hash.set(key, value);
        }

        return hash;
    }
});

function xmlscc(strData)
{

    strData=strData.replace(/&/g, "&");
    strData=strData.replace(/>/g, ">");
    strData=strData.replace(/"<");
    strData=strData.replace(/"/g, """);
    strData=strData.replace(/'/g, "'");
    return strData;
}

相应的调用代码如下:

 

js 代码

<script type=< span="">"text/javascript">

    var service ;
    function ajaxRequest()
    {
        var url = "http://localhost:88/webservicedemo.asmx";

        //设置webService传入参数
        //
        //注意:
        //
        //    调用webservice(如例子中的webservicedemo.asmx)
        //           HelloTo(String name)   针对name参数必须写成name=wqj ,还有更多参数一样写,使用&符号分隔(name=11&age=20&.....),使用名称匹配
        //           传入的参数数量可以不等于(多于或少于)方法要求的参数


        var para = "name=wqj";

        var op = {
                    data:para,
                    onComplete: showResponse,
                    onFailure:showError,
                    update:'ajaxBack'
                 };

        service = new WebService(url,"HelloTo",op);
        service.request();
        return false;
    }
    function showError(obj)
    {
        //obj 是一个xmlHttpRequest对象
        alert("error");
    }
    function showResponse(requestText,requestXML)
    {
        //requestText 返回的文本
        //requestXML 返回的XML
        // service.getBackData 就是取出返回的XML中,实际需要的数据
        //经过测试兼容 IE,FF
        alert(service.getBackData(requestXML));

    }
    </script>

 

评论

16 楼 up2vs 2007-11-19  

Webservice一般是应用的跨域共享。在一个域了产生调用的几率应该很小。
及时用一些跨域手段实现调用,效率应该也会受到影响。
我暂时还想不出在什么应用里面用ajax直接调用webservice有什么优势和便利。

15 楼 pignut_wang 2007-11-17  

非常感谢楼上的朋友分享你的修改.
最近因为工作的关系,少上网了,没有及时回复,还请谅解.

14 楼 yza0088 2007-11-13  

继续修改:有时我们传递的参数可能是一段HTML，这样的话如果采用楼主的方法。那么无论采用什么分割符传递的HTML片段都可能被截断。
因此options.data直接传递Hash
修改代码如下:

//		var hash = new Hash(); 
		
//		if(this.options.data != null && this.options.data.clean != "")
//		{
//			hash = this.options.data.split("&").toHash(" = "); //Edit by:yza 2007/11/13
//		}
		
//		for(var i = 0; i < ell.length; i++)
//		{
//			var paraName = this.getElementAttrValue(ell[i],"name");
//			rtnValue = rtnValue + this.getSingleXML(paraName,hash);
//		}

      	for(var i = 0; i < ell.length; i++)
		{
			var paraName = this.getElementAttrValue(ell[i],"name");
			rtnValue = rtnValue + this.getSingleXML(paraName,this.options.data);
		}

13 楼 yza0088 2007-11-13  

最近有个项目正好用上楼主的js封装，这里谢过!
但我发现当传递html字符串的时候，会有截断现象。
因此做了以下修改:

hash = this.options.data.split("&").toHash(" = ");

"="两边加了空格,这样当参数为xml或html串时就不会有问题了。
但在拼data时可千万记得用" = "而不是"="

12 楼 afcn0 2007-10-24  

跨域不麻烦,甚至更简单,script tag回调函数比XHR还简单

11 楼 gazhangting 2007-10-24  

用javascript联webservice没什么意义,因为脚本不能跨域访问,就算勉强可以实现,也很麻烦.而用webservice要意义就是要跨平台,跨域.以前也用AJAX连过,可以后来发现一点意义也没有

10 楼 pignut_wang 2007-10-23  

kidfang  
这个怎么调用,点"执行"按钮报错?

确认一下,你的webservice地址是不是
http://localhost:88/webservicedemo.asmx

还句话说,通过这个url,是不是能访问到?
我觉得应该就是这个问题

9 楼 hideto 2007-10-19  

用Jester调用REST Web Service比简单不少

8 楼 kidfang 2007-10-19  

这个怎么调用,点"执行"按钮报错?

7 楼 williamy 2007-10-11  

请问和ajax比有什么优势，不明白其动机

6 楼 bladechan 2007-08-24  

厉害，谢谢

5 楼 pignut_wang 2007-08-08  

不同的技术有不同的用途嘛

4 楼 carmansky 2007-08-07  

WebService就是不能上传太大的文件.当然WebService主要是用来集成的..
顶之.

3 楼 network-eagle 2007-08-03  

学习了。.js 的功能能做到这么强大呀...研究研究...

2 楼 pignut_wang 2007-07-27  

神奇?
应该说是通用,呵呵

1 楼 shmilyLT 2007-07-26  

好神奇,最近正好在搞webService