Простое приложение ASP.NET AJAX с использованием XMLHttpRequest - PullRequest
2 голосов
/ 05 января 2012

Я новичок в ASP.NET и Ajax. Я пытаюсь реализовать пример приложения, которое обновляет веб-форму без обратной передачи. При нажатии мое приложение отправляет запрос на свой сервер с использованием XMLHttpRequestModule и отображает данные, полученные через окно предупреждения.

Я думаю, что проблема может быть в том, что страница default.aspx.cs не передает httpRequest.responseText своей веб-форме.

ср. Метод sendRequest находится в XMLHttpRequestModule для проверки совместимости с браузерами и отправки запроса с использованием указанных параметров и методов.

Любая помощь очень ценится.

Default.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>

Default.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>

Ответы [ 2 ]

3 голосов
/ 05 января 2012

В своем вопросе вы упомянули XMLHttpRequestModule, который вы включили через тег script: <script type="text/javascript" src="XMLHttpRuquestModule.htm"></script>.XMLHttpRuquestModule.htm содержит орфографическую ошибку ('Ruquest' вместо 'Request'), возможно, это является причиной вашей ошибки.

Также обратите внимание, что включение htm-файла в скрипт будет работать только при наличии JavaScript вэтот файл и без фактического HTML.

РЕДАКТИРОВАТЬ:

Это со ссылкой на наш обмен в разделе комментариев.

Мне удалось получитьдержите сервер ASP.NET, запустили Ajax-код на странице ASPX точно так же, как у вас, и все по-прежнему в порядке.В окне предупреждения все еще отображается правильный ответ.

Разница в том, что, как и предполагалось изначально, я переименовал ваш 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);
}
2 голосов
/ 05 января 2012

Существует много проблем, связанных с использованием XMLHttpRequest напрямую. Одним из них является кросс-браузерная совместимость. Вы должны попытаться использовать jQuery для создания вызовов ajax. и вы можете создать WebMethods на странице ASP.Net, которая будет вызываться из JavaScript. посмотрите на них

Использование jQuery для AJAX с веб-формами ASP.NET

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

EDIT:

Если вы хотите использовать чистый 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...