使用 XMLHttpRequest 的 ASP.NET AJAX 简单应用程序答案

【问题标题】：ASP.NET AJAX simple application using XMLHttpRequest使用 XMLHttpRequest 的 ASP.NET AJAX 简单应用程序
【发布时间】：2012-02-03 01:18:46
【问题描述】：

我是 ASP.NET 和 Ajax 的新手。我正在尝试实现一个示例应用程序，它可以在没有回发的情况下更新 Web 表单。单击时，我的应用程序使用 XMLHttpRequestModule 向其服务器发送请求，并显示通过警报窗口接收到的数据。

我认为问题可能是 default.aspx.cs 页面没有将 httpRequest.responseText 提供给其网络表单。

参见。 XMLHttpRequestModule 中的 sendRequest 方法用于检查与浏览器的兼容性，并使用指定的参数和方法发送请求。

非常感谢任何帮助。

默认.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="XMLHttpRuquestModule.htm"></script>
<script type="text/javascript">

    function helloToServer() {
        var params = "name=" + encodeURIComponent(document.form.name.value);
        sendRequest("Default.aspx", params, helloFromServer, "POST");
    }

    function helloFromServer() {
        if (httpRequest.readyState == 4) {
            if (httpRequest.status == 200) {
                alert("Response: " + httpRequest.responseText);
            }
        }
    }

</script>
</head>
<body>
<form name ="form" runat="server">
<input type="text" name="name" />
<input type="button" value="enter" onclick="helloToServer()" />
</form>
</body>
</html>

默认.aspx.cs

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
    String name = Request["name"];
    Response.Write(name);
    return;
}
}

XMLHttpRequestModule

<head>
<title></title>
<script type="text/javascript">
    var httpRequest = null;

    function getXMLHttpRequest() {
        if (window.ActiveXObject) {
            try {
                return new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e1) {
                    return null;
                }
            }
        } else if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        } else {
            return null;
        }
    }

    function sendRequest(url, params, callback, method) {
        httpRequest = getXMLHttpRequest();
        var httpMethod = method ? method : 'GET';
        if (httpMethod != 'GET' && httpMethod != 'POST') {
            httpMethod = 'GET';
        }
        var httpParams = (params == null || params == '') ? null : params;
        var httpUrl = url;
        if (httpMethod == 'GET' && httpParams != null) {
            httpUrl = httpUrl + "?" + httpParams;
        }
        httpRequest.open(httpMethod, httpUrl, true);
        httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        httpRequest.onreadystatechange = callback;
        httpRequest.send(httpMethod == 'POST' ? httpParams : null);
    }

</script>
</head>

【问题讨论】：

什么是'cf。 sendRequest' 以及它在您的代码中的什么位置？
sendRequest 方法位于我在此代码中提到的 XMLHttpRequestModule.htm 中。 sendRequest 方法有四个参数（url、params、callback、method）
要我上传 XMLHttpRequestModule.htm 吗？
是的。请编辑您的问题和所有相关代码。

标签： c# asp.net ajax xmlhttprequest

【解决方案1】：

直接使用 XMLHttpRequest 有很多问题。其中之一是跨浏览器兼容性。您应该尝试使用 jQuery 创建 ajax 调用。您可以创建 WebMethods 是要从 javascript 调用的 ASP.Net 页面。看看他们

Using jQuery for AJAX with ASP.NET Webforms

http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

编辑：

在你想用纯Javascript试试

http://lamahashim.blogspot.com/2010/03/accessing-aspnet-webmethod-from.html

http://msdn.microsoft.com/en-us/library/ms535874%28v=vs.85%29.aspx

【讨论】：

感谢您的评论，但我想尝试使用 XMLHttpRequest 来了解它是如何工作的。另外，我想我已经在我的 XMLHttpRequest 模块中使用 if-catch 语句解决了一些兼容性问题。
你是对的，你可以创建自己的逻辑来处理跨浏览器问题。

【解决方案2】：

在您的问题中，您提到了通过脚本标签包含的XMLHttpRequestModule：<script type="text/javascript" src="XMLHttpRuquestModule.htm"></script>。 XMLHttpRuquestModule.htm 中有拼写错误（'Ruquest' 而不是 'Request'），这可能是导致您的错误的原因。

另外请注意，只有在该文件中有 JavaScript 而没有实际的 html 时，在脚本中包含 htm 文件才会起作用。

编辑：

这是参考我们在 cmets 部分的交流。

我设法获得了一个 ASP.NET 服务器，针对一个 ASPX 页面运行了 Ajax 代码，与您的页面一模一样，一切都还好。警告框仍在弹出正确的响应。

不同之处在于，正如最初建议的那样，我已将您的 XMLHttpRuquestModule.htm 重命名为 XMLHttpRuquestModule.js 并删除了其中的所有标记。

我在这里复制所有代码，尝试准确粘贴然后运行它：

HTML 文件（testXhr.htm）：

<html>
    <head>
    <title></title>
    <script type="text/javascript" src="XMLHttpRequestModule.js"></script>
    <script type="text/javascript">

        function helloToServer() {
            var params = "name=" + encodeURIComponent(document.form.name.value);
            sendRequest("Default.aspx", params, helloFromServer, "POST");
        }

        function helloFromServer() {
            if (httpRequest.readyState == 4) {
                if (httpRequest.status == 200) {
                    alert("Response: " + httpRequest.responseText);
                }
            }
        }

    </script>
    </head>
    <body>
        <form name ="form" runat="server">
            <input type="text" name="name" />
            <input type="button" value="enter" onclick="helloToServer()" />
        </form>
    </body>
</html>

JavaScript 文件（XMLHttpRequestModule.js）：

var httpRequest = null;

function getXMLHttpRequest() {
    if (window.ActiveXObject) {
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                return new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e1) {
                return null;
            }
        }
    } else if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return null;
    }
}

function sendRequest(url, params, callback, method) {
    httpRequest = getXMLHttpRequest();
    var httpMethod = method ? method : 'GET';
    if (httpMethod != 'GET' && httpMethod != 'POST') {
        httpMethod = 'GET';
    }
    var httpParams = (params == null || params == '') ? null : params;
    var httpUrl = url;
    if (httpMethod == 'GET' && httpParams != null) {
        httpUrl = httpUrl + "?" + httpParams;
    }
    httpRequest.open(httpMethod, httpUrl, true);
    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    httpRequest.onreadystatechange = callback;
    httpRequest.send(httpMethod == 'POST' ? httpParams : null);
}

【讨论】：

感谢指出错误！该代码仍然无法正常工作:( htm 文件的头部只有 JavaScript 代码。
不客气。你所说的“在它的头脑中”是什么意思？ src 属性需要一个完全没有标记的文本文件。另外，你为什么使用 .htm 文件而不是 .js。
你是对的。我应该使用没有任何标签的 .js ！鳕鱼仍然无法正常工作：（
我的机器上现在没有 ASP.NET，但我可以确认您的 JavaScript 没问题。我复制粘贴了您的 HTML 和 JavaScript 代码，并针对 2 行 PHP 脚本运行它，然后弹出警报框并显示正确的响应。您的 ASP.NET 代码中不太可能出现错误，但您可以通过键入“yourservername/Default.aspx?name=myname”来检查它。如果它打印你的名字，那么服务器端组件也可以。
我唯一不同的做法是将“XMLHttpRuquestModule.htm”重命名为“XMLHttpRequestModule.js”，并确保“XMLHttpRequestModule.js”只包含 JavaScript 而没有 HTML。