ASP.NET AJAX调用Web Service
2007-07-02 13:04
447 查看
原文发布日期：2007.02.08
作者：Bipin Joshi
翻译：webabcd
介绍
尽管AJAX是种客户端技术，但实际上的开发过程，它经常要调用一个服务器端的过程。通常，网站上的数据是存放在一个关系型数据库中，为了让AJAX更有用处，处理服务器端数据需要一种简单可靠的方法。幸运的是，ASP.NET AJAX提供了一种有效的基础架构来做这件事情，浏览器和服务器在Internet上可以进行AJAX通信。自然而然，Web Service在数据传输和客户端/服务器之间的一般通信方面可以扮演一个重要角色。本文就演示了如果通过ASP.NET AJAX调用ASP.NET web services。
软件需求
本文所有的范例都是使用ASP.NET AJAX RC版，而且，要在SQL Server 2005 (Express版即可)上有一个Northwind数据库。范例使用Visual Studio 2005作为开发环境。
范例场景
范例开发了一个Web页面，用于输入Northwind数据库职员表中的职员数据。页面通过ASP.NET AJAX功能，调用一个Web Service来完成职员表中的数据增、删、改、查。
创建一个Web Service
作为开始，使用Visual Studio 2005创建一个新的Web站点，注意把ASP.NET AJAX项目模板添加到新站点对话框，这个对话框包括一个"ASP.NET AJAX Enabled Web Site" 模板。
public class Employee
<connectionStrings>
<add name="connstr" connectionString=
"data source=.\sqlexpress;
initial catalog=northwind;
integrated security=true"/>
</connectionStrings>
这部分存放数据库链接字符串，用于指向Northwind数据库，确保修改SqlServer名称、IP地址以及验证方式以和我们的开发环境相符。
现在，打开EmployeeService.cs添加如下代码：
private string strConn = "";
public EmployeeService()
[WebMethod]
public Employee[] GetEmployees()
[WebMethod]
public Employee GetEmployee(int pEmployeeId)
[WebMethod]
public int Insert(string pFirstName, string pLastName)
[WebMethod]
public int Update(int pEmployeeId,string pFirstName, string pLastName)
[WebMethod]
public int Delete(int pEmployeeId)
using System.Web.Script.Services;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class EmployeeService : System.Web.Services.WebService
<asp:ScriptManager ID="ScriptManager1" runat="server" >
<Services>
<asp:ServiceReference Path="EmployeeService.asmx" />
</Services>
</asp:ScriptManager>
对每个Web Service调用，都需要在<asp:ScriptManager>部分添加一个<asp:ServiceReference>元素，此标记把要使用的web service注册到当前web form上。
<table>
<tr>
<td colspan="2">
<asp:Label ID="Label4" runat="server" Font-Size="X-Large"
Text="Employee Management">
</asp:Label></td>
</tr>
<tr>
<td style="width: 100px">
<asp:Label ID="Label1" runat="server"
Text="Employee ID :"></asp:Label></td>
<td style="width: 100px">
<select id="Select1" >
</select>
</td>
</tr>
<tr>
<td style="width: 100px">
<asp:Label ID="Label2" runat="server"
Text="First Name :"></asp:Label></td>
<td style="width: 100px">
<input id="Text1" type="text" /></td>
</tr>
<tr>
<td style="width: 100px">
<asp:Label ID="Label3" runat="server"
Text="Last Name :"></asp:Label></td>
<td style="width: 100px">
<input id="Text2" type="text" /></td>
</tr>
<tr>
<td align="center" colspan="2">
<input id="Button3" type="button" value="Insert" />
<input id="Button4" type="button" value="Update" />
<input id="Button5" type="button" value="Delete" />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<span id="lblMsg" style="font-weight: bold;
color: red;"></span>
</td>
</tr>
</table>
注意：我们没有使用ASP.NET服务器端控件，如DropDownList、 TextBox 以及 Button。取而代之的是，我们用的传统的HTML控件，如：<SELECT> 以及 <INPUT>。这因为我们要想通过客户端JavaScript调用web service，而不是通过服务端代码。同理，注意底下的<SPAN>标记，这是用来显示成功或者失败的信息的。
下一步，在<head>元素内增加一个<script>部分，添加一个CallWebMethod()的函数：
function CallWebMethod(methodType)
function FillEmployeeList(result)
function DisplayEmployeeDetails(result)
function InsertEmployee(result)
function UpdateEmployee(result)
function DeleteEmployee(result)
function pageLoad()
pageLoad()函数在客户端浏览器页面加载时自动调用，最后，错误处理（error handler）和超时处理（timeout handler）函数如下：
function ErrorHandler(result)
function TimeOutHandler(result)
alert("Timeout :" + result);
}
TimeOutHandler() 函数在任何web method 调用发生超时的情况下调用。它仅仅显示了一个Alert给用户。 ErrorHandler() 函数在有错误发生的情况下调用，其输入result 参数提供了3个方法：get_exceptionType()、get_message()以及 get_stackTrace()。这三个方法分别返回异常类型（type of exception）、详细错误信息 和堆栈跟踪（stack trace）。这里ErrorHandler()函数也仅仅显示了一个alert给终端用户。
测试网页
现在，我们已经实现了web service和客户端应用程序。测试一下吧！运行网页，试着增加、更新、删除一个employee看看，图5显示更新一个employee后的效果：
图 5: 更新Employee后的页面效果
要想测试错误处理函数，把初始化数据库链接字符串改成一个空值，然后运行网页看看，这次，就会显示一个警报（alert），如图6：
图 6: 链接字符串错误报警
调用外部Web Services
这个例子中，EmployeeService也是Web站点的一部分。有时候，我们的程序也许需要调用根本就没有部署在我们的域的web services。 ASP.NET AJAX内部需要依赖XML HTTP 对象，而由于安全原因，是不能和部署在其它外部站点进行通信的。这就意味着上面所说的技术对外部的web services调用无效。不幸的是，ASP.NET AJAX关于此问题还没有直接的解决方案（至少在RC版本）。然而，微软发布了一个仍在CTP阶段的“Bridge”技术，我们可以使用此技术来调用一个部署在本地的封装（Wrapper）的类，然后在这个类中来调用外部的实际的Web Service。在当前的RC版本中，我们可以在我们的Web Site中创建一个Wrapper Web Service，以它来调用最初的Web Service。然后在客户端程序中通过调用Wrapper Web Service实现通信。下面显示必要的步骤：
1. 在web站点中添加一个web引用，指向外部的Web service；
2. 创建一个本地Web service；
3. 在新创建的Web service中，提供封装的web method，这些方法调用外部的Web Method；
4. 用本文中所说的方法在客户端应用程序中调用本地新添加的web Service。
调用ASP.NET Web Services的基础架构
ASP.NET AJAX提供了完整的架构以从客户端JavaScript调用ASP.NET web services。我们可以轻松地用AJAX把服务器端数据集成进用户响应的Web页面中。而我们所需要做的就是仅仅用[ScriptService]属性来标识web Service。ASP.NET AJAX 框架会为我们的web service自动生成JavaScript代理，然后通过使用代理来调用web methods。
下载源码
[原文源码下载]
作者：Bipin Joshi
Email：http://www.dotnetbips.com/contact.aspx
简介：Bipin Joshi是DotNetBips.com的管理员。他是http://www.binaryintellect.com/的发起人，这个公司提供.NET framwork的培训和咨询服务。他在印度孟买为开发者提供培训。他也是微软的MVP(ASP.Net)和ASPInsiders的会员。
译者注：原文中的document.getElementById可以用$get来代替
作者：Bipin Joshi
翻译：webabcd
介绍
尽管AJAX是种客户端技术，但实际上的开发过程，它经常要调用一个服务器端的过程。通常，网站上的数据是存放在一个关系型数据库中，为了让AJAX更有用处，处理服务器端数据需要一种简单可靠的方法。幸运的是，ASP.NET AJAX提供了一种有效的基础架构来做这件事情，浏览器和服务器在Internet上可以进行AJAX通信。自然而然，Web Service在数据传输和客户端/服务器之间的一般通信方面可以扮演一个重要角色。本文就演示了如果通过ASP.NET AJAX调用ASP.NET web services。
软件需求
本文所有的范例都是使用ASP.NET AJAX RC版，而且，要在SQL Server 2005 (Express版即可)上有一个Northwind数据库。范例使用Visual Studio 2005作为开发环境。
范例场景
范例开发了一个Web页面，用于输入Northwind数据库职员表中的职员数据。页面通过ASP.NET AJAX功能，调用一个Web Service来完成职员表中的数据增、删、改、查。
创建一个Web Service
作为开始，使用Visual Studio 2005创建一个新的Web站点，注意把ASP.NET AJAX项目模板添加到新站点对话框，这个对话框包括一个"ASP.NET AJAX Enabled Web Site" 模板。
public class Employee
<connectionStrings>
<add name="connstr" connectionString=
"data source=.\sqlexpress;
initial catalog=northwind;
integrated security=true"/>
</connectionStrings>
这部分存放数据库链接字符串，用于指向Northwind数据库，确保修改SqlServer名称、IP地址以及验证方式以和我们的开发环境相符。
现在，打开EmployeeService.cs添加如下代码：
private string strConn = "";
public EmployeeService()
[WebMethod]
public Employee[] GetEmployees()
[WebMethod]
public Employee GetEmployee(int pEmployeeId)
[WebMethod]
public int Insert(string pFirstName, string pLastName)
[WebMethod]
public int Update(int pEmployeeId,string pFirstName, string pLastName)
[WebMethod]
public int Delete(int pEmployeeId)
using System.Web.Script.Services;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class EmployeeService : System.Web.Services.WebService
<asp:ScriptManager ID="ScriptManager1" runat="server" >
<Services>
<asp:ServiceReference Path="EmployeeService.asmx" />
</Services>
</asp:ScriptManager>
对每个Web Service调用，都需要在<asp:ScriptManager>部分添加一个<asp:ServiceReference>元素，此标记把要使用的web service注册到当前web form上。
<table>
<tr>
<td colspan="2">
<asp:Label ID="Label4" runat="server" Font-Size="X-Large"
Text="Employee Management">
</asp:Label></td>
</tr>
<tr>
<td style="width: 100px">
<asp:Label ID="Label1" runat="server"
Text="Employee ID :"></asp:Label></td>
<td style="width: 100px">
<select id="Select1" >
</select>
</td>
</tr>
<tr>
<td style="width: 100px">
<asp:Label ID="Label2" runat="server"
Text="First Name :"></asp:Label></td>
<td style="width: 100px">
<input id="Text1" type="text" /></td>
</tr>
<tr>
<td style="width: 100px">
<asp:Label ID="Label3" runat="server"
Text="Last Name :"></asp:Label></td>
<td style="width: 100px">
<input id="Text2" type="text" /></td>
</tr>
<tr>
<td align="center" colspan="2">
<input id="Button3" type="button" value="Insert" />
<input id="Button4" type="button" value="Update" />
<input id="Button5" type="button" value="Delete" />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<span id="lblMsg" style="font-weight: bold;
color: red;"></span>
</td>
</tr>
</table>
注意：我们没有使用ASP.NET服务器端控件，如DropDownList、 TextBox 以及 Button。取而代之的是，我们用的传统的HTML控件，如：<SELECT> 以及 <INPUT>。这因为我们要想通过客户端JavaScript调用web service，而不是通过服务端代码。同理，注意底下的<SPAN>标记，这是用来显示成功或者失败的信息的。
下一步，在<head>元素内增加一个<script>部分，添加一个CallWebMethod()的函数：
function CallWebMethod(methodType)
function FillEmployeeList(result)
function DisplayEmployeeDetails(result)
function InsertEmployee(result)
function UpdateEmployee(result)
function DeleteEmployee(result)
function pageLoad()
pageLoad()函数在客户端浏览器页面加载时自动调用，最后，错误处理（error handler）和超时处理（timeout handler）函数如下：
function ErrorHandler(result)
function TimeOutHandler(result)
alert("Timeout :" + result);
}
TimeOutHandler() 函数在任何web method 调用发生超时的情况下调用。它仅仅显示了一个Alert给用户。 ErrorHandler() 函数在有错误发生的情况下调用，其输入result 参数提供了3个方法：get_exceptionType()、get_message()以及 get_stackTrace()。这三个方法分别返回异常类型（type of exception）、详细错误信息 和堆栈跟踪（stack trace）。这里ErrorHandler()函数也仅仅显示了一个alert给终端用户。
测试网页
现在，我们已经实现了web service和客户端应用程序。测试一下吧！运行网页，试着增加、更新、删除一个employee看看，图5显示更新一个employee后的效果：
图 5: 更新Employee后的页面效果
要想测试错误处理函数，把初始化数据库链接字符串改成一个空值，然后运行网页看看，这次，就会显示一个警报（alert），如图6：
图 6: 链接字符串错误报警
调用外部Web Services
这个例子中，EmployeeService也是Web站点的一部分。有时候，我们的程序也许需要调用根本就没有部署在我们的域的web services。 ASP.NET AJAX内部需要依赖XML HTTP 对象，而由于安全原因，是不能和部署在其它外部站点进行通信的。这就意味着上面所说的技术对外部的web services调用无效。不幸的是，ASP.NET AJAX关于此问题还没有直接的解决方案（至少在RC版本）。然而，微软发布了一个仍在CTP阶段的“Bridge”技术，我们可以使用此技术来调用一个部署在本地的封装（Wrapper）的类，然后在这个类中来调用外部的实际的Web Service。在当前的RC版本中，我们可以在我们的Web Site中创建一个Wrapper Web Service，以它来调用最初的Web Service。然后在客户端程序中通过调用Wrapper Web Service实现通信。下面显示必要的步骤：
1. 在web站点中添加一个web引用，指向外部的Web service；
2. 创建一个本地Web service；
3. 在新创建的Web service中，提供封装的web method，这些方法调用外部的Web Method；
4. 用本文中所说的方法在客户端应用程序中调用本地新添加的web Service。
调用ASP.NET Web Services的基础架构
ASP.NET AJAX提供了完整的架构以从客户端JavaScript调用ASP.NET web services。我们可以轻松地用AJAX把服务器端数据集成进用户响应的Web页面中。而我们所需要做的就是仅仅用[ScriptService]属性来标识web Service。ASP.NET AJAX 框架会为我们的web service自动生成JavaScript代理，然后通过使用代理来调用web methods。
下载源码
[原文源码下载]
作者：Bipin Joshi
Email：http://www.dotnetbips.com/contact.aspx
简介：Bipin Joshi是DotNetBips.com的管理员。他是http://www.binaryintellect.com/的发起人，这个公司提供.NET framwork的培训和咨询服务。他在印度孟买为开发者提供培训。他也是微软的MVP(ASP.Net)和ASPInsiders的会员。
译者注：原文中的document.getElementById可以用$get来代替
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（6）：服务器端和客户端数据类型的自动转换：复杂类型
- ASP.NET AJAX调用Web Service
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（1）：调用Web Service、调用页面中的类方法(转)
- asp.net ajax程序设计之笔记1-- Hello World调用web service
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（2）：处理异步调用中的异常
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（7）：服务器端和客户端数据类型的自动转换：泛型集合类型
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法
- Asp.net 2.0 Ajax调用Web Service
- [翻译]ASP.NET AJAX调用Web Service(超级好)
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（4）：异步通讯层生成的客户端代理类、使用HTTP GET进行调用
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（6）：服务器端和客户端数据类型的自动转换：复杂类型
- [翻译]ASP.NET AJAX调用Web Service
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（8）：服务器端和客户端数据类型的自动转换：数组类型
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（5）：服务器端和客户端数据类型的自动转换：基本类型和枚举类型
- [翻译]ASP.NET AJAX调用Web Service
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（1）：调用Web Service、调用页面中的类方法
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（7）：服务器端和客户端数据类型的自动转换：泛型集合类型
- ASP.NET AJAX1.0：Web Service调用
- ASP.NET AJAX1.0尝鲜试用：Web Service调用
- ASP.NET AJAX1.0尝鲜试用：Web Service调用