zoukankan      html  css  js  c++  java
  • javascript调用WebService Hello World

    WebService既可以大用,也可以小用。
    大用可以应用到整个系统,将整个系统设计成SOA(面向服务),小用可以应用到JS。
    今天我们就来看一下如何在网页中用JS来调用WebService。

    我们举的例子很简单,用 JS调用默认VS2008生成的Hello World服务。
    Service的代码如下:
    using System;
    using System.Collections;
    using System.ComponentModel;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.Services;
    using System.Web.Services.Protocols;
    using System.Xml.Linq;

    namespace BlogNet.WebService
    {
        [WebService(Namespace 
    = "http://www.cnblogs.com/davidgu/opservice")]
        [WebServiceBinding(ConformsTo 
    = WsiProfiles.BasicProfile1_1)]
        [ToolboxItem(
    false)]
        
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
        
    // [System.Web.Script.Services.ScriptService]
        public class OpService : System.Web.Services.WebService
        {

            [WebMethod]
            
    public string HelloWorld()
            {
                
    return "Hello World";
            }
        }
    }

    关键部分是JS的代码,首先,我们需要下载一个 webservice.htc,
    这个是IE中支持支持JS调用WebService的组件,我们可以在微软网站下载到。
    我们将这个文件放在我们网页的同一个目录。
    然后,在HTML中,使用CSS的 behavior特性来调用该组件,如下:
    <div id="service" style="behavior:url(webservice.htc)" ...>
    我们还需要把web service返回的结果放在div的onresult事件里,如下:
    <div id="service" style="behavior:url(webservice.htc)" onresult="onWebServiceResult()"></div>
     
    需要注意的是:
    url连接必须跟上?wsdl后缀,否则会报错。
    "
    http://localhost:1408/WebService/OpService.asmx?wsdl"


    完整代码如下:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testJsCustomer.aspx.cs" Inherits="BlogNet.WebService.testJsCustomer" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        
    <title>javascript调用WebService</title>
        
    <script type="text/javascript">
        
            
    var iCallID = null;
            
    var sUrl = "http://localhost:1408/WebService/OpService.asmx?wsdl";
            
            
    function getHelloWorld() {
                
    var oService = document.getElementById("service");
                
                oService.useService(sUrl, 
    "WS_OpService");
                iCallID 
    = service.WS_OpService.callService("HelloWorld"); 
            }
            
            
    /*
            function callback(res) {
                //var oResult = event.result;

                if (!res.error) {
                    alert("webservice success!");
                } else {
                    alert("webservice error!");
                }
            }
            
    */
            
            
    function onWebServiceResult() {
                
    var oResult = window.event.result;

                
    if (oResult.id == iCallID) {
                    
    var oDiv = document.getElementById("Result");

                    
    if (oResult.error) {
                        alert(
    "An error occurred: " + oResult.errorDetail.string);
                    } 
    else {
                        alert(
    "The result is: " + oResult.value);
                    }
                }
            }
        
    </script>
    </head>
    <body>
        
    <form id="form1" runat="server">
        
    <div>
        
        
    <div id="service" style="behavior:url(webservice.htc)" onresult="onWebServiceResult()"></div>
        
        
    <input type="button" id="btnLoad" name="btnLoad" value="load result" 
            onclick
    ="javascript:getHelloWorld();" />
        
        
    <div id="Result"></div>
        
        
    </div>
        
    </form>
    </body>
    </html>

    运行结果:
    alert框弹出 "Hello World"
  • 相关阅读:
    广义后缀自动机模板
    HDU 5852 Intersection is not allowed! ( 2016多校9、不相交路径的方案、LGV定理、行列式计算 )
    BZOJ 4017 小 Q 的无敌异或 ( 树状数组、区间异或和、区间异或和之和、按位计贡献思想 )
    WHU 583 Palindrome ( 回文自动机 && 本质不同的回文串的个数 )
    HDU 5527 Too Rich ( 15长春区域赛 A 、可贪心的凑硬币问题 )
    HDU 5863 cjj's string game ( 16年多校10 G 题、矩阵快速幂优化线性递推DP )
    HDU 5544 Ba Gua Zhen ( 2015 CCPC 南阳 C、DFS+时间戳搜独立回路、线性基 )
    HDU 5734 Acperience ( 数学公式推导、一元二次方程 )
    hihocoder 1251 Today is a rainy day ( 15年北京 C、暴力 )
    HDU 5113 Black And White ( 2014 北京区预赛 B 、搜索 + 剪枝 )
  • 原文地址:https://www.cnblogs.com/davidgu/p/1539406.html
Copyright © 2011-2022 走看看