论坛首页 → Web前端技术论坛 →

使用javascript调用webservice示例

浏览 72044 次
锁定老帖子 主题：使用javascript调用webservice示例
该帖已经被评为良好帖
作者 正文
  • pignut_wang
  • 等级: 一星会员
  • 性别:
  • 文章: 40
  • 积分: 133
  • 来自: 深圳
   发表时间：2007-07-05  

再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 代码
 
  1. function ajaxRequest()   
  2.     {   
  3.         var url = "http://localhost:88/webservicedemo.asmx";   
  4.            
  5.         //设置webService传入参数   
  6.         //   
  7.         //注意:   
  8.         //   
  9.         //    调用.Net 写的webservice(如例子中的webservicedemo.asmx)   
  10.         //           HelloTo(String name)   针对name参数必须写成 <name></name>wqj,还有更多参数一样写,使用名称匹配   
  11.         //           传入的参数数量可以不等于(多于或少于)方法要求的参数   
  12.         //   
  13.         //    调用java(xfire) 发布的webService   
  14.         //           传入的参数必须与调用方法的参数数量相等,且按传入值的顺序进行匹配   
  15.         //   
  16.            
  17.         var para = "<name></name>wqj"; 这里应该是一个标准的xml形式,源码贴出来时被虑掉了,请参看附件源码  
  18.            
  19.         var op = {   
  20.                     data:para,   
  21.                     onComplete: showResponse,   
  22.                     onFailure:showError,   
  23.                     update:'ajaxBack'   
  24.                  };   
  25.   
  26.         var service = new WebService(url,"HelloTo",op);   
  27.         service.request();   
  28.         return false;   
  29.     }   
  30.     function showError(obj)   
  31.     {   
  32.         //obj 是一个xmlHttpRequest对象   
  33.         alert("error");   
  34.     }   
  35.     function showResponse(requestText,requestXML)   
  36.     {   
  37.         //requestText 返回的文本   
  38.         //requestXML 返回的XML   
  39.         alert("ok");   
  40.     }  

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

js 代码
 
  1.   
  2. var WSDLS = {};   
  3.   
  4. var WebService = new Class({   
  5.   
  6.     url : '',   
  7.     method : '',   
  8.     options:    
  9.     {   
  10.         method:'GET',   
  11.         data: null,   
  12.         update: null,   
  13.         onComplete: Class.empty,   
  14.         onError:Class.empty,   
  15.         evalScripts: false,   
  16.         evalResponse: false  
  17.     },   
  18.        
  19.     initialize: function(url,method,options)   
  20.     {   
  21.         this.url = url;   
  22.         this.method = method;   
  23.         this.options = options;   
  24.   
  25.     },   
  26.        
  27.     request : function()   
  28.     {   
  29.         var wsdl = WSDLS[this.url];   
  30.         if(!wsdl)    
  31.         {   
  32.             var op = {method:'GET',async: false};   
  33.             var wsdlAjax = new XHR(op).send(this.url + "?wsdl", null);             
  34.             wsdl = wsdlAjax.transport.responseXML;   
  35.             WSDLS[this.url] = wsdl;   
  36.         }   
  37.         this.setSoap(wsdl);   
  38.     },   
  39.            
  40.     setSoap : function(wsdl)   
  41.     {   
  42.            
  43.         var ns = (wsdl.documentElement.attributes["targetNamespace"] + "" == "undefined") ? wsdl.documentElement.attributes.getNamedItem("targetNamespace").nodeValue : wsdl.documentElement.attributes["targetNamespace"].value;   
  44.         var sr =    
  45.                 "<!---->" +   
  46.                 ""
  47.                 "xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" " +   
  48.                 "xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" " +   
  49.                 "xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\">" +   
  50.                 "<soap:body>"</soap:body> +   
  51.                 "<" + this.method + " xmlns=\"" + ns + "\">" +   
  52.                      (this.options.data === null ?"":this.options.data) +   
  53.                 " + this.method + ">;   
  54.            
  55.         this.options.method = 'post';   
  56.         this.options.data = null;   
  57.            
  58.         var soapaction = ((ns.lastIndexOf("/") != ns.length - 1) ? ns + "/" : ns) + this.method;   
  59.            
  60.         var soapAjax = new Ajax(this.url,this.options);   
  61.         soapAjax.setHeader("SOAPAction", soapaction);   
  62.         soapAjax.setHeader("Content-type", "text/xml; charset=utf-8");   
  63.         soapAjax.request(sr);   
  64.     }   
  65.        
  66. });  

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

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 代码
  1. var WSDLS = {};  
  2.   
  3. var WebService = new Class({  
  4.   
  5.     url : '',  
  6.     method : '',  
  7.     options:   
  8.     {  
  9.         method:'GET',  
  10.         data: null,  
  11.         update: null,  
  12.         onComplete: Class.empty,  
  13.         onError:Class.empty,  
  14.         evalScripts: false,  
  15.         evalResponse: false  
  16.     },  
  17.       
  18.     initialize: function(url,method,options)  
  19.     {         
  20.         this.url = url;  
  21.         this.method = method;  
  22.         this.options = options;  
  23.     },  
  24.       
  25.     request : function()  
  26.     {  
  27.         var wsdl = WSDLS[this.url];  
  28.         if(!wsdl)   
  29.         {  
  30.             var op = {method:'GET',async: false};  
  31.             var wsdlAjax = new XHR(op).send(this.url + "?wsdl", null);            
  32.             wsdl = wsdlAjax.transport.responseXML;  
  33.             WSDLS[this.url] = wsdl;  
  34.         }  
  35.   
  36.         this.setSoap(wsdl);  
  37.     },  
  38.           
  39.     setSoap : function(wsdl)  
  40.     {  
  41.         var paraXML = this.getParaXML(wsdl);  
  42.         alert(paraXML);  
  43.         var ns = (wsdl.documentElement.attributes["targetNamespace"] + "" == "undefined") ? wsdl.documentElement.attributes.getNamedItem("targetNamespace").nodeValue : wsdl.documentElement.attributes["targetNamespace"].value;  
  44.         var sr =   
  45.                 "" +  
  46.                 " +  
  47.                 "xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" " +  
  48.                 "xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" " +  
  49.                 "xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\">" +  
  50.                 "<soap:body>"</soap:body> +  
  51.                 "<" + this.method + " xmlns=\"" + ns + "\">" +  
  52.                     paraXML  +  
  53.                 "<!----> + this.method + ">";  
  54.           
  55.         this.options.method = 'post';  
  56.         this.options.data = null;  
  57.           
  58.         var soapaction = ((ns.lastIndexOf("/") != ns.length - 1) ? ns + "/" : ns) + this.method;  
  59.   
  60.         var soapAjax = new Ajax(this.url,this.options);  
  61.         soapAjax.setHeader("SOAPAction", soapaction);  
  62.         soapAjax.setHeader("Content-type", "text/xml; charset=utf-8");  
  63.         soapAjax.request(sr);   
  64.     },  
  65.     getParaXML : function(wsdl)  
  66.     {  
  67.           
  68.         var objNode = null;  
  69.         var rtnValue = "";  
  70.         //java(xfire)  
  71.         var ell = this.getElementsByTagName(wsdl,"xsd:element");      
  72.         if(ell.length == 0)   
  73.         {  
  74.             //c#  
  75.             ell = this.getElementsByTagName(wsdl,"s:element");    
  76.         }  
  77.         for(var i = 0; i < ell.length; i++)  
  78.         {  
  79.             if(this.getElementAttrValue(ell[i],"name") == this.method)  
  80.             {  
  81.                 objNode = ell[i];  
  82.                 break;  
  83.             }  
  84.         }  
  85.   
  86.         if(objNode == null) return rtnValue;  
  87.         //java(xfire)  
  88.         ell = this.getElementsByTagName(objNode,"xsd:element");   
  89.         if(ell.length == 0)   
  90.         {  
  91.             //c#  
  92.             ell = this.getElementsByTagName(objNode,"s:element");  
  93.         }  
  94.         if(ell.length == 0) return rtnValue ;  
  95.           
  96.         var hash = new Hash();  
  97.           
  98.         if(this.options.data != null && this.options.data.clean != "")  
  99.         {  
  100.             hash = this.options.data.split("&").toHash("=");  
  101.         }  
  102.           
  103.         for(var i = 0; i < ell.length; i++)  
  104.         {  
  105.             var paraName = this.getElementAttrValue(ell[i],"name");  
  106.             rtnValue = rtnValue + this.getSingleXML(paraName,hash);  
  107.         }  
  108.           
  109.         return rtnValue;  
  110.     },  
  111.       
  112.     getSingleXML : function (name,hash)  
  113.     {  
  114.         name = name.trim();  
  115.           
  116.         var rtnValue = "";  
  117.         if(hash.hasKey(name))  
  118.         {  
  119.             rtnValue = hash.get(name);  
  120.         }  
  121.         rtnValue = "<" + name + ">" + xmlscc(rtnValue) + "<!----> + name + ">"  
  122.         return rtnValue;  
  123.     },  
  124.     getBackData: function(xml)  
  125.     {  
  126.         var rtnValue = "";  
  127.         //java(xfire)  
  128.         var soap = this.getElementsByTagName(xml,"ns1:out");      
  129.         if(soap.length == 0)  
  130.         {  
  131.             //c#  
  132.             soap = this.getElementsByTagName(xml,this.method + "Result");  
  133.         }  
  134.         return soap[0].childNodes[0].nodeValue;       
  135.           
  136.     },  
  137.     getElementsByTagName : function(objNode,tagName)  
  138.     {  
  139.         //tagName 形式如 xsd:element ,写出tag的全称  
  140.   
  141.         var ell;  
  142.         if(this.isIE())  
  143.         {  
  144.             ell = objNode.getElementsByTagName(tagName);      
  145.         }  
  146.         else  
  147.         {  
  148.             if(tagName.contains(":")) tagName = tagName.split(":")[1];  
  149.             ell = objNode.getElementsByTagName(tagName);           
  150.         }  
  151.         return ell;  
  152.     },  
  153.     getElementAttrValue : function(objNode,attrName)  
  154.     {  
  155.         var rtnValue = "";  
  156.           
  157.         if(objNode == null) return rtnValue;  
  158.           
  159.         if(objNode.attributes[attrName] + "" == "undefined")  
  160.         {   
  161.             if(objNode.attributes.getNamedItem(attrName) != null)  
  162.                 rtnValue = objNode.attributes.getNamedItem(attrName).nodeValue ;  
  163.               
  164.         }  
  165.         else  
  166.         {  
  167.             if(objNode.attributes[attrName] != null)  
  168.                 rtnValue = objNode.attributes[attrName].value;  
  169.         }  
  170.         return rtnValue;  
  171.     },  
  172.     isIE : function()  
  173.     {  
  174.         var isMSIE = /*@cc_on!@*/false;  
  175.         return isMSIE;  
  176.     }  
  177. });  
  178.   
  179. Array.extend({  
  180.       
  181.     toHash : function (splitChar)  
  182.     {  
  183.         var hash = new Hash({});  
  184.         for(var i=0;i<this.length;i++)  
  185.         {  
  186.               
  187.             if(this[i].split(splitChar).length == 1) contrnue;  
  188.   
  189.             var key = this[i].split(splitChar)[0].trim();  
  190.             var value = this[i].split(splitChar)[1].trim();  
  191.               
  192.             hash.set(key, value);  
  193.         }  
  194.           
  195.         return hash;  
  196.     }  
  197. });  
  198.   
  199. function xmlscc(strData)  
  200. {  
  201.   
  202.     strData=strData.replace(/&/g, "&");  
  203.     strData=strData.replace(/>/g, ">");  
  204.     strData=strData.replace(/"<");  
  205.     strData=strData.replace(/"/g, """); 
  206.     strData=strData.replace(/'/g, "'");  
  207.     return strData;  
  208. }  
相应的调用代码如下:

 

js 代码
 
  1. <script type=< span="">"text/javascript">  
  2.       
  3.     var service ;  
  4.     function ajaxRequest()  
  5.     {  
  6.         var url = "http://localhost:88/webservicedemo.asmx";  
  7.           
  8.         //设置webService传入参数  
  9.         //  
  10.         //注意:  
  11.         //  
  12.         //    调用webservice(如例子中的webservicedemo.asmx)  
  13.         //           HelloTo(String name)   针对name参数必须写成name=wqj ,还有更多参数一样写,使用&符号分隔(name=11&age=20&.....),使用名称匹配  
  14.         //           传入的参数数量可以不等于(多于或少于)方法要求的参数  
  15.           
  16.           
  17.         var para = "name=wqj";  
  18.           
  19.         var op = {  
  20.                     data:para,  
  21.                     onComplete: showResponse,  
  22.                     onFailure:showError,  
  23.                     update:'ajaxBack'  
  24.                  };  
  25.   
  26.         service = new WebService(url,"HelloTo",op);  
  27.         service.request();  
  28.         return false;  
  29.     }  
  30.     function showError(obj)  
  31.     {  
  32.         //obj 是一个xmlHttpRequest对象  
  33.         alert("error");  
  34.     }  
  35.     function showResponse(requestText,requestXML)  
  36.     {  
  37.         //requestText 返回的文本  
  38.         //requestXML 返回的XML  
  39.         // service.getBackData 就是取出返回的XML中,实际需要的数据  
  40.         //经过测试兼容 IE,FF  
  41.         alert(service.getBackData(requestXML));  
  42.           
  43.     }  
  44.     </script>  




 
返回顶楼
         
  • pignut_wang
  • 等级: 一星会员
  • 性别:
  • 文章: 40
  • 积分: 133
  • 来自: 深圳
   发表时间：2007-07-27  
神奇?
应该说是通用,呵呵
返回顶楼
          回帖地址
0 请登录后投票
  • pignut_wang
  • 等级: 一星会员
  • 性别:
  • 文章: 40
  • 积分: 133
  • 来自: 深圳
   发表时间：2007-08-08  
不同的技术有不同的用途嘛
返回顶楼
          回帖地址
0 请登录后投票
  • williamy
  • 等级: 初级会员
  • 性别:
  • 文章: 203
  • 积分: 71
  • 来自: 永远潜水
   发表时间：2007-10-11  
请问和ajax比有什么优势，不明白其动机
返回顶楼
          回帖地址
0 请登录后投票
  • kidfang
  • 等级: 初级会员
  • 性别:
  • 文章: 62
  • 积分: 30
  • 来自: 安徽
   发表时间：2007-10-19  
这个怎么调用,点"执行"按钮报错?
返回顶楼
          回帖地址
0 请登录后投票
  • hideto
  • 等级: 三钻会员
  • 性别:
  • 文章: 380
  • 积分: 1526
  • 来自: 北京
   发表时间：2007-10-19  
用Jester调用REST Web Service比简单不少
返回顶楼
          回帖地址
1 请登录后投票
  • pignut_wang
  • 等级: 一星会员
  • 性别:
  • 文章: 40
  • 积分: 133
  • 来自: 深圳
   发表时间：2007-10-23  
kidfang  
这个怎么调用,点"执行"按钮报错?

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

还句话说,通过这个url,是不是能访问到?
我觉得应该就是这个问题
返回顶楼
          回帖地址
0 请登录后投票
  • gazhangting
  • 等级: 初级会员
  • 性别:
  • 文章: 8
  • 积分: 40
  • 来自: 南昌市
   发表时间：2007-10-24  
用javascript联webservice没什么意义,因为脚本不能跨域访问,就算勉强可以实现,也很麻烦.而用webservice要意义就是要跨平台,跨域.以前也用AJAX连过,可以后来发现一点意义也没有
返回顶楼
          回帖地址
0 请登录后投票
  • afcn0
  • 等级: 二星会员
  • 性别:
  • 文章: 654
  • 积分: 280
  • 来自: 天津
   发表时间：2007-10-24  
跨域不麻烦,甚至更简单,script tag回调函数比XHR还简单
返回顶楼
          回帖地址
0 请登录后投票
  • yza0088
  • 等级: 初级会员
  • 性别:
  • 文章: 84
  • 积分: 0
  • 来自: 北京
   发表时间：2007-11-13  
最近有个项目正好用上楼主的js封装，这里谢过!
但我发现当传递html字符串的时候，会有截断现象。
因此做了以下修改: 

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


"="两边加了空格,这样当参数为xml或html串时就不会有问题了。
但在拼data时可千万记得用" = "而不是"="
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics