2

ajax リクエストがどのように機能するかを理解するために、1 つの Visual Studio ソリューションに 2 つの単純なプロジェクトがあります。1 つは Web サービスで、もう 1 つは Web サービスを使用するプロジェクトです。関連するコード スニペットを次に示します。

Webサービス第1弾プロジェクト

カスタム クラス。

public class JSONResponse
{
    public string message{ get; set; }
    public JSONResponse()
    {
        message = string.Empty;
    }
}
public class returnData
{
    public string UserValue { get; set; }
    public returnData()
    {
        UserValue = string.Empty;
    }
}

ウェブ方式

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class Service1 : System.Web.Services.WebService
{

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public JSONResponse returnData(returnData objEnter)
    {            
        JSONResponse jsObj = new JSONResponse();
        jsObj.message =  objEnter.UserValue;
        return jsObj;
    }
}

アプリケーションの使用 #2nd プロジェクト

Javascript オブジェクトの作成

    $(document).ready(function () {
        $("#btnSubmit").click(function () {
            debugger;
            var objEnter = {
                UserValue: $("#txtMsg").val()
            }
            pushToServer(objEnter, "returnData", "objEnter");
            // pushToServer(object,function to call,name of the object);
        });
    });

AJAX リクエスト

        function pushToServer(dataToPass, functionToCall, jsonObjectName) {
            debugger;
            $.ajax({
                url: "http://localhost:12016/DisplayError.asmx/" + functionToCall,
                type: "POST",
                dataType: "json",
                data: "{" + jsonObjectName + ":" + JSON.stringify(dataToPass) + "}",
                timeout: 30000,
                //async: false,        
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    return data;
                    alert(data);
                },
                error: function (result) {
                    //alert(e);
                    alert(result.status + ' ' + result.statusText);
                }
            });
        }

しかし、フィドラーを介して検査すると、次のHTTP 500 Errorが表示されます。

[InvalidOperationException: Request format is unrecognized for URL unexpectedly ending in '/returnData'.]
   System.Web.Services.Protocols.WebServiceHandlerFactory.CoreGetHandler(Type type, HttpContext context, HttpRequest request, HttpResponse response) +546417
   System.Web.Services.Protocols.WebServiceHandlerFactory.GetHandler(HttpContext context, String verb, String url, String filePath) +212
   System.Web.Script.Services.ScriptHandlerFactory.GetHandler(HttpContext context, String requestType, String url, String pathTranslated) +47
   System.Web.HttpApplication.MapHttpHandler(HttpContext context, String requestType, VirtualPath path, String pathTranslated, Boolean useAppConfig) +203
   System.Web.MapHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +128
   System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +184

Chrome コンソールは次のエラーを出力します。

XMLHttpRequest cannot load http://localhost:12016/DisplayError.asmx/returnData. Origin http://localhost:12196 is not allowed by Access-Control-Allow-Origin.

Web サービスはポート 12016 で実行され、プロジェクトはポート 12196 で実行されます。

エラーの原因がわかりません。

4

1 に答える 1

2

.NET Framework 1 以降では、セキュリティ上の理由から、HTTP GET と HTTP POST の両方が既定で無効になっています。アプリケーションの web.config を変更して、Web サービス呼び出しの Get/Post を有効にしてください。

<configuration>
    <system.web>
    <webServices>
        <protocols>
            <add name="HttpGet"/>
            <add name="HttpPost"/>
        </protocols>
    </webServices>
    </system.web>
</configuration>

同じ起点ポリシーが原因で ajax 呼び出しが失敗する可能性もあります。アプリケーションが 2 つの異なるポートにある場合、ブラウザーはそれらが異なるドメインであると想定し、ajax によるサービスの呼び出しを防ぎます! 両方のアプリケーションを同じドメインでホストするか、Web サービス アプリケーションでCORSを有効にすることができます。

protected void Application_BeginRequest(object sender, EventArgs e)
{
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin","*");
}
于 2012-12-30T21:32:34.813 に答える