Иногда нам нужно выполнять такие задачи, которые разработчики библиотек даже не представляли. Один из таких случаев — выполнение синхронного 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 — сорри, но придется поплясать с бубном. Полный пример можно найти здесь.

“Один из таких случаев — выполнение синхронного AJAX-вызова (Asynchronous JavaScript And XML — Асинхронный JavaScript и XML).” – прикольно фраза смотрится.
Что за случай, интересно?
хотя может и полезно в случае если не хочется с колбеками связываться…
Угу, синхронный асинхронный вызов :-) Хотел обыграть как игру слов, но инглиша не хватило.
А случай простой. Перед отправкой формы (на onsubmit или клиентский onclick у кнопки) нужно получить с сервера некоторый ключ someCode, который использовать для обработки данных формы (в частности захэшировать md5(fieldValue+someCode)) и продолжить выполнение стандартного кода, который генерит ASP.NET (валидации там всякие и постбек). Муторно описал в общем, но задача есть.
Решить ее же можно по-другому (через AJAX) – на onclick кнопки повесить вызов AJAX и return false;, а в колбеке вставить код, который вызовет валидацию и сделает постбек (ClientScript.GetPostBackEventReference), но решение не очень универсальное. С синхронным вызовом все проще — получил код, а дальше пусть само как обычно работает.
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
or
but they both don’t work ..
Thanks in advance for any help / idea
Bye
Nicola
Hi Nicola,
If you want to use URL params (GET), try this:
2
wRequest.set_url(Sys.Net.WebRequest._createUrl(PageMethods.get_path()+"/RunQuery", urlParams));
But as I understand from your code, you need POST, so
2
3
var body = Sys.Serialization.JavaScriptSerializer.serialize(params);
wRequest.set_body(body);
Hi Dmitro,
Yes I need POST parameter.
It works !!
Thank you very much
Das vidanje!
Nicola
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.
In
at the end, before
insert
2
3
4
{
this._onReadyStateChange(this._xmlHttpRequest);
}
Mehmet, thank you a lot!
Merci beaucoup
You save me a lot of time.