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

在 ASP.NET 2.0 中使用 jQuery 客户端创建一个 JSON WebService

Ajay Singh
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.88/5 (32投票s)

2009年11月28日

CPOL

6分钟阅读

viewsIcon

347694

downloadIcon

13470

创建一个 ASP.NET Web Service，它以 JSON 格式返回数据，并从 jQuery 客户端调用它。

引言

我们知道，默认情况下，ASP.NET Web Service 以 XML 格式返回数据。通过线路处理 XML 数据总是会带来一些开销。如今，另一种称为 JSON 的格式在克服其中一些问题方面非常流行。在 .NET 3.5 及更高版本中，Microsoft 在 ASP.NET 3.5 中内置了此功能，但仍有许多应用程序仍在运行 ASP.NET 2.0。在本文中，我将展示如何轻松地从 Web Service 返回 JSON 格式的数据，并从 jQuery（一个非常流行、轻量级的 JavaScript 库）中消耗它。

背景

不久前，我曾在一个涉及大量 Web Service 调用的项目上工作。处理 XML 数据比我计划的要花费更多时间，因此我决定以 JSON 格式返回数据，JSON 非常轻量级，并且可以由客户端的 JavaScript 轻松处理。例如，我们有一个名为“Employee”的类，它包含五个字段：“Name”、“Company”、“Address”、“Phone”和“Country”。当您以默认格式（XML）从 Web Service 返回数据时，您将获得类似以下内容：

JSONDemo

当您以 JSON 格式返回数据时，您将获得类似以下内容：

JSONDemo

如果您比较这两个值，您会发现 JSON 只返回一个字符串值，而没有 XML 节点处理的开销。您需要做的就是处理字符串，该字符串采用 Name:Value 对的形式。在我继续之前，我想对 JSON（JavaScript Object Notation）进行一些说明。它是一种轻量级的数据交换格式。它是一种文本格式，使其完全独立于语言。JSON 构建于两种数据结构之上：

  • 一组名称/值对。这通常称为 Dictionary、Hashtable 等。
  • 有序的值列表。这通常称为 array、list、sequence 等。

您可以从 json.org 阅读更多关于 JSON 的信息。

要求

您还可以使用 Microsoft Web Platform Installer 2.0 从一个地方安装所有必需的软件来开发基于 Web 的应用程序。这还包括 IIS。

现在，让我们讨论如何实现解决方案。

安装 ASP.NET AJAX 扩展 1.0。默认安装目录是“Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025”。目录结构如下所示：

JSONDemo

System.Web.Extension.dll 是执行所有魔法的主要 DLL。您还可以安装 Visual Studio 2008 AJAX 扩展模板。

实现

创建一个示例 ASP.NET Web Service 页面，并将其命名为 JSONDemo。

JSONDemo

创建 Web Service 应用程序后，将其重命名为 JSON 并添加对 System.Web.Extensions.dll 的引用。添加引用后，应用程序看起来像这样：

JSONDemo

配置 Web.Config

为了使代码正常工作，我们需要使用以下代码片段在 <system.web> 部分下添加一个用于 ScriptHandlerFactory HttpHandler 的部分：

<httphandlers>
 <remove verb="*" path="*.asmx"></remove>
  <add verb="*" path="*.asmx" 
     type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions,
     Version=1.0.61025.0, Culture=neutral,PublicKeyToken=31bf3856ad364e35">
 </add>
</httphandlers>

添加类

现在，我们添加一个名为 Employee 的类以在 Web Service 中使用。

public class Employee
{
    public string Name { get; set; }
    public string Company { get; set; }
    public string Address { get; set; }
    public string Phone { get; set; }
    public string Country { get; set; }
}

配置 ASMX Web Service

如果您在对象浏览器中打开 system.web.extension.dll，您会找到这些命名空间：

JSONDemo

JSONDemo

现在，我们添加 System.Web.Script.Services 和 System.Web.Script.Serialization 命名空间。using 语句列表如下所示：

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
using System.Web.Script.Serialization;

现在，我们可以将 ScriptService 添加为 System.Web.Script.Services 命名空间属性的一部分。应用此属性可以使 Web Service 轻松地从 JavaScript 调用。此属性还会导致 Web Service 接受 JSON（JavaScript Object Notation）数据作为输入参数，并返回 JSON 数据。这还完全消除了解析 XML 的需要。

添加 ScriptService 属性后，添加 ScriptMethod(ResponseFormat = ResponseFormat.Json) 以 JSON 格式返回数据。

默认情况下，用 ScriptService 属性装饰的 Web Service 以 JSON 格式返回数据，而不是 XML 格式。因此，您甚至不需要添加 ResponseFormat.Json 属性。但是，如果您希望在 Web Service 中，某些 Web 方法也以 XML 格式返回数据，那么您可以通过添加：ScriptMethod(ResponseFormat = ResponseFormat.Xml) 来专门告诉该 Web 方法。在我的示例中，我添加此属性只是为了清晰起见。

应用以上所有内容后，您的代码看起来像这样：

namespace JSONDemo
{
    /// <summary>
    /// Summary description for Service1
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [ScriptService]
    public class JSONService : System.Web.Services.WebService
    {

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public string TestJSON()
        {
            Employee[] e = new Employee[2];
            e[0] = new Employee();
            e[0].Name = "Ajay Singh";
            e[0].Company = "Birlasoft Ltd.";
            e[0].Address = "LosAngeles California";
            e[0].Phone = "1204675";
            e[0].Country = "US";
            e[1] = new Employee();
            e[1].Name = "Ajay Singh";
            e[1].Company = "Birlasoft Ltd.";
            e[1].Address = "D-195 Sector Noida";
            e[1].Phone = "1204675";
            e[1].Country = "India";
            return new JavaScriptSerializer().Serialize(e);
        }
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Xml)]
        public Employee[] TestXML()
        {
            Employee[] e = new Employee[2];
            e[0] = new Employee();
            e[0].Name = "Ajay Singh";
            e[0].Company = "Birlasoft Ltd.";
            e[0].Address = "LosAngeles California";
            e[0].Phone = "310-235-1535";
            e[0].Country = "US";
            e[1] = new Employee();
            e[1].Name = "Ajay Singh";
            e[1].Company = "Birlasoft Ltd.";
            e[1].Address = "D-195 Sector Noida";
            e[1].Phone = "120-467500";
            e[1].Country = "India";
            return e;
        }
    }
}

现在我们的 Web Service 已准备就绪。您可以直接从浏览器测试此 Web Service。我将向您展示如何使用 jQuery 从普通 HTML 页面调用此 Web Service。但是，如果您不想使用 jQuery 并想使用 Microsoft ASP.NET AJAX Script Manager 从客户端调用 Web Service，则会生成一个 JavaScript 代理类。您可以通过在 .asmx 页面后使用“/js”参数来查看 JavaScript 代理类。

例如，https:///jsondemo/JSON.asmx/js。

使用 jQuery 调用 Web Service

以下是从 jQuery 调用 Web Service 的代码：

function testJson() {
    $.ajax({
        type: "POST",
        url: "JSON.asmx/TestJSON",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            var data = eval("(" + msg + ")");
            var t = "<table border=1> <tr>" +
              "<td> <strong>Name</strong></td> <td> " +
              "<strong>Company</strong></td> <td> " +
              "<strong>Address</strong></td> <td> " +
              "<strong>Phone</strong></td> <td> " +
              "<strong>Country</strong></td> </tr> ";
            jQuery.each(data, function(rec) {
                t = t + " <tr> <td> " + this.Name + "</td> <td> " +
                    this.Company + "</td> <td> " + this.Address +
                     "</td> <td> " + this.Phone + 
                     "</td> <td> " + this.Country + 
                     "</td> </tr> ";
            });

            t = t + " </table> ";

            $("#jsonDiv").html(t);
        },
        error: function(msg) {

        }
    });
};

$.ajax() 是一个用于发出 AJAX 请求的 jQuery 方法。它接受各种参数。各种参数的说明如下：

  • type：调用 Web Service 时，您始终发出“POST”请求。
  • url：Web Service 的 URL 以及 Web 方法的名称。

    • 在上面的示例中，“JSON.asmx”是 Web Service 的 URL，TestJSON 是一个 Web 方法。

  • data：用于将参数传递给 Web 方法。
  • contentType：调用 JSON Web Service 时，您始终需要将其设置为“application/json; charset=utf-8”。
  • dataType：根据 Web Service 的调用类型，您需要设置该值；对于 JSON 调用，它应该是“json”。
  • success：在这里，定义一个在成功处理后调用的函数；在上面的示例中，我定义了一个匿名函数来处理 Web Service 调用返回的数据。您也可以将其定义为：

    function (msg) { var data = eval("(" + msg + ")"); 
    ProcessWebServiceResult(data) //javascript function }

    在 ASP.NET 2.0 中，Web Service 调用与 ASP.NET 3.5 的处理方式不同。这就是我们使用 eval 函数的原因。如果您使用的是 ASP.NET 3.5，则可以直接使用 msg.d，其中 d 是消息响应中包含内容的属性。我还要在 function (msg) 语句中解释一件事，msg 参数名可以是您想要的任何名称。jQuery 所做的是，它将消息响应赋给此参数，然后您可以相应地进行处理。

  • error：在这里，您可以使用匿名函数或单独的函数来处理返回的任何错误。

单击 JSON 按钮时的输出如下：

JSONDemo

摘要

从以上所有内容中，您可以看到在 ASP.NET 2.0 中实现 JSON Web Service 并使用 jQuery 从普通 HTML 页面调用它的容易程度。撰写本文的原因是，当我开始处理这个问题时，我遇到了很多问题，因为我没有在单个地方找到所有信息。我附上了一个完整的可运行示例，上面我已经说明了。在此项目中，我还包含了“System.Web.Extensions.dll”，因此如果您想创建 JSON Web Service，甚至不需要下载 ASP.NET AJAX 1.0 扩展。但是，如果您想在客户端处理中使用 ASP.NET AJAX 而不是 jQuery，则需要下载它。我希望本文能帮助您在一个地方理解一些概念。非常感谢您的任何反馈。

© . All rights reserved.