使用 XmlHttpRequest 和纯 JavaScript 调用 WebMethods答案

【问题标题】：Invoking WebMethods with XmlHttpRequest and Pure JavaScript使用 XmlHttpRequest 和纯 JavaScript 调用 WebMethods
【发布时间】：2010-06-22 03:17:24
【问题描述】：

我有一个应该是相对简单的任务，坦率地说让我很难过。我一直研究它，直到我的大脑被炸毁，现在我正在下注，并寻求你们的帮助。

这是场景：

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

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

Web 请求通过，但结果是针对 ASPX 页面中未处理的 HTML。
GetAllContacts 方法永远不会被调用，这可以通过在其代码中设置断点来证明。
但是，调用 Web 服务的代码被调用，并且 JavaScript 回调在请求完成时调用的函数被正确调用。

看来 JavaScript 代码在很大程度上设置正确，但由于某种原因，我现在完全无法理解，HTML 页面根本不会执行 ASPX 页面上的WebMethod，而只是将页面返回为虽然这是一个普通的 HTML GET 请求。显然，JavaScript 的 eval 函数无法评估 HTML 文档，这让我想到了我的问题。（另请注意，JSON 数据不会出现在返回的 HTML 中。）

坦率地说，我很困惑。我看过几十篇 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 Ultimate SP 2
Visual Studio 2008
.NET 框架 3.5
解决方案尚未部署，因此它在“本地 Web 服务器”中运行由 Visual Studio 提供。（让我想知道我是否不应该只部署 IIS 在 Vista 下。）
请注意，包含 WebMethod 的 ASPX 页面和 HTML 页面位于相同的解决方案。

【问题讨论】：

我不确定，但我认为必须使用 SOAP 调用 asp.net Web 服务。
不，Fopfong，它没有。
Mike，您在哪里托管您的网络服务？它是安装在虚拟目录中还是作为服务器上的应用程序？如果页面没有处理，ASP.Net 的处理就没有被执行。确保您的 IIS 设置正确。我猜这是您的代码所在的文件夹。
@Cen，此解决方案尚未部署，仅存在于我的开发机器上。我将环境信息添加到上面的主要帖子中。 WebService 本身与 HTML 页面在同一个解决方案中。谢谢你看这个。我要拔头发了！
您是否尝试过使用 jQuery 为您执行此操作？（只是作为测试——而不是作为解决方案）更简单的实现可能是使用 Ajax ToolKit 中的 AutocompleteExtender。只是想确定我们是否可以通过任何方式进行交流

标签： javascript asp.net ajax xmlhttprequest webmethod

【解决方案1】：

我认为我们需要使用 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 格式返回，在 xmlhttp.responseText 中以“d”作为键

【讨论】：

感谢您向我展示如何在 XMLHttpRequest 中设置响应的标头。

【解决方案2】：

请使用 jquery 尝试以下操作以查看 Web 服务是否可以访问。

$.ajax({
        type: "POST",
        url: "Q2.aspx/GetAllContacts",
        data: "",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {
           alert("success");
        },
        error: function(response, aa) {
            alert("fail");
        }
    });

苏尔因

【讨论】：