Синхронный вызов методов страницы в библиотеке ASP.NET AJAX

Sep 10
2007 23:15 (ASP.NET, Программирование, JavaScript) · English (7,162 views)

Иногда нам нужно выполнять такие задачи, которые разработчики библиотек даже не представляли. Один из таких случаев — выполнение синхронного AJAX-вызова (Asynchronous JavaScript And XML — Асинхронный JavaScript и XML). Ниже вы найдете простое решение.

Обратите внимание: мое решение — это просто копи/паст кода XmlHttpExecutor с двумя маленькими изменениями:

  • Я передал false в третьем параметре метода XMLHttpRequest.open, чтобы сделать синхронный вызов.
  • Я закэшировал результаты в членах XMLHttpSyncExecutor перед освобождением XMLHttpRequest в функции _onReadyStateChange.

Итак, начнем. Первым делом определим класс XMLHttpSyncExecutor, наследник WebRequestExecutor.

Type.registerNamespace('Sys.Net');

Sys.Net.XMLHttpSyncExecutor = function()
{
    if (arguments.length !== 0) throw Error.parameterCount();
    Sys.Net.XMLHttpSyncExecutor.initializeBase(this);

    var _this = this;
    this._xmlHttpRequest = null;
    this._webRequest = null;
    this._responseAvailable = false;
    this._timedOut = false;
    this._timer = null;
    this._aborted = false;
    this._started = false;

    this._responseData = null;
    this._statusCode = null;
    this._statusText = null;
    this._headers = null;

    this._onReadyStateChange = function () {
        if (_this._xmlHttpRequest.readyState === 4 ) {
            _this._clearTimer();
            _this._responseAvailable = true;

            _this._responseData = _this._xmlHttpRequest.responseText;
            _this._statusCode = _this._xmlHttpRequest.status;
            _this._statusText = _this._xmlHttpRequest.statusText;
            _this._headers = _this._xmlHttpRequest.getAllResponseHeaders();

            _this._webRequest.completed(Sys.EventArgs.Empty);
            if (_this._xmlHttpRequest != null) {
                _this._xmlHttpRequest.onreadystatechange = Function.emptyMethod;
                _this._xmlHttpRequest = null;
            }
        }
    }

    this._clearTimer = function this$_clearTimer() {
        if (_this._timer != null) {
            window.clearTimeout(_this._timer);
            _this._timer = null;
        }
    }

    this._onTimeout = function this$_onTimeout() {
        if (!_this._responseAvailable) {
            _this._clearTimer();
            _this._timedOut = true;
            _this._xmlHttpRequest.onreadystatechange = Function.emptyMethod;
            _this._xmlHttpRequest.abort();
            _this._webRequest.completed(Sys.EventArgs.Empty);
            _this._xmlHttpRequest = null;
        }
    }
}

Все очень просто и прозрачно, потому я просто покажу остальные методы XMLHttpSyncExecutor.

function Sys$Net$XMLHttpSyncExecutor$get_timedOut() {
    /// <value type="Boolean"></value>
    if (arguments.length !== 0) throw Error.parameterCount();
    return this._timedOut;
}

function Sys$Net$XMLHttpSyncExecutor$get_started() {
    /// <value type="Boolean"></value>
    if (arguments.length !== 0) throw Error.parameterCount();
    return this._started;
}

function Sys$Net$XMLHttpSyncExecutor$get_responseAvailable() {
    /// <value type="Boolean"></value>
    if (arguments.length !== 0) throw Error.parameterCount();
    return this._responseAvailable;
}

function Sys$Net$XMLHttpSyncExecutor$get_aborted() {
    /// <value type="Boolean"></value>
    if (arguments.length !== 0) throw Error.parameterCount();
    return this._aborted;
}

function Sys$Net$XMLHttpSyncExecutor$executeRequest() {
    if (arguments.length !== 0) throw Error.parameterCount();
    this._webRequest = this.get_webRequest();

    if (this._started) {
        throw Error.invalidOperation(String.format(Sys.Res.cannotCallOnceStarted, 'executeRequest'));
    }
    if (this._webRequest === null) {
        throw Error.invalidOperation(Sys.Res.nullWebRequest);
    }

    var body = this._webRequest.get_body();
    var headers = this._webRequest.get_headers();
    this._xmlHttpRequest = new XMLHttpRequest();
    this._xmlHttpRequest.onreadystatechange = this._onReadyStateChange;
    var verb = this._webRequest.get_httpVerb();
    this._xmlHttpRequest.open(verb, this._webRequest.getResolvedUrl(), false); // False to call Synchronously
    if (headers) {
        for (var header in headers) {
            var val = headers[header];
            if (typeof(val) !== "function")
                this._xmlHttpRequest.setRequestHeader(header, val);
        }
    }

    if (verb.toLowerCase() === "post") {
        if ((headers === null) || !headers['Content-Type']) {
            this._xmlHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        }

        if (!body) {
            body = "";
        }
    }

    var timeout = this._webRequest.get_timeout();
    if (timeout > 0) {
        this._timer = window.setTimeout(Function.createDelegate(this, this._onTimeout), timeout);
    }
    this._xmlHttpRequest.send(body);
    this._started = true;
}

 function Sys$Net$XMLHttpSyncExecutor$getAllResponseHeaders() {
    /// <returns type="String"></returns>
    if (arguments.length !== 0) throw Error.parameterCount();
    if (!this._responseAvailable) {
        throw Error.invalidOperation(String.format(Sys.Res.cannotCallBeforeResponse, 'getAllResponseHeaders'));
    }

    return this._headers;
}

function Sys$Net$XMLHttpSyncExecutor$get_responseData() {
    /// <value type="String"></value>
    if (arguments.length !== 0) throw Error.parameterCount();
    if (!this._responseAvailable)
    {
        throw Error.invalidOperation(String.format(Sys.Res.cannotCallBeforeResponse, 'get_responseData'));
    }

    return this._responseData;
}

function Sys$Net$XMLHttpSyncExecutor$get_statusCode() {
    /// <value type="Number"></value>
    if (arguments.length !== 0) throw Error.parameterCount();
    if (!this._responseAvailable)
    {
        throw Error.invalidOperation(String.format(Sys.Res.cannotCallBeforeResponse, 'get_statusCode'));
    }

    return this._statusCode;
}

function Sys$Net$XMLHttpSyncExecutor$get_statusText() {
    /// <value type="String"></value>
    if (arguments.length !== 0) throw Error.parameterCount();
    if (!this._responseAvailable)
    {
        throw Error.invalidOperation(String.format(Sys.Res.cannotCallBeforeResponse, 'get_statusText'));
    }

    return this._statusText;
}

function Sys$Net$XMLHttpSyncExecutor$get_xml() {
    /// <value></value>
    if (arguments.length !== 0) throw Error.parameterCount();
    if (!this._responseAvailable)
    {
        throw Error.invalidOperation(String.format(Sys.Res.cannotCallBeforeResponse, 'get_xml'));
    }

    var xml = this._responseData;
    if ((!xml) || (!xml.documentElement))
    {
        xml = new XMLDOM(this._responseData);
        if ((!xml) || (!xml.documentElement))
        {
            return null;
        }
    }
    else if (navigator.userAgent.indexOf('MSIE') !== -1)
    {
        xml.setProperty('SelectionLanguage', 'XPath');
    }

    if ((xml.documentElement.namespaceURI === "http://www.mozilla.org/newlayout/xml/parsererror.xml") &&
        (xml.documentElement.tagName === "parsererror"))
    {
        return null;
    }

    if (xml.documentElement.firstChild && xml.documentElement.firstChild.tagName === "parsererror")
    {
        return null;
    }

    return xml;
}

function Sys$Net$XMLHttpSyncExecutor$abort() {
    if (arguments.length !== 0) throw Error.parameterCount();
    if (!this._started) {
        throw Error.invalidOperation(Sys.Res.cannotAbortBeforeStart);
    }

    if (this._aborted || this._responseAvailable || this._timedOut)
        return;

    this._aborted = true;

    this._clearTimer();

    if (this._xmlHttpRequest && !this._responseAvailable) {
        this._xmlHttpRequest.onreadystatechange = Function.emptyMethod;
        this._xmlHttpRequest.abort();

        this._xmlHttpRequest = null;
        var handler = this._webRequest._get_eventHandlerList().getHandler("completed");
        if (handler) {
            handler(this, Sys.EventArgs.Empty);
        }
    }
}

Sys.Net.XMLHttpSyncExecutor.prototype = {
    get_timedOut: Sys$Net$XMLHttpSyncExecutor$get_timedOut,
    get_started: Sys$Net$XMLHttpSyncExecutor$get_started,
    get_responseAvailable: Sys$Net$XMLHttpSyncExecutor$get_responseAvailable,
    get_aborted: Sys$Net$XMLHttpSyncExecutor$get_aborted,
    executeRequest: Sys$Net$XMLHttpSyncExecutor$executeRequest,
    getAllResponseHeaders: Sys$Net$XMLHttpSyncExecutor$getAllResponseHeaders,
    get_responseData: Sys$Net$XMLHttpSyncExecutor$get_responseData,
    get_statusCode: Sys$Net$XMLHttpSyncExecutor$get_statusCode,
    get_statusText: Sys$Net$XMLHttpSyncExecutor$get_statusText,
    get_xml: Sys$Net$XMLHttpSyncExecutor$get_xml,
    abort: Sys$Net$XMLHttpSyncExecutor$abort
}
Sys.Net.XMLHttpSyncExecutor.registerClass('Sys.Net.XMLHttpSyncExecutor', Sys.Net.WebRequestExecutor);

И в конце мы уведомим ASP.NET AJAX о том, что скрипт загрузился.

if (typeof(Sys) != 'undefined')
{
    Sys.Application.notifyScriptLoaded();
}

Пользоваться этим чудом не так легко, как хотелось бы, но достаточно просто для понимания:

function getServerTime() {
    // Instantiate a WebRequest.
    var wRequest = new Sys.Net.WebRequest();
    // Set the request URL.
    wRequest.set_url(PageMethods.get_path() + "/GetServerTime");
    // Set the request verb.
    wRequest.set_httpVerb('POST');
   
    wRequest.get_headers()['Content-Type'] = 'application/json; charset=utf-8';

    var executor = new Sys.Net.XMLHttpSyncExecutor();
    wRequest.set_executor(executor);
    // Execute the request.
    wRequest.invoke();

    if (executor.get_responseAvailable()) {
        return executor.get_object();
    }
    return false;
}

Когда вы используете ScriptService, вы не увидите этих сложностей, потому что ASP.NET генерирует подобные обертки самостоятельно. Но если вам нужны синхронные вызовы AJAX call — сорри, но придется поплясать с бубном. Полный пример можно найти здесь.

Tagged , , , ,

7 отзывов на 'Синхронный вызов методов страницы в библиотеке ASP.NET AJAX'

Подписаться на комментарии по RSS или TrackBack на 'Синхронный вызов методов страницы в библиотеке ASP.NET AJAX'.

1
Kigorw
сказал 14.09.2007 в 0.17

“Один из таких случаев — выполнение синхронного AJAX-вызова (Asynchronous JavaScript And XML — Асинхронный JavaScript и XML).” - прикольно фраза смотрится.

Что за случай, интересно?

2
Kigorw
сказал 14.09.2007 в 0.19

хотя может и полезно в случае если не хочется с колбеками связываться…

3
Dmytro Shteflyuk
сказал 14.09.2007 в 0.32

Угу, синхронный асинхронный вызов :-) Хотел обыграть как игру слов, но инглиша не хватило.

А случай простой. Перед отправкой формы (на onsubmit или клиентский onclick у кнопки) нужно получить с сервера некоторый ключ someCode, который использовать для обработки данных формы (в частности захэшировать md5(fieldValue+someCode)) и продолжить выполнение стандартного кода, который генерит ASP.NET (валидации там всякие и постбек). Муторно описал в общем, но задача есть.

Решить ее же можно по-другому (через AJAX) - на onclick кнопки повесить вызов AJAX и return false;, а в колбеке вставить код, который вызовет валидацию и сделает постбек (ClientScript.GetPostBackEventReference), но решение не очень универсальное. С синхронным вызовом все проще — получил код, а дальше пусть само как обычно работает.

4
Nicola
сказал 25.01.2008 в 13.24

Hi
Your post was very helpful to me thanks.
I have only one problem.
My PageMethod has a parameter.
How do you pass it ?
I tried

wRequest.set_url(PageMethods.get_path() + "/RunQuery("+JSON.stringify(Param)+")");

or

Sys.Net.WebServiceProxy.invoke('/Default.aspx', 'RunQuery', false, { Params: JSON.stringify(sSQL) }, null, OnErrorQuery);

but they both don’t work ..
Thanks in advance for any help / idea
Bye
Nicola

5
Dmytro Shteflyuk
сказал 25.01.2008 в 14.59

Hi Nicola,

If you want to use URL params (GET), try this:

var urlParams = {'param1':'value'};
wRequest.set_url(Sys.Net.WebRequest._createUrl(PageMethods.get_path()+"/RunQuery", urlParams));

But as I understand from your code, you need POST, so

var params = {'param1':'value'};
var body = Sys.Serialization.JavaScriptSerializer.serialize(params);
wRequest.set_body(body);
6
Nicola
сказал 25.01.2008 в 15.43

Hi Dmitro,

Yes I need POST parameter.
It works !!
Thank you very much
Das vidanje!
Nicola

7
emiliano
сказал 04.03.2008 в 10.45

hi,
I used your solution but it doesn’t work with firefox.
The strange is that, if I install the Add-on firebug it work, but if I disable firebug no.

Оставить отзыв

Вы можете использовать простые теги форматирования HTML (вроде <a>, <ul> and others). Чтобы вставить пример код, используйте <code lang="php">$a = "hello";</code> (поддерживаемые языки: ruby, php, yaml, html, csharp, javascript). Также Вы можете использовать <code>$a = "hello";</code>, синтаксис не будет подсвечен. Если вы не хотите использовать тег <code>, замените символ < на &lt;.

Отправить

 
Copyright © 2005 - 2008, Dmytro Shteflyuk