Dmytro Shteflyuk’s Home Dmytro Shteflyuk’s Home

thoughts about programming

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

(ASP.NET) · English (45,024 views)

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
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 о том, что скрипт загрузился.

1
2
3
4
if (typeof(Sys) != 'undefined')
{
    Sys.Application.notifyScriptLoaded();
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 — сорри, но придется поплясать с бубном. Полный пример можно найти здесь.

10 Responses to this entry

Subscribe to comments with RSS

Kigorw
said on 14.09.2007 at 0.17 · Permalink

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

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

Kigorw
said on 14.09.2007 at 0.19 · Permalink

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

Dmytro Shteflyuk
said on 14.09.2007 at 0.32 · Permalink

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

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

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

Nicola
said on 25.01.2008 at 13.24 · Permalink

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

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

or

1
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

Dmytro Shteflyuk
said on 25.01.2008 at 14.59 · Permalink

Hi Nicola,

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

1
2
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

1
2
3
var params = {'param1':'value'};
var body = Sys.Serialization.JavaScriptSerializer.serialize(params);
wRequest.set_body(body);
Nicola
said on 25.01.2008 at 15.43 · Permalink

Hi Dmitro,

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

emiliano @
said on 04.03.2008 at 10.45 · Permalink

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.

Mehmet @
said on 23.06.2008 at 12.57 · Permalink

In

1
function Sys$Net$XMLHttpSyncExecutor$executeRequest() {

at the end, before

1
    this._started = true;

insert

1
2
3
4
    if (navigator.appName != "Microsoft Internet Explorer" && navigator.appName != "Opera" && navigator.appVersion.indexOf('Safari') < 0)
    {
        this._onReadyStateChange(this._xmlHttpRequest);
    }
sheich
said on 20.01.2009 at 18.58 · Permalink

Mehmet, thank you a lot!

Remi Bourgarel @
said on 13.02.2009 at 12.53 · Permalink

Merci beaucoup

You save me a lot of time.

Comments are closed

Comments for this entry are closed for a while. If you have anything to say – use a contact form. Thank you for your patience.