代码学堂(uxuew.cn)提供付费解决PHP WEB开发等技术服务,如果需要请 点击加我QQ:1662935793.
>编程开发 > ASP.NET > Javascript调用Webservice的多种方法

Javascript调用Webservice的多种方法

ASP.NET 围观2845次 更新日期:2017-06-29 16:56:51 留下足迹

代码如下:
  1. using System;  
  2. using System.Web;  
  3. using System.Web.Services;  
  4. using System.Web.Services.Protocols;  
  5. [webservice(namespace = "http://tempuri.org/")]  
  6. [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  
  7. public class Service : System.Web.Services.WebService  
  8. {  
  9. public Service ()  
  10. {  
  11. //uncomment the following line if using designed components  
  12. //InitializeComponent();  
  13. }  
  14. [webmethod]  
  15. public string SayHelloTo(string Name)  
  16. {  
  17. return "Hello "+Name;  
  18. }  
  19. }  

2. js调用webservice+xmlhttp的实现部分。
代码如下:
  1. <html>  
  2. <title>Call webservice with javascript and xmlhttp.</title>  
  3. <body>  
  4. <script language="javascript"><!--  
  5.  
  6.  
  7. //test function with get method.  
  8. function RequestByGet(data){  
  9. var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
  10. //Webservice location.  
  11. var URL="http://localhost:1323/WebSite6/Service.asmx/SayHelloTo?Name=Zach";  
  12. xmlhttp.Open("GET",URL, false);  
  13. xmlhttp.SetRequestHeader ("Content-Type","text/xml; charset=utf-8");  
  14. xmlhttp.SetRequestHeader ("SOAPAction","http://tempuri.org/SayHelloTo");  
  15. xmlhttp.Send(data);  
  16. var result = xmlhttp.status;  
  17. //OK  
  18. if(result==200) {  
  19. document.write(xmlhttp.responseText);  
  20. }  
  21. xmlhttp = null;  
  22. }  
  23.  
  24. //test function with post method  
  25. function RequestByPost(value)  
  26. {  
  27. var data;  
  28. data = '<?xml version="1.0" encoding="utf-8"?>';  
  29. datadatadata = data + '<soap:Envelope 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/">';  
  30. datadatadata = data + '<soap:Body>';  
  31. datadatadata = data + '<SayHelloTo xmlns="http://tempuri.org/">';  
  32. datadatadata = data + '<Name>'+value+'</Name>';  
  33. datadatadata = data + '</SayHelloTo>';  
  34. datadatadata = data + '</soap:Body>';  
  35. datadatadata = data + '</soap:Envelope>';  
  36.  
  37. var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
  38. var URL="http://localhost:1323/WebSite6/Service.asmx";  
  39. xmlhttp.Open("POST",URL, false);  
  40. xmlhttp.SetRequestHeader ("Content-Type","text/xml; charset=gb2312");  
  41. xmlhttp.SetRequestHeader ("SOAPAction","http://tempuri.org/SayHelloTo");  
  42. xmlhttp.Send(data);  
  43. document.write( xmlhttp.responseText);  
  44. }  
  45.  
  46.  
  47. // --></script>  
  48.  
  49. <input type="button" value="CallWebserviceByGet" onClick="RequestByGet(null)">  
  50. <input type="button" value="CallWebserviceByPost" onClick="RequestByPost('Zach')">  
  51. </body>  
  52. </html> 

对于使用post方法需要发送的那堆东东可以在webservice的测试页面中找到,自己拼凑加上对应的参数就可以。
通过style.behavior来实现的方法(比较简单)
function getfemale()
{
//第一个参数是webservice的url,后面是名称
female.useService("news.asmx?WSDL","news");
//设置一个回调函数,service返回结果的时候回调;第一个参数是回调函数的名称,后面的是webservice的参数
intCallID=female.news.callService(female_result,"getphoto","female"); //这里有两个参数.....
}
function female_result(result)//回调函数
{
if(result.error)
{
female.innerHTML=result.errorDetail.string;
}
else
{
female.innerHTML=result.value; //将webservice返回的结果写如div中
}
}
页面显示部分:
 

ok,这给我们在静态页调用动态的内容提供了一种途径;
这里如果给getfemale()函数加上定时调用的话,就是一种无刷新更新页面的机制了。
缺点是webservice会有一定的延迟,即使是本地的webservice也会比静态页面慢很多,初次打开页面会感觉很不协调。
第二种方法使用了style.代码就简洁多了他使用了css.定义了div的行为.比起第一种方法,就易读多了:)
style="behavior:url(webservice.htc)"
前提条件是:
if you are using Microsoft IE 5 or later, you can use the behavior/HTML-Component "WebService" to access a Web service. The "WebService" behavior communicates with Web services over HTTP using Simple Object Access Protocol (SOAP).

转载请注明:代码学堂>编程开发 > ASP.NET > Javascript调用Webservice的多种方法

喜欢 (144) or 分享 (61)