使用 jQuery 和参数调用 Web 服务

Question

我在通过 jQuery 调用 ASMX 网络服务时遇到问题。我可以将此 URL 粘贴到我的浏览器中以获得所需的 XML 结果：

http://<serverurl>/WebService/ReportServer.asmx/RowDataWithFilterParamsAndColumnParams?filterParams=EXCAVATION_DIG.EXCAVATION_DIG_INTL_ID%20IN%20(1)&columnParams=Dig_ID|Line|Dig_Type|Dig_Status

我可以像这样从控制台应用程序调用 asmx，没有任何问题：

    HttpWebRequest req = (HttpWebRequest)WebRequest.Create(url);
    req.Credentials = new NetworkCredential("username", "pass");
    req.PreAuthenticate = true;
    HttpWebResponse resp = (HttpWebResponse)req.GetResponse();

    StreamReader sr = new StreamReader(resp.GetResponseStream());
    string results = sr.ReadToEnd();
    sr.Close();

我遇到的问题是从客户端调用 Web 服务。我的代码有什么问题？我没有收到任何错误，但未调用成功函数。

$( document ).ready(function() {

var url = "http://<serverurl>/WebService/ReportServer.asmx/RowDataWithFilterParamsAndColumnParams";
var payload = "{ filterParams : 'EXCAVATION_DIG.EXCAVATION_DIG_INTL_ID%20IN%20(1)',  columnParams : 'Dig_ID|Line|Dig_Type|Dig_Status' }";


    $.ajax({
        type: "POST",
        url: url,
        data: payload, 
        contentType: "application/json; charset=utf-8",
        dataType: "jsonp",              
        success: function (data) {
            alert(data); 
        }
    });

});

当我将数据类型更改为 "json" 时，出现错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

这是一个 CORS（Cross-Origin 资源共享）错误 -- 基本上，浏览器中的脚本无法从页面最初提供的服务器以外的服务器请求资源来自，除非服务器允许所有外部请求，或明确将您的域列入白名单。

因此，您可以从 server-side 执行此操作，但不能从 client-side 执行此操作，除非

您控制服务器并可以添加 Access-Control-Allow-Origin header *（允许所有人）或白名单域列表，或者
您可以通过 CORS 代理，该代理设置为允许来自任何域的调用，然后 re-execues 来自代理服务器端的调用，这不受 CORS 限制。

Answer 2

首先要做的是将错误回调添加到您的 AJAX 函数中。您需要阅读包含错误的响应。 http://api.jquery.com/jQuery.ajax/

我怀疑您会发现出于安全目的您被限制在域中。还是有希望的，就叫CORS。

http://techblog.constantcontact.com/software-development/using-cors-for-cross-domain-ajax-requests/

还要注意 ajax 函数中的变量 "crossDomain"。必须将其设置为 true 才能启用 CORS。由于时序问题，部分场景会需要jsonpcallback。

$.ajax({
        type: "POST",
        url: url,
        data: payload, 
        contentType: "application/json; charset=utf-8",
        dataType: "jsonp",            
        crossDomain: true,  
        success: function (data) {
            alert(data); 
        },
        error: function ( jqXHR, textStatus, errorThrown) {
            console.log(textStatus);
            console.log(errorThrown);
            // alert(errorThrown);
        }
    });

除非您确定站点允许跨域连接（这种情况很少见），否则您可能就不走运了。如果它期望 JSONP（与 JSON 非常不同），就像您在函数中设置的那样，那么您知道被传回的回调函数吗？回头再仔细看看jQueryAPI。对于这种类型的连接，您必须了解很多细节。

使用 jQuery 和参数调用 Web 服务

Call Web service with jQuery and Parameters

jquery

json

asmx