使用javascript調(diào)用webservice示例

1、使用 javascript調(diào)用 webservice示例再javascript 中使用 soap調(diào)用 webservice 的示例代碼代碼再IE6和FF測試通過，對于c#寫的webservice和java(xfire) 寫的，都測試 過,沒有問題此代碼原型來源于 的 javascript soapclient發(fā)現(xiàn)這個(gè)下載的js只能用于調(diào)用c#的webservice,所以利用mootools,重新圭寸 裝，達(dá)到IE和火狐的兼容的同時(shí)，兼容java和c#(再例子中使用的 mootools.v1.11.js文件,做過修改)客戶端js調(diào)用代碼如下js代碼1. function ajaxRequest(

2、)2. 3. var url = "http:/localhost:88/webservicedemo.asmx"4.4. /設(shè)置webService傳入?yún)?shù)5. /6. /注意：7. /8. / 調(diào)用.Net寫的webservice(如例子中的 webservicedemo.asmx)9. /HelloTo(String name)針對 name參數(shù)必須寫成wqj,還有更多參數(shù)一樣寫，使用名稱匹配10. /傳入的參數(shù)數(shù)量可以不等于(多于或少于)方法要求的參數(shù)12./13. /14. /調(diào)用 java(xfire)發(fā)布的 webService傳入的參數(shù)必須與調(diào)用方法的參數(shù)數(shù)

3、量相等，且按傳入值的順序進(jìn)行匹配15./16.17. var para = "wqj"這里應(yīng)該是一個(gè)標(biāo)準(zhǔn)的xml形式,源碼貼出 來時(shí)被慮掉了，請參看附件源碼18.19.var op = 20.data:para,21.onComplete: showResponse,22.onFailure:showError,23.update:'ajaxBack'24.;25.26.var service = newWebService(url, "HelloTo"27.service.request();28.return false ;29.30

4、.function showError(obj)31.32./obj 是一個(gè) xmlHttpRequest 對象33.alert( "error" );34.35.function showResponse(requestText,requestXML)36.37./requestText 返回的文本38./requestXML 返回的 XML39.alert( "ok" );40.,op);WebService 類的代碼如下 (webservice.js) js 代碼1. var WSDLS = ;2.3. var WebService = newCl

5、ass(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: false16. ,17.18. initialize: function (url,method,options)19. 6.2

6、1.52.53.this .url = url;this .method = method; this .options = options;,request :function ()varwsdl = WSDLS this .url;if (!wsdl)var op = method:'GET',async: false ;var wsdlAjax = newXHR(op).send( this .url + "?wsdl&

7、quot;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"

8、; ) .nodeValue :wsdl.documentElement.attributes "targetNamespace" .value;var sr ="" +Illi"xmlns:xsi="/2001/XMLSchema-instance" " +" +"xmlns:xsd="/2001/XMLSchema""xmlns:soap="http:/schemas.xmlsoap.or

9、g/soap/envelope/">" +"" +"<" + this .method + " xmlns="" + ns + "">" +(this .options.data =null ?"" :this .options.data) +" + this .method + ">54. this .options.method = 'post'55. this .options.data =

10、 null ;56.56. var soapaction = (ns.lastIndexOf("/" ) != nsength - 1)ns + "/" : ns) + this .method;58.57. var soapAjax = newAjax( this .url, this .options);58. soapAjax.setHeader("SOAPActio n", soapactio n);59. soapAjax.setHeader("Content-type" , "text/xml

11、;charset=utf-8");60. soapAjax.request(sr);61. 64.62. );在第一個(gè)版本中存在以下問題1. 不能根據(jù)webservice的要求輸入?yún)?shù)自動組織參數(shù)2. 沒有處理返回值3. 一旦webservice調(diào)用過程出錯(cuò)，會形成一個(gè)死循環(huán)(一直彈出error)V2說明1. 解決第一版中死循環(huán)的問題2. 統(tǒng)一輸入?yún)?shù)的傳入形式(與mootools的ajax使用方式完全一致),形式如name=wqj&age=20&3. 自動根據(jù)參數(shù)名對應(yīng)的值，組織webservice的傳入?yún)?shù)，只根據(jù)webservice 要求的參數(shù)名查找對應(yīng)的值與順

12、序不再有關(guān)系.(對于xfire中的輸入?yún)?shù)使用名稱in0,in1)傳入的參數(shù)數(shù)量也不再要求一致，多的自動丟棄，少的自動傳空4. 對于返回的XML增加提取方法，返回需要的關(guān)鍵返回值(去掉XMLS框框)詳細(xì)參照附件源碼，下面是部分關(guān)鍵代碼* JavaScriptSOAP.rar (47.1 KB)* 扌苗述:js 調(diào)用webservice示例*下載次數(shù):443« JavaScriptS0AP(V2).rar (49.5 KB)« 描述：js,sope 第二版下載次數(shù)：761引用地址：代碼再IE6和FF測試通過，對于c#寫的webservice和java(xfire) 寫的，都測

13、試 過,沒有問題此代碼原型來源于 http:/www.guru4. net/的 javascript soapclie nt發(fā)現(xiàn)這個(gè)下載的js只能用于調(diào)用c#的webservice,所以利用mootools,重新圭寸 裝，達(dá)到IE和火狐的兼容的同時(shí)，兼容java和c#(再例子中使用的mootools.v1.11.js文件，做過修改)客戶端js調(diào)用代碼如下js代碼1. function ajaxRequest()2. 3. var url = "http:/localhost:88/webservicedemo.asmx"4.4. /設(shè)置webService傳入?yún)?shù)5. /6

14、. /注意：7. /8. /調(diào)用.Net寫的webservice(如例子中的webservicedemo.asmx)9. /HelloTo(String name)針對 name參數(shù)必須寫成<name></name>wqj,還有更多參數(shù)一樣寫，使用名稱匹配10. /傳入的參數(shù)數(shù)量可以不等于(多于或少于)方法要求的參數(shù)11. /12. /調(diào)用 java(xfire) 發(fā)布的 webService14./ 傳入的參數(shù)必須與調(diào)用方法的參數(shù)數(shù)量相等 按傳入值的順序進(jìn)行匹配15./16.17.var para = "<name></name>wq

15、j"這里應(yīng)該是一個(gè)標(biāo)準(zhǔn)的形式, 源碼貼出來時(shí)被慮掉了 ,請參看附件源碼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 是一個(gè) xmlHt

16、tpRequest 對象33.alert("error");34.35.function showResponse(requestText,requestXML)36.37./requestText 返回的文本38./requestXML 返回的 XML39.alert("ok");40.,且xmlWebService 類的代碼如下 (webservice.js) js 代碼1.2. var WSDLS = ;3.4. var WebService = new Class(5.6. url : '',7. method : '&#

17、39;,8. options:9. method:'GET',10. data: null,11. update: null,12. onComplete: Class.empty,13. onError:Class.empty,14. evalScripts: false,15. evalResponse: false16. ,18.18. initialize: function(url,method,options)19. 20. this.url = url;21. this.method = method;22. this.options = options;24.2

18、5. ,26.27. request : function()28. 29. var wsdl = WSDLSthis.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. WSDLSthis.url = wsdl;36. 37. this.setSoap(wsdl);38. ,39

19、.40. setSoap : function(wsdl)41. 42.43. var ns = (wsdl.documentElement.attributes"targetNamespace" + "" = "undefined") ? wsdl.documentElement.attributes.ge tNamedItem("targetNamespace").nodeValue : wsdl.documentElement. attributes"targetNamespace".va

20、lue;44. var sr =45. "" +46. ""47. "xmlns:xsi="/2001/XMLSchema-instance" " +"xmlns:xsd="/2001/XMLSchema"II+48. "xmlns:soap="/soap/envelope/">" +49. "<soap:bod

21、y>"</soap:body> +50. "<" + this.method + " xmlns="" + ns + "">" +51. (this.options.data = null ?"":this.options.data) +52. " + this.method + ">54.55.this.options.method = 'post'56. this.options.data = null;57.

22、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=u t

23、f-8");63. soapAjax.request(sr);64. 65.63. );在第一個(gè)版本中存在以下問題1. 不能根據(jù) webservice 的要求輸入?yún)?shù)自動組織參數(shù)2. 沒有處理返回值3. 一旦 webservice 調(diào)用過程出錯(cuò) , 會形成一個(gè)死循環(huán) ( 一直彈出 error)V2 說明1. 解決第一版中死循環(huán)的問題2. 統(tǒng)一輸入?yún)?shù)的傳入形式 （與 mootools 的 ajax 使用方式完全一致 ）, 形式如 name=wqj&age=20&3. 自動根據(jù)參數(shù)名對應(yīng)的值 , 組織 webservice 的傳入?yún)?shù) , 只根據(jù) webservice

24、要求的參數(shù)名查找對應(yīng)的值與順序不再有關(guān)系 .（ 對于 xfire 中的輸入?yún)?shù)使用名稱 in0,in1）傳入的參數(shù)數(shù)量也不再要求一致 , 多的自動丟棄 , 少的自動傳空4. 對于返回的XML增加提取方法,返回需要的關(guān)鍵返回值（去掉XMLS框框）詳細(xì)參照附件源碼 , 下面是部分關(guān)鍵代碼WebService 類的代碼如下 (webservice.js) js 代碼1. var WSDLS = ;2.2. var WebService = new Class(4.3. url : '',4. method : '',5. options:6. 7. method:&#

25、39;GET',8. data: null,9. update: null,10. onComplete: Class.empty,11. onError:Class.empty,12. evalScripts: false,13. evalResponse: false14. ,17.17. initialize: function(url,method,options)18. 19. this.url = url;20. this.method = method;21. this.options = options;22. ,24.23. request : function()2

26、4. 25. var wsdl = WSDLSthis.url;26. if(!wsdl)27. 28. var op = method:'GET',async: false;29. var wsdlAjax = new XHR(op).send(this.url + "?wsdl", null);30. wsdl = wsdlAjax.transport.responseXML;31. WSDLSthis.url = wsdl;32. 35.36. this.setSoap(wsdl);37. ,38.39. setSoap : function(wsdl

27、)40. 41. var paraXML = this.getParaXML(wsdl);42. alert(paraXML);43. var ns = (wsdl.documentElement.attributes"targetNamesp ace" + "" = "undefined") ? wsdl.documentElement.attributes.ge tNamedItem("targetNamespace").nodeValue : wsdl.documentElement. attributes&

28、quot;targetNamespace".value;44. var sr =45. "" +46. " +47. "xmlns:xsi="/2001/XMLSchema-instance" " +48. "xmlns:xsd="/2001/XMLSchema"" +49. "xmlns:soap="/soap/envelope/"

29、>" +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 soap

30、action = (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

31、. soapAjax.request(sr);64. ,65. getParaXML : function(wsdl)66. 0.71.var objNode = null;var rtnValue = "" /java(xfire) var ell = this.getElementsByTagName(wsdl,"xsd:element")J5.if(ell.length = 0)/c#ell = this.getElementsByTagName(wsdl,"s:element");76.

32、77.78.79.for(var i = 0; i < ell.length; i+)if(this.getElementAttrValue(elli,"name") = this.method)6.87.88. objNode = elli; break; if(objNode = null) return rtnValue; /java(xfire)ell = this.getElementsByTagName(objNode,"xsd:element");2.);if(ell.leng

33、th = 0)/c#ell = this.getElementsByTagName(objNode,"s:element");6.97.98.if(ell.length = 0) return rtnValue ;var hash = new Hash();if(this.options.data != null && this.options.data.clean!= ""99.100. );hash = this.options.data.split("&").toHash("

34、=");101. 102. 103. 104.for(var i = 0; i < ell.length; i+) 105.var paraName = this.getElementAttrValue(elli,"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.1

35、16.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./jav

36、a(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 soap0.childNodes0.nodeValue;135.136.,137.getElementsByTagName : function(objNode,tagName)138.139./tag

37、Name 形式如 xsd:element , 寫出 tag 的全稱140.141.var ell;142.if(this.isIE()143.144.ell = objNode.getElementsByTagName(tagName);145. 146. else147. 148. if(tagName.contains(":") tagName = tagName.split(":")1;149. ell = objNode.getElementsByTagName(tagName);150. 151. return ell;152. ,153. g

38、etElementAttrValue : function(objNode,attrName)154. 155. var rtnValue = ""156.157.if(objNode = null) return rtnValue;158.159. if(objNode.attributesattrName + "" = "undefined")160. 161. if(objNode.attributes.getNamedItem(attrName) != null)162. rtnValue = objNode.attribut

39、es.getNamedItem (attrName).nodeValue ;163.164. 165. else166. 167. if(objNode.attributesattrName != null)168. rtnValue = objNode.attributesattrName.va lue;169. 170. return rtnValue;171. ,172. isIE : function()173. 174. var isMSIE = /*cc_on!*/false;175. return isMSIE;176. 177. );178.179. Array.extend(

40、180.181. toHash : function (splitChar)182. 183. var hash = new Hash();184. for(var i=0;i<this.length;i+)185. 186.187.if(thisi.split(splitChar).length = 1) contrnue;188.189.var key = thisi.split(splitChar)0.trim();190. var value = thisi.split(splitChar)1.trim()191.192.hash.set(key, value);193.194.195.return hash;196.197.)J198.199.function xmlscc(strData)200.201.202.strData=strData.replace(/&/g, "&");203.s