使用 Ajax 消耗 Web 服务的 4 个步骤（含视频教程）

Shivprasad koirala

4.81/5 (25投票s)

2010年2月20日

CPOL

3分钟阅读

72183

899

使用 Ajax 消耗 Web 服务的 4 个步骤（含视频教程）

下载源代码 - 8.29 KB

引言和目标

在本文中，我们将尝试理解使用 Ajax 直接消费 Web 服务的 4 个重要步骤。在本示例中，我们将创建一个简单的客户下拉框，如图所示。该客户下拉框将通过直接调用客户 Web 服务的 Web 服务方法来填充。

这是我为所有 .NET 朋友们准备的小礼物，一本完整的 400 页常见问题解答电子书，涵盖了各种 .NET 技术，如 Azure、WCF、WWF、Silverlight、WPF、SharePoint 等等。

视频教程

本文的全部内容也以视频形式演示，您可以从这里观看。

引言

通常，Web 服务的消费方式如下所示。浏览器 Ajax 控制器调用 ASP.NET 代码，ASP.NET 代码消费 Web 服务。但是，在某些情况下，您希望直接从 Ajax JavaScript 函数调用 Web 服务，而不是通过后台代码调用。本文将演示如何实现这一点。

步骤 1：创建您的客户类

第一步是创建如下所示的 customer 类。因此，我们的 customer 类具有 4 个属性：客户 ID、名字、地址和职称。

public class Customers
{
// private properties 
private int _intCustomerID;
private string _strFirstName;
private string _strAddress;
private string _strDesignation;

// Public property and 
public int CustomerID
{
get
{
return _intCustomerID;
}
set
{
_intCustomerID = value;
}
}

public string FirstName
{
get
{
return _strFirstName;
}
set
{
_strFirstName = value;
}
}

步骤 2：创建您的 Web 服务

下一步是我们需要创建 Web 服务，该 Web 服务将客户类暴露给我们的 UI。下面是一个简单的 Web 服务，它封装了客户集合。在构造函数中，我们正在将一些虚拟数据加载到客户列表中，如以下代码片段所示

[System.Web.Script.Services.ScriptService]
public class Customer : System.Web.Services.WebService {

// Customer collection
List<Customers> listcust = new List<Customers>();
public Customer () 
{
//Load some dummy data in to customer collection.
listcust.Clear();
Customers cust = new Customers();
cust.CustomerID = 1;
cust.FirstName = "Taha";
cust.Address = "Live in India";
cust.Designation = "Software Developer";
listcust.Add(cust);

cust = new Customers();
cust.CustomerID = 2;
cust.FirstName = "Shyam";
cust.Address = "Live in Austrailia";
cust.Designation = "Web Designer";
listcust.Add(cust);

cust = new Customers();
cust.CustomerID = 3;
cust.FirstName = "Khadak";
cust.Address = "Live in London";
cust.Designation = "Architect";
listcust.Add(cust);
}

// This function exposes all customers to the end client’
[WebMethod]
public List<Customers> LoadCustomers()
{
return listcust;
}

// This function helps us to get customer object based in ID

[WebMethod]
public Customers LoadSingleCustomers(int _customerid)
{
return (Customers)listcust[_customerid-1];
}

我们还通过 Web 服务暴露了两个函数，一个返回客户列表，另一个根据客户 ID 返回单个客户数据。

步骤 3：使用 asp:servicereference 引用您的 Web 服务

使用 ‘asp:ServiceReference’，我们将指向 ASMX 文件路径，如以下代码片段所示。这将生成 JavaScript 代理，可用于调用客户对象。

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="Customer.asmx" />
</Services>
</asp:ScriptManager>

步骤 4：调用 Web 服务和 JavaScript 代码

定义代理后，现在可以直接调用 ‘Customer’ 代理来执行方法调用。

function LoadAll() 
{
Customer.LoadCustomers(LoadCustomerToSelectOption, ErrorHandler, TimeOutHandler);
}

当调用 JavaScript 代理对象时，我们需要提供三个函数；第一个函数（‘LoadCustomerToSelectOption’）将在 Web 服务完成并返回数据时调用。数据将返回在 fill 变量中，然后循环并添加到客户下拉框中。

function LoadCustomerToSelectOption(Fill)
{
var select = document.getElementById("cmbCustomers");

for (var i = 0; i < Fill.length; i++) 
{
var value = new Option(Fill[i].FirstName, Fill[i].CustomerID);
select.options.add(value);
}
}

还附加了另外两个函数；一个处理错误，另一个处理超时。以下是相同代码片段

function ErrorHandler(result) 
{
var msg = result.get_exceptionType() + "\r\n";
msg += result.get_message() + "\r\n";
msg += result.get_stackTrace();
alert(msg);
}
function TimeOutHandler(result) 
{
alert("Timeout :" + result);
}

历史

2010年2月20日：初始发布