NET-使用Js调用WebService

 

注：JsWebServiceObject 此类是我做测试示例时为了测试js是否能调用webService中的复合类型而单独新建的一个类

　　此类中只有名字与年龄的属性。

最近身边的一个朋友做项目，其中有一个模块需求要求使用js去调用webService，让我帮着想想招，因为以前却实没有这么做过。经过大约一个小时的测试，成功了。发现这个东东写出来之后是这么简单。当初是我想复杂了。分享一下测试时写的代码，希望对大家有所帮助。

WebService文件内容

 

代码 
using System;
using System.Web;
using System.Collections;
using System.Collections.Generic;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.UI.MobileControls;


/// <summary>
/// JsWebService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class JsWebService : System.Web.Services.WebService
{

    public JsWebService()
    {

        //如果使用设计的组件，请取消注释以下行 
        //InitializeComponent(); 
    }

    [WebMethod]
    public string GetString()
    {
        return "GetString";
    }

    [WebMethod]
    public string GetString(string name)
    {
        return string.Format("{0}欢迎您的到来!", name);
    }

    [WebMethod]
    public List<string> GetList()
    {
        List<string> listStr = new List<string>();
        for (int i = 0; i < 10; i++)
        {
            listStr.Add("test" + i);
        }
        return listStr;
    }
    
    [WebMethod]
    public List<JsWebServiceObject> GetObjectList()
    {
        List<JsWebServiceObject> objs = new List<JsWebServiceObject>();
        for (int i = 0; i < 10; i++)
        {
            JsWebServiceObject obj = new JsWebServiceObject("name" + i, i + 20);
            objs.Add(obj);
        }
        return objs;
    }

}

 

调用WebService的aspx页面代码

代码 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Js调用WebService</title>
    <script type="text/javascript">
        function GetString()
        {
            JsWebService.GetString(GetStringCallBack);  //在WebService中调用方法，并设置回调函数
        }
        function GetStringCallBack(result)  
        {
            alert(result);
        }
        
        function GetStringParam(name)
        {
            JsWebService.GetString(name,GetStringParamCallBack);  //在WebService中调用方法，并设置回调函数，如果此方法中带有参数则在回调函数前加入此参数。
        }
        function GetStringParamCallBack(result)
        {
            alert(result);
        }
        
        function GetList()
        {
            JsWebService.GetList(GetListCallBack);
        }
        function GetListCallBack(result)
        {
            if(result.length!=0)
            {
                for(var i=0;i<result.length;i++)
                {
                    document.getElementById("contentDivGetList").innerHTML += result[i] + "<br/>";
                }
            }
        }
        
        function GetObjectList()
        {
            JsWebService.GetObjectList(GetObjectListCallBack);
        }
        function GetObjectListCallBack(result)
        {
            if(result.length!=0)
            {
                for(var i=0;i<result.length;i++)
                {
                    document.getElementById("contentDivGetObjectList").innerHTML += "姓名:" + result[i].Name + "  年龄:" + result[i].Age + "<br/>";
                }
            }
        }
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    
        <asp:ScriptManager ID="smJs" runat="server" >
            <Services>
                <asp:ServiceReference Path="WebService/JsWebService.asmx" />
            </Services>
        </asp:ScriptManager>
        
        <div>
        
            <input type="button" name="btnJsWebService" value="GetString" onclick="GetString()" />
            <input type="button" name="butJsWebService" value="GetList" onclick="GetList()" />
            <input type="button" name="butJsWebService" value="GetObjectList" onclick="GetObjectList()" />
            <input type="button" name="butJsWebService" value="GetStringParam" onclick="GetStringParam('js调用WebService')" />
            
            <div id="contentDivGetList"></div>
            <div id="contentDivGetObjectList"></div>
            
        </div>
    </form>
</body>
</html>

 

 示例下载地址：/Files/homezzm/Js调用WebService.rar 

 

posted @ 2010-01-27 09:47  Sandglass  阅读(7284)  评论(16)  编辑  收藏  举报