asp.net - 如何从 ASP.NET Web 服务生成 JSONP 以进行跨域调用？

Question

我编写了一个返回 JSON 的 Web 服务，并尝试使用 jQuery 调用它，如下所示:

$.ajax({
    contentType: "application/json; charset=utf-8",
    url: "http://examplewebsite.com/service.asmx/GetData",
    data: { projectID: 1 },
    dataType: "jsonp",
    success: function () {alert("success");}
});

然而，尽管使用 Fiddler 查看 HTTP 流量时 Web 服务调用成功，但代码从未调用 success 函数。我认为这是因为我的 Web 服务返回原始 JSON 而不是 JSONP。

如何生成 JSONP 作为来自标准 .NET Web 服务方法的响应，如下所示:

[WebMethod(), ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public Project GetData(int projectID)
{
    Project p = new Project();
    p.Name = "foobar";
    return p;
}

谢谢。

Answer 1

好吧，我终于自己弄清楚了。由于我发现在网络上找到完整的工作解决方案非常困难，因此我决定在这里记录我的工作解决方案。

JSONP 响应只是封装在函数调用中的标准 JSON 字符串。 ASP.NET 似乎没有提供任何直接返回这种格式的响应的方法，但是您自己执行此操作非常简单。但您必须重写 JSON 编码的默认方法。

下面是 JSONP 的示例。

functionName({ name: 'value';});

..现在这一点:{ name: 'value';} 只是任何 JSON 序列化程序都会为您提供的标准 JSON，因此我们需要做的就是添加函数调用包装器。不幸的是，这样做意味着我们必须“取消连接”(或绕过)现有的 JSON 编码，当您从 Web 服务函数返回对象时，该编码由框架透明地处理。

这是通过使用我们自己的代码将 JSONP 写入输出流(响应)来完全覆盖来自 Web 服务功能的响应来完成的。这实际上非常简单，我在下面提供了一个示例。

您可以使用内置的 DataContractJsonSerializer (来自 ASP.NET 3.5+ 中的 System.Runtime.Serialization.Json 命名空间)或 NewtonSoft JSON序列化器，两个示例如下所示。我更喜欢使用 NewtonSoft JSON (从 nuget 安装)而不是内置的 JSON 序列化器，因为我发现它可以为您提供更多控制，并且还可以输出格式良好的人类可读 JSON 以便调试。纸面上的速度也快得多!

[WebMethod()]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public void GetData(int projectID, string callback)
{
    List<Video> videos = null;
    // <code here to populate list on line above>

    // Method 1: use built-in serializer:
    StringBuilder sb = new StringBuilder();
    JavaScriptSerializer js = new JavaScriptSerializer();
    sb.Append(callback + "(");
    sb.Append(js.Serialize(videos));
    sb.Append(");");    

    // Method 2: NewtonSoft JSON serializer (delete as applicable)
    // StringBuilder sb = new StringBuilder();
    // sb.Append(callback + "(");
    // sb.Append(JsonConvert.SerializeObject(videos, Formatting.Indented)); // indentation is just for ease of reading while testing
    // sb.Append(");");     

    Context.Response.Clear();
    Context.Response.ContentType = "application/json";
    Context.Response.Write(sb.ToString());
    Context.Response.End();
}

然后可以使用以下 JQuery 代码调用此方法:

$.ajax({
    crossDomain: true,
    contentType: "application/json; charset=utf-8",
    url: "http://examplewebsite.com/service.asmx/GetData",
    data: { projectID: 1 }, // example of parameter being passed
    dataType: "jsonp",
    success: onDataReceived
});

function onDataReceived(data)
{
    alert("Data received");
    // Do your client side work here.
    // 'data' is an object containing the data sent from the web service 
    // Put a JS breakpoint on this line to explore the data object
}