javascript - 使用 XmlHttpRequest 和纯 JavaScript 调用 WebMethods

标签 javascript asp.net ajax xmlhttprequest webmethod

我有一个本应是相对简单的任务,但坦率地说却让我感到难过。我一直研究它直到我的大脑被炸了,现在我正在踢球,并向你们寻求帮助。

场景如下:

  • 我有一个用 WebService 修饰的 ASPX 页面 (Q2.aspx), WebServiceBindingScriptService 属性。
  • 该页面包含一个方法 GetAllContacts,该方法用 WebMethod 修饰 属性并返回包含 JSON 数据的字符串。 (对于它的值(value),页面 本身不包含其他控件或功能。)
  • 我有一个 HTML 页面,其中包含使用 XmlHttpRequest 的 JavaScript 对象调用 ASPX 页面上的 GetAllContacts WebMethod 并转换 将 JSON 数据转换为 HTML 表。
  • 我已验证我的 Web.Config 文件包含适当的协议(protocol)处理程序 对于 System.Web.webServices 下的 WebServices 部分中的 HttpGetHttpPut
  • 我已验证我的 Web.Config 文件包含 ScriptModule 条目 System.webServer.modules 部分,并且它与相应的文档匹配。

但是,当我在浏览器中查看 HTML 页面时,会发生以下情况:

  • Web 请求通过,但结果是来自 ASPX 页面的未处理 HTML。
  • 从未调用 GetAllContacts 方法,在其代码中设置断点就是证明。
  • 然而,调用 Web 服务的代码被调用,并且 JavaScript 回调 正确调用请求完成时调用的函数。

看起来 JavaScript 代码基本上设置正确,但出于某种原因,此时我完全无法理解,HTML 页面将不会在 ASPX 页面上执行 WebMethod,并且简单地返回页面,就好像它是一个纯 HTML GET 请求一样。显然,JavaScript 的 eval 函数无法评估 HTML 文档,这让我想到了我的问题。 (另请注意,返回的 HTML 中没有出现 JSON 数据。)

坦率地说,我很困惑。我看过许多 Microsoft 文章、StackOverflow 帖子、CodeProject 文章,谁知道还有什么。我的代码看起来 没问题。但我知道得更多。我错过了一些简单、愚蠢和明显的东西。我只需要有人向我指出。

您将在下面找到 ASPX 页面代码和 HTML 代码,希望它们能提供一些启发。

ASPX代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Q2.aspx.cs" Inherits="Satuit.Q2" enablesessionstate="False" %>
<html>
    <body>
        <form runat="server" id="frmMain"/>
    </body>
</html>
-- Codebehind
using System.IO;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;
using System.Web.UI;
using System.Xml;
using System.Xml.XPath;
using System.Xml.Xsl;

namespace Satuit
{
    [WebService(Namespace="http://tempuri.org")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
    [ScriptService]
    public partial class Q2 : Page
    {

        [WebMethod]
        public static string GetAllContacts()
        {
            return LoadJsonData();
        }

        private static string LoadJsonData()
        {
            using (var stringWriter = new StringWriter())
            {

                string xmlUri = HttpContext.Current.Server.MapPath("\\XmlData\\Contacts.xml");
                string xslUri = HttpContext.Current.Server.MapPath("\\XmlData\\Q2.xsl");

                using (var xmlTextReader = new XmlTextReader(xmlUri))
                {
                    var xpathDocument = new XPathDocument(xmlTextReader);
                    var xslTransform = new XslCompiledTransform();

                    xslTransform.Load(xslUri);
                    xslTransform.Transform(xpathDocument, null, stringWriter);

                    return stringWriter.ToString();
                }
            }
        }
    }
}

HTML 代码

    var objectData; // Receives the objectified results of the JSON request.

    var xmlhttp;
    if(window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }

    xmlhttp.open("GET", "/Q2.aspx/GetAllContacts", true);
    xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    xmlhttp.onreadystatechange = function () 
    {
        if (xmlhttp.readyState == 4) 
        {
            if (xmlhttp.status == 200)
            {
                var jsonResultBuffer = xmlhttp.responseText;
                objectData = eval(jsonResultBuffer);
                DisplayTable();
            }
        }
    };
    xmlhttp.send(null);

    function DisplayTable()
    {       
        var sHtml = "";     
        sHtml = "<table><tr><th>ID</th><th>First</th><th>Last</th><th>Address</th></tr>";           
        for(i = 0; i < objectData.length; i++)
        {
            sHtml += "<tr>";
            sHtml += "<td>" + objectData.ID;
            sHtml += "<td>" + objectData.firstName + "</td>";
            sHtml += "<td>" + objectData.lastName + "</td>";
            sHtml += "<td>" + objectData.address + "</td>"; 
            sHtml += "</tr>"
        }
        sHtml += "</table>"         
        document.getElementById("divTable").innerHTML = sHtml;
    }    
</script>

开发环境详细信息

  • Vista 终极版 SP 2
  • Visual Studio 2008
  • .NET 框架 3.5
  • 解决方案尚未部署,因此它正在“本地 Web 服务器”中运行 由 Visual Studio 提供。 (让我想知道我是否不应该只部署 IIS 在 Vista 下。)
  • 请注意,包含 WebMethod 的 ASPX 页面和 HTML 页面驻留在 相同的解决方案。

最佳答案

我想我们需要用 POST 请求调用 web 方法 尝试更改这部分代码

xmlhttp.open("POST", "/Q2.aspx/GetAllContacts", true);
xmlhttp.setRequestHeader("content-type", "application/json");
xmlhttp.setRequestHeader("Accept", "application/json");
xmlhttp.onreadystatechange = function () 
{
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
    {
            var jsonResultBuffer = JSON.parse(xmlhttp.responseText);
            objectData = jsonResultBuffer.d;
            DisplayTable();
    }
};

响应以 JSON 格式返回,以“d”作为 xmlhttp.responseText 中的键

关于javascript - 使用 XmlHttpRequest 和纯 JavaScript 调用 WebMethods,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3090044/

相关文章:

javascript - 在 Redux mapDispatchToProps 和 SweetAlert2 中使用 Spread 运算符

javascript - Rails App 中的 JS 仅在第一次加载

c# - 如何根据条件设置链接按钮的状态?

javascript - Angular 2 : Synching two post requests

javascript - Ajax和PHP session 问题,简单测试不起作用

ajax - Ajax 调用期间会发生什么?

javascript - onclick 事件以不同的方式执行相同的功能

javascript - 通过 Javascript 设置时无法访问代码隐藏文件中的标签文本

c# - 有什么方法可以保护 asp.net MVC4 web 应用程序免受来自外部网站的请求?

mysql - 如何在 ASP.Net 中使用数据库