使用 jQuery jsonp 跨域调用到 ASP.NET Web 服务

Posted 2023-02-27

【中文标题】使用 jQuery jsonp 跨域调用到 ASP.NET Web 服务

【英文标题】：cross domain call with jQuery jsonp to ASP.NET web service

【发布时间】：2012-02-11 16:25:41

【问题描述】：

我的问题是已知问题并讨论了here 和here。 但即使在阅读并实施建议的解决方案后，我也无法完成这项工作。

问题：web服务返回xml insted of json：

<?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://tempuri.org/">"Now i am getting jsop string""2nd param"</string>

现在让我们把代码分成几个部分：

远程服务器（IIS 7.0、.NET 4）： 网络配置：

<?xml version="1.0"?>
<configuration>
        <system.webServer>
            <modules>
                <add name="JsonHttpModule.JsonHttpModule" type="JsonHttpModule"/>
            </modules>
        </system.webServer>
    <system.web.extensions>
        <scripting>
            <webServices>
                <jsonSerialization maxJsonLength="102400"/>
            </webServices>
        </scripting>
    </system.web.extensions>
    <system.web>
        <compilation debug="true" targetFramework="4.0" />
        <customErrors mode="Off"/>
        <webServices>
            <protocols>
                <add name="HttpGet"/>
                <add name="HttpPost"/>
            </protocols>
        </webServices>
    </system.web>
</configuration>

网络服务：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
using JsonHttpModule;
/// <summary>
/// Summary description for JSONP_EndPoint
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class MyService : System.Web.Services.WebService 
    [WebMethod]
    [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
    public string Sum(string x, string y)
    
        return x + y;
    

HttpModule 类：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Text;

/// <summary>
/// Summary description for ContentTypeHttpModule
/// </summary>
namespace JsonHttpModule

    public class JsonHttpModule : IHttpModule
    
        private const string JSON_CONTENT_TYPE = "application/json; charset=utf-8";

        public void Dispose()
        
        
        public void Init(HttpApplication app)
        
            app.BeginRequest += OnBeginRequest;
            app.EndRequest += new EventHandler(OnEndRequest);
        
        public void OnBeginRequest(object sender, EventArgs e)
        
            HttpApplication app = (HttpApplication)sender;
            HttpRequest request = app.Request;
            //Make sure we only apply to our Web Service
            if (request.Url.AbsolutePath.ToLower().Contains("MyService.asmx"))
            
                if (string.IsNullOrEmpty(app.Context.Request.ContentType))
                
                    app.Context.Request.ContentType = JSON_CONTENT_TYPE;
                
                app.Context.Response.Write(app.Context.Request.Params["callback"] + "(");
            
        
        void OnEndRequest(object sender, EventArgs e)
        
            HttpApplication app = (HttpApplication)sender;
            HttpRequest request = app.Request;
            if (request.Url.AbsolutePath.ToLower().Contains("MyService.asmx"))
            
                app.Context.Response.Write(")");
            
        
    

客户端（本地主机）：

<script>
    $(function () 
        $('#btn_test').click(function () 
            $.ajax( url: "http://tonofweb.com/MyService.asmx/Sum",
                data:  x: JSON.stringify("Now i am getting jsop string"), y: JSON.stringify("2nd param") ,
                dataType: "jsonp",
                success: function (json) 
                    alert(json.d);
                ,
                error: function () 
                    alert("Hit error fn!");
                
            );
    );
);
</script>
    <input id="btn_test" type="button" value="POST" />

那么我在这里做错了什么？ 你可以自己测试它是一个实时的网络服务。 感谢您的帮助。

【问题讨论】：

由于跨域问题，从 jsonp 更改为 json 不起作用，转换为对象仍返回 xml

【参考方案1】：

似乎所有配置和属性都已准备好让 Web 服务返回 JSON，但我确实在您的 jQuery 请求中注意到，您没有指定要传入的数据的内容类型。我已将其添加到代码如下：

$.ajax(
  url: "http://tonofweb.com/MyService.asmx/Sum",
  contentType: "application/json; charset=utf-8",
  data:  x: JSON.stringify("1"), y: JSON.stringify("2") ,
  dataType: "jsonp",
  success: function (json) 
    alert(json.d);
  ,
  error: function () 
    alert("Hit error fn!");
  
);

请注意，我在请求设置中添加了 contentType: "application/json; charset=utf-8",。

我已经通过浏览到 http://tonofweb.com（此时返回 403）测试了这段代码，包括使用 jQuerify bookmarklet 的 jQuery，然后首先从您的问题运行代码（没有 contentType），然后是我在上面发布的代码（with contentType）。

以下是来自 Chrome 开发者工具中网络标签的响应：

没有 contentType：

<?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://tempuri.org/">"Now i am getting jsop string""2nd param"</string>

使用 contentType：

"d":"12"

所以第二个至少会导致从服务器返回 JSON。所以在其他条件相同的情况下，我会说添加 contentType。

请参阅此处了解返回 JSON 的要求：

ASMX and JSON – Common mistakes and misconceptions

HTTP 请求必须声明 application/json 的内容类型。这 通知 ScriptService 它将以 JSON 形式接收其参数 并且它应该以实物回应。

现在你还有另一个问题，那就是请求在完成时调用了错误函数。如果您将dataType: "jsonp" 更改为dataType: "json"，它将调用成功函数。所以关于你的回调包装器的实现是错误的，因为 jQuery 不能将响应作为 JSONP 处理。

现在我也没有看到包含在响应中的回调，对于 JSONP，响应应该类似于：

jQuery17106476630216930062_1326752446188("d":"12")

我注意到您正在链接到 this post 关于如何从 Web 服务进行 JSONP 响应，但您没有遵循建议：您不使用 Response.Filter，而是使用 Response.Write。

【讨论】：

是的，它正在工作，您说：“问题：Web 服务返回 xml insted of json:”。我刚刚测试了这段代码，如果你只添加contentType: "application/json; charset=utf-8"

，你的 web 服务就会响应 JSON

即使我添加了 contentType: "application/json; charset=utf-8" 我仍然无法让它工作我得到： tempuri.org"> "1 ""2"

按照我的步骤操作：在新的 Chrome 浏览器选项卡中打开您的网站，等待 403 响应，使用书签添加 jQuery，将我的请求代码复制并粘贴到控制台中，按 Enter，使用响应选项卡。我刚刚尝试过（5秒前），回复是"d":"12"