基本 AJAX 服务

项目
05/10/2023

SimpleAjaxService 示例演示如何使用 Windows Communication Foundation (WCF) 创建基本的 ASP.NET 异步 JavaScript 和 XML (AJAX) 服务（通过从 Web 浏览器客户端使用 JavaScript 代码可以访问的服务）。该服务使用 WebGetAttribute 属性以确保服务响应 HTTP GET 请求并被配置为对响应使用 JavaScript 对象表示法 (JSON) 数据格式。

WCF 对 AJAX 的支持经过了优化，以便通过 ScriptManager 控件与 ASP.NET AJAX 一起使用。有关将 WCF 与 ASP.NET AJAX 一起使用的示例，请参阅 AJAX 示例。

注意

本主题的最后介绍了此示例的设置过程和生成说明。

在下面的代码中，将 WebGetAttribute 属性应用于 Add 操作以确保服务响应 HTTP GET 请求。为了简单起见，该代码使用 GET（你可以从任何 Web 浏览器构造 HTTP GET 请求）。也可以使用 GET 来启用缓存。在缺少 WebGetAttribute 属性时，HTTP POST 是默认属性。

[ServiceContract(Namespace = "SimpleAjaxService")]
public interface ICalculator
{
    [WebGet]
    double Add(double n1, double n2);
    //Other operations omitted…
}

示例 .svc 文件使用的是 WebScriptServiceHostFactory，后者会将 WebScriptEndpoint 标准终结点添加到服务。可在相对于 .svc 文件的空地址处配置该终结点。这意味着服务的地址是 http://localhost/ServiceModelSamples/service.svc，除了操作名称外，没有其他后缀。

<%@ServiceHost language="C#" Debug="true" Service="Microsoft.Samples.SimpleAjaxService.CalculatorService" Factory="System.ServiceModel.Activation.WebScriptServiceHostFactory" %>

将对 WebScriptEndpoint 进行预配置，以便能从 ASP.NET AJAX 客户端页访问服务。可以使用 Web.config 中的以下节对终结点进行其他配置更改。如果不需要额外更改，则可以移除该节。

<system.serviceModel>
  <standardEndpoints>
    <webScriptEndpoint>
      <!-- Use this element to configure the endpoint -->
      <standardEndpoint name=""  />
    </webScriptEndpoint>
  </standardEndpoints>
</system.serviceModel>

WebScriptEndpoint 将服务的默认数据格式设置为 JSON 而不是 XML。若要调用服务，请在完成此主题稍后显示的设置和生成步骤后，导航到 http://localhost/ServiceModelSamples/service.svc/Add?n1=100&n2=200。这个测试功能是通过使用 HTTP GET 请求实现的。

客户端 Web 页 SimpleAjaxClientPage.aspx 包含 ASP.NET 代码，无论何时用户单击该页面上的操作按钮之一，就能调用服务。 ScriptManager 控件用于使服务的代理可以通过 JavaScript 访问。

<asp:ScriptManager ID="ScriptManager" runat="server">
    <Services>
        <asp:ServiceReference Path="service.svc" />
    </Services>
</asp:ScriptManager>

使用以下 JavaScript 代码实例化本地代理和调用操作。

// Code for extracting arguments n1 and n2 omitted…
// Instantiate a service proxy
var proxy = new SimpleAjaxService.ICalculator();
// Code for selecting operation omitted…
proxy.Add(parseFloat(n1), parseFloat(n2), onSuccess, onFail, null);

如果服务调用成功，则代码调用 onSuccess 处理程序并在文本框中显示操作结果。

function onSuccess(mathResult){
     document.getElementById("result").value = mathResult;
}

通过

基本 AJAX 服务

其他资源