Atlas Framework中包含了对AJAX调用的封装,让您可以很方便的在客户端通过javascript调用服务器端方法。在本篇文章中,我将解释一下如何使用Atlas调用服务器端Web Service。
使用Atlas,我们只需要如下步骤即可调用服务器端Web Service:
在Web Service的方法上加上[WebMethod]属性。
在ASPX页面上的ScriptManager中添加对这个Web Service的引用。
只需以上两步,Atlas会在运行时为您生成相应的mash up,让您可在客户端javascript中通过WebServiceClassName.ServiceMethodName()调用该方法。
让我们先来看一个最简单的例子,调用服务器端Web Service得到两个数的和:
首先建立一个Web Service:SimpleWebService.asmx,并在其中添加一个Service Method,不要忘记标记为[WebMethod]哦:
文本查看复制到剪贴板打印?
[WebMethod]
public int AddInt(int int1, int int2)
{
return int1 + int2;
}
[WebMethod]
public int AddInt(int int1, int int2)
{
return int1 + int2;
}
然后再ASPX页面上的ScriptManager中添加对该Web Service的引用:
文本查看复制到剪贴板打印?
添加点HTML Code,让用户输入两个整数
Pass simple type to web service - add the two integers:
+
=
再书写一点javascript,当用户点击上面的按钮时,调用Web Method。这里要注意的是javascript中调用Web Method的格式:前面两个参数int1,int2分别对应着Web Service声明中的两个参数,后面一个参数onAddIntComplete表示方法成功返回时的Callback方法,也就是所谓AJAX中的A。同时需要注意的是$()方法,等同于document.getElementById()。
function btnAddInt_onclick() {
var int1 = $('int1').value;
var int2 = $('int2').value;
SimpleWebService.AddInt(int1, int2, onAddIntComplete);
}
function onAddIntComplete(result) {
$('btnAddInt').value = result;
}
上面的例子仅仅传递简单类型,然而在现实世界中,我们经常会需要传递一些复杂的类型,让我们看一个传递复杂类型的例子:
本例子同样是一个加法,不过这回操作的类型是复数。让我们先来看看C#中我们的复数的定义(作为示例,这里尽可能的简化)。注意我们应该提供自定义的复杂类型一个无参的构造函数,以便于Atlas自动在C#类型和javascript类型中转换:
文本查看复制到剪贴板打印?
public class ComplexNumber
{
private int real;
public int Real
{
get { return real; }
set { real = value; }
}
private int imag;
public int Imag
{
get { return imag; }
set { imag = value; }
}
public ComplexNumber(int real, int imag)
{
this.real = real;
this.imag = imag;
}
public ComplexNumber()
{
}
}
public class ComplexNumber
{
private int real;
public int Real
{
get { return real; }
set { real = value; }
}
private int imag;
public int Imag
{
get { return imag; }
set { imag = value; }
}
public ComplexNumber(int real, int imag)
{
this.real = real;
this.imag = imag;
}
public ComplexNumber()
{
}
}
然后是实现复数加法的Web Method,写在同一个Web Service中:
文本查看复制到剪贴板打印?
[WebMethod]
public ComplexNumber AddComplexNumber(ComplexNumber num1, ComplexNumber num2)
{
return new ComplexNumber(num1.Real + num2.Real, num1.Imag + num2.Imag);
}
[WebMethod]
public ComplexNumber AddComplexNumber(ComplexNumber num1, ComplexNumber num2)
{
return new ComplexNumber(num1.Real + num2.Real, num1.Imag + num2.Imag);
}
相应的ASPX页面中也要添加一些HTML,让用户输入两个复数:
Pass complex type to web service - add the two complex numbers:
(+
i) + (
+
i) =
然后是相应的javascript,当用户点击上面的按钮时,执行这段javascript以调用Web Method。
function btnAddComplex_onclick() {
var cplx1 = {Real: $('cplx1r').value, Imag: $('cplx1i').value};
var cplx2 = {Real: $('cplx2r').value, Imag: $('cplx2i').value};
SimpleWebService.AddComplexNumber(cplx1, cplx2, onAddComplextNumberComplete);
}
function onAddComplextNumberComplete(result) {
$('btnAddComplex').value = result.Real.toString() + ' + ' + result.Imag.toString() + 'i';
}
浏览器中运行一下,初始化:
本文作者:周语菲 来源:http://tmsoft.lsxy.com/index.php?load=read&id=292
CIO之家 www.ciozj.com 微信公众号:imciow