作者:Dflying Chen
(
http://dflying.cnblogs.com/
)
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)
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
return int1 + int2;
}
然后再ASPX页面上的ScriptManager中添加对该Web Service的引用:
<
atlas:ScriptManager
ID
="ScriptManager1"
runat
="server"
>
<
Services
>
<
atlas:ServiceReference
Path
="SimpleWebService.asmx"
/>
</
Services
>
</
atlas:ScriptManager
>
添加点HTML Code
,让用户输入两个整数:
Pass simple type to web service - add the two integers:
<
br
/>
<
input
id
="int1"
type
="text"
value
="1"
size
="3"
/>
+
<
input
id
="int2"
type
="text"
value
="2"
size
="3"
/>
=
<
input
id
="btnAddInt"
type
="button"
value
="?"
onclick
="return btnAddInt_onclick()"
/><
br
/>
<
br
/>
再书写一点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);
}
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function
onAddIntComplete(result)
{
$('btnAddInt').value = result;
}
上面的例子仅仅传递简单类型,然而在现实世界中,我们经常会需要传递一些复杂的类型,让我们看一个传递复杂类型的例子:
本例子同样是一个加法,不过这回操作的类型是复数。让我们先来看看C#中我们的复数的定义(作为示例,这里尽可能的简化)。注意我们应该提供自定义的复杂类型一个无参的构造函数,以便于Atlas自动在C#类型和JavaScript类型中转换:
public
class
ComplexNumber
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
private int real;
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
public int Real
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
get
{ return real; }
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
set
{ real = value; }
}
private int imag;
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
public int Imag
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
get
{ return imag; }
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
set
{ imag = value; }
}
public ComplexNumber(int real, int imag)
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
this.real = real;
this.imag = imag;
}
public ComplexNumber()
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}
}
然后是实现复数加法的Web Method,写在同一个Web Service中:
[WebMethod]
public
ComplexNumber AddComplexNumber(ComplexNumber num1, ComplexNumber num2)
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
return new ComplexNumber(num1.Real + num2.Real, num1.Imag + num2.Imag);
}
相应的ASPX
页面中也要添加一些HTML
,让用户输入两个复数:
Pass complex type to web service - add the two complex numbers:
<
br
/>
(
<
input
id
="cplx1r"
type
="text"
value
="1"
size
="3"
/>
+
<
input
id
="cplx1i"
type
="text"
value
="2"
size
="3"
/>
i) + (
<
input
id
="cplx2r"
type
="text"
value
="3"
size
="3"
/>
+
<
input
id
="cplx2i"
type
="text"
value
="4"
size
="3"
/>
i) =
<
input
id
="btnAddComplex"
type
="button"
value
="?"
onclick
="return btnAddComplex_onclick()"
/>
<
br
/>
然后是相应的JavaScript
,当用户点击上面的按钮时,执行这段JavaScript
以调用Web Method
。
function
btnAddComplex_onclick()
{
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var cplx1 =
{Real: $('cplx1r').value, Imag: $('cplx1i').value};
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var cplx2 =
{Real: $('cplx2r').value, Imag: $('cplx2i').value};
SimpleWebService.AddComplexNumber(cplx1, cplx2, onAddComplextNumberComplete);
}
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function
onAddComplextNumberComplete(result)
{
$('btnAddComplex').value = result.Real.toString() + ' + ' + result.Imag.toString() + 'i';
}
浏览器中运行一下,
初始化:
点击第一个问号,调用AddInt () Web Method计算1+2,得到3:
![simplews2.JPG](https://i-blog.csdnimg.cn/blog_migrate/3cacb443052340fcd698c03f93a9f014.jpeg)
点击第二个问号,调用AddComplexNumber () Web Method计算(1+2i) + (3+4i),得到4+6i:
![simplews3.JPG](https://i-blog.csdnimg.cn/blog_migrate/088688fcfe7159f26590fea315263b11.jpeg)
源代码可以在此下载:http://files.cnblogs.com/dflying/SimpleWebServiceDemo.zip
通过以上两个示例,您已经了解了如何与服务器端Web Service进行复杂通信。但实际开发中,往往还需要进行一些其它的处理,例如对服务器的错误信息的处理,对超时的处理,对用户取消操作的处理等等。Atlas同样提供了对以上需求的内建的支持。在后续文章中,我将全面介绍Atlas对Web Service的mash up中对上述复杂情况的处理。