jquery - 如何在没有 jquery 的情况下从 javascript 调用 .net 页面方法？

Question

我一直在尝试从我自己的 JavaScript 代码调用页面方法，但它不起作用。如果我使用 jQuery AJAX，我可以成功调用页面方法，但我需要从我自己的 JavaScript 代码中执行此操作，因为我们无法使用第三方库(我们正在构建我们自己的库)。

每当我使用 jQuery AJAX 方法时，我都会得到页面方法的结果，而当我使用自定义 JS 方法时，我会从 AJAX 请求返回整个页面。

jQuery 处理 AJAX 请求的方式肯定有一些不同。有谁知道这可能是什么？

下面是我用来使用 jQuery 调用相同页面方法的代码(该方法有效)，以及我用来自行调用它的代码。

jQuery

// JScript File
$(document).ready(function() {
  $("#search").click(function() {
    $.ajax({
      type: "POST",
      url: "Account.aspx/GetData",
      data: "{}",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function(msg) {
        // Substitui o conteúdo da DIV vom o retorno do Page Method.
        displayResult(msg);
      }
    });
  });
});

自定义 JS

function getHTTPObject() {
    var xhr = false;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            try { 
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                xhr = false;
            }
        }
    }
    return xhr;
}

function prepareLinks() {
    var btn  = document.getElementById("search");
    btn.onclick = function() {
        var url = "Account.aspx/GetData"
        return !grabFile(url);
    }    
}

function grabFile(file) {
    var request = getHTTPObject();
    if (request) {
        displayLoading(document.getElementById("result"));
        request.onreadystatechange = function() {
            parseResponse(request);
        };
        //Abre o SOCKET
        request.open("GET", file, true);
        //Envia a requisição
        request.send(null);
        return true;
    } else {
        return false;
    }
}

function parseResponse(request) {
    if (request.readyState == 4) {
        if (request.status == 200 || request.status == 304) {
            var details = document.getElementById("result");
            details.innerHTML = request.responseText;
            fadeUp(details,255,255,153);
        }
    }
}

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
        if (oldonload) {
            oldonload();
        }
            func();
        }
    }
}

addLoadEvent(prepareLinks);

更新:我决定接受 Stevemegson 的回答，因为他的回答是我问题的实际原因。但我想与大家分享一些我发现的解决这个问题的方法。

史蒂夫梅 Gson 的回答:我所要做的就是更改为 POST 请求并将请求 header 设置为 JSON，这解决了我请求页面方法的问题，但现在我在处理响应方面遇到了困难(我会详细介绍这一点)关于另一个问题)。

这是获取这些内容的正确代码:

print("function prepareLinks() {
var list = document.getElementById("search");
list.onclick = function() {
    var url = "PMS.aspx/GetData"
        return !grabFile(url);
    } }");

print("function grabFile(file) {
var request = getHTTPObject();
if (request) {
    //Evento levantado pelo Servidor a cada mudança de Estado na 
    //requisição assíncrona
    request.onreadystatechange = function() {
        parseResponse(request);
    };        
    //USE POST
    request.open('POST', file, true);
    //SET REQUEST TO JSON
    request.setRequestHeader('Content-Type', 'application/json');
    // SEND REQUISITION
    request.send(null)
    return true;
} else {
    return false;
}
}");

Brendan 的回答:通过 Brendan 的回答，我对 ICallBack 接口(interface)和 ICallBackEventHandler 做了一些研究。令我惊讶的是，这是一种使用 Microsoft 的 AJAX 请求实现来开发 aspx 页面的方法。事实证明，这是一个非常有趣的解决方案，因为它不需要任何 JS 库即可实现，并且它位于 .Net Framework 内部，我相信只有少数人知道这个东西(至少我周围的人不知道)根本不知道)。如果您想了解有关 ICallBack 的更多信息，请查看此 link text在 MS 上或复制并粘贴 Brendan 的答案。

第三种解决方案:我发现的另一个解决方案是，我不是创建 ASPX 页面来处理服务器端代码，而是实现 HTML 页面并调用 ASHX 文件，这些文件会执行相同的操作，但它们会使用比 ASPX 页面带宽更少。该解决方案的一大优点是我希望它能够与 POST 和 GET 申请一起使用。下面是代码。

ASHX 代码:

print("Imports System.Web
       Imports System.Web.Services
       Public Class CustomHandler
         Implements System.Web.IHttpHandler
          Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
context.Response.ContentType = "text/plain"
Dim strBuilder As New System.Text.StringBuilder
strBuilder.Append("<p>")
strBuilder.Append("Your name is: ")
strBuilder.Append("<em>")
strBuilder.Append(context.Request.Form(0))
strBuilder.Append("</em>")
strBuilder.Append("</p>")
context.Response.Write(strBuilder.ToString)
End Sub
ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
  Return False
End Get End Property End Class");

JavaScript 文件:

print("function prepareLinks() {
var list = document.getElementById("search");
list.onclick = function() {
    var url = "CustomHandler.ashx"
        return !grabFile(url);
    }    
}");

print("function grabFile(file) {
var request = getHTTPObject();
if (request) {
    request.onreadystatechange = function() {
        parseResponse(request);
    };
    //VERSÃO do POST
    request.open('POST', file, true);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    request.send('name=Helton Valentini')
    return true;
} else {
    return false;
} }");

使用这三个选项中的任何一个，我们都可以在不使用 JQuery 的情况下进行异步调用，使用我们自己的 Javacript 或使用 Microsoft 嵌入在 .Net Framework 上的资源。

我希望这对你们中的一些人有所帮助。

Answer 1

您使用 GET 请求 URL，而 jQuery 代码使用 POST。我希望页面方法只能通过 POST 调用，以允许您在请求正文中包含任何参数。您可能还需要将请求的 Content-Type 设置为 application/json，就像 jQuery 代码所做的那样 - 我不知道 .NET 是否会接受其他内容类型。