wcf text/html text/xml,具有 JSON 和 XML 的 AJAX 服务示例

具有 JSON 和 XML 的 AJAX 服务示例

03/30/2017

本文内容

此示例演示如何使用 Windows Communication Foundation (WCF) 来创建返回) JavaScript 对象表示法 JSON (或 XML 数据的异步 JavaScript 和 XML (AJAX) 服务。 可以从 Web 浏览器客户端使用 JavaScript 代码来访问 AJAX 服务。 此示例以 基本 AJAX 服务 示例为基础。

与其他 AJAX 示例不同的是，此示例不使用 ASP.NET AJAX 和 ScriptManager 控件。 利用一些附加配置，可以通过 JavaScript 从任何 HTML 页面访问 WCF AJAX 服务，此处显示了这种情况。 有关将 WCF 与 ASP.NET AJAX 一起使用的示例，请参阅 Ajax 示例。

此示例演示如何在 JSON 和 XML 之间切换操作的响应类型。 无论服务是配置为由 ASP.NET AJAX 访问还是由 HTML/JavaScript 客户端页面访问，此功能均可用。

备注

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

为了启用非 ASP.NET AJAX 客户端，请在 .svc 文件中使用 WebServiceHostFactory(而不是 WebScriptServiceHostFactory)。 WebServiceHostFactory 将 WebHttpEndpoint 标准终结点添加到服务中。 在相对于 .svc 文件的空地址处配置终结点;这意味着服务的地址是 http://localhost/ServiceModelSamples/service.svc ，除操作名称外没有其他后缀。

可以使用 Web.config 中的以下节对终结点进行其他配置更改。 如果不需要额外更改，则可以移除该节。

以下示例中的服务是一个包含两个操作的标准 WCF 服务。 这两个操作都需要针对 Wrapped 或 WebGetAttribute 属性使用 WebInvokeAttribute 正文样式，该样式特定于 webHttp 行为，对于 JSON/XML 数据格式开关没有任何影响。

[OperationContract]

[WebInvoke(ResponseFormat = WebMessageFormat.Xml, BodyStyle = WebMessageBodyStyle.Wrapped)]

MathResult DoMathXml(double n1, double n2);

操作的响应格式指定为 XML，这是行为的默认设置 。 但是，最好显式指定响应格式。

另一个操作使用 WebInvokeAttribute 属性并显式指定响应的 JSON(而不是 XML)。

[OperationContract]

[WebInvoke(ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped)]

MathResult DoMathJson(double n1, double n2);

请注意，在这两种情况下，操作都返回复杂类型，即 MathResult 标准 WCF 数据协定类型。

XmlAjaxClientPage.htm 的客户端网页包含 JavaScript 代码，该代码在用户单击 " 执行计算" (返回 JSON) 或 执行计算 (在页面上返回 XML) 按钮时调用上述两个操作之一。 用来调用服务的代码将构造 JSON 正文并使用 HTTP POST 发送它。 该请求是在 JavaScript 中手动创建的，不同于 基本 AJAX 服务 示例和其他使用 ASP.NET ajax 的示例。

// Create HTTP request

var xmlHttp;

// Request instantiation code omitted…

// Result handler code omitted…

// Build the operation URL

var url = "service.svc/ajaxEndpoint/";

url = url + operation;

// Build the body of the JSON message

var body = '{"n1":';

body = body + document.getElementById("num1").value + ',"n2":';

body = body + document.getElementById("num2").value + '}';

// Send the HTTP request

xmlHttp.open("POST", url, true);

xmlHttp.setRequestHeader("Content-type", "application/json");

xmlHttp.send(body);

当服务进行响应时，响应将显示出来，而不会在页面上的文本框中进一步执行任何处理。 这是为了进行演示而实现的，您可以直接遵循所使用的 XML 和 JSON 数据格式。

// Create result handler

xmlHttp.onreadystatechange=function(){

if(xmlHttp.readyState == 4){

document.getElementById("result").value = xmlHttp.responseText;

}

}

重要

您的计算机上可能已安装这些示例。 在继续操作之前，请先检查以下(默认)目录：

:\WF_WCF_Samples

如果此目录不存在，请参阅Windows Communication Foundation (wcf) ，并 Windows Workflow Foundation (的 WF) .NET Framework Windows Communication Foundation (WF 此示例位于以下目录：

:\WF_WCF_Samples\WCF\Basic\AJAX\XmlAjaxService

设置、生成和运行示例

定位到 http://localhost/ServiceModelSamples/XmlAjaxClientPage.htm (不要在浏览器中从项目目录) 打开 XmlAjaxClientPage.htm。

请参阅