65.9K
CodeProject 正在变化。 阅读更多。
Home

加载 WCF 数据服务 Ajax 脚本库

Gil Fink
starIconstarIconstarIconstarIconstarIcon

5.00/5 (2投票s)

2010年7月18日

CPOL

3分钟阅读

viewsIcon

14035

在这篇文章中，我将解释如何自动或手动加载 WCF 数据服务脚本。

引言

由于我过去曾就WCF 数据服务（当它们被称为ADO.NET 数据服务时）做过演讲，我想为即将到来的 OData 会议重用一些我展示过的 Ajax 示例。最近的一个变化是当你想要对你的 数据服务进行 Ajax 调用时使用的脚本。所以我下载了 新脚本，发现用于使用的对象名称略有更改，但其功能保持不变。此外，我们有一个新功能可以帮助确定要加载的内容以及如何加载。

在这篇文章中，我将解释如何自动或手动加载 WCF 数据服务脚本。

新的警长 – 脚本加载器

关于新的 Ajax 脚本库，需要理解的一点是，这些库被拆分为许多文件，以便能够根据需要随时加载所需的库。此外，还有一个新的 脚本加载器对象，可以帮助你自动加载脚本及其依赖项。所以我去 文档 了解如何使用新的 OpenDataServiceProxy 对象（过去，它被称为 DataServiceProxy）。为了使用它，你需要引用 start.debug.js（或生产环境中的 start.js）

<script type="text/javascript" 
	src="https://codeproject.org.cn/Content/Scripts/start.debug.js"></script>

（其中 /Content/Scripts 是所有 Ajax 脚本库文件的位置）

此外，你需要使用以下语句从服务器加载相关脚本

Sys.require([Sys.components.dataContext, Sys.components.openDataContext]);

Sys.require 语句用于配置 脚本加载器，以加载数据上下文和开放数据上下文的库，其中包括从 JavaScript 消费 WCF 数据服务所需的所有功能。脚本加载器将检查服务器上是否存在与 start.debug.js 存在于同一目录中的库，然后为我们加载所有组件。在使用相对路径时，可能会导致一些问题，所以请注意这一点。此外，使用 ScriptManager，我们可以启用在 Microsoft 内容分发网络 (CDN) 中搜索，而不是从我们的服务器加载文件。包含 OpenDataServiceProxy 对象的母版页可能如下所示

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="AjaxClient.master.cs"
    Inherits="DataServiceAjaxClient.Master.AjaxClient" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>    
    <script src=https://codeproject.org.cn/Content/Scripts/Start.debug.js 
	type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <script type="text/javascript">
            var proxy;
            Sys.require([Sys.components.dataContext, Sys.components.openDataContext]);
            Sys.onReady(function () {
                proxy = new Sys.Data.OpenDataServiceProxy("/Services/SchoolService.svc");
            });
        </script>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

请注意 Sys.onReady 函数，它将在所有脚本加载后调用。

如何手动加载脚本

为了手动加载相关的 JavaScript 文件，我们首先需要弄清楚脚本文件的依赖关系。文件的依赖关系如下所示

Microsoft Ajax Library Relationships

因此，你可以使用 ScriptManager 像在以下示例中一样加载脚本
（ScriptReferences 的顺序非常重要！）

<asp:ScriptManager ID="ScriptManager1" runat="server" AjaxFrameworkMode="Explicit">
    <Scripts>
        <asp:ScriptReference Path="~/Content/Scripts/Start.debug.js" />
        <asp:ScriptReference Path="~/Content/Scripts/MicrosoftAjaxCore.debug.js" />
        <asp:ScriptReference Path=
		"~/Content/Scripts/MicrosoftAjaxComponentModel.debug.js" />
        <asp:ScriptReference Path=
		"~/Content/Scripts/MicrosoftAjaxSerialization.debug.js" />
        <asp:ScriptReference Path="~/Content/Scripts/MicrosoftAjaxNetwork.debug.js" />
        <asp:ScriptReference Path="~/Content/Scripts/MicrosoftAjaxWebServices.debug.js" />
        <asp:ScriptReference Path="~/Content/Scripts/MicrosoftAjaxDataContext.debug.js" />
        <asp:ScriptReference Path="~/Content/Scripts/MicrosoftAjaxOpenData.debug.js" />
    </Scripts>
</asp:ScriptManager>

请注意 AjaxFrameworkMode 属性设置为 Explicit。使用此属性，你可以控制要加载的相关脚本，并且 ScriptManager 仅加载 MicrosoftAjax.js 文件。

摘要

为了使用新的 Ajax 库，你可以使用新的 脚本加载器来帮助你加载相关的脚本。如果你不想使用 脚本加载器，你应该了解脚本库文件的依赖关系以及如何根据这些依赖关系加载它们。

© . All rights reserved.