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>

NET-使用Js调用WebService

相关推荐