Russian Ajax Community – Всё об Ajax

Для многих, начавших изучение Ajax является неприятным сюрпризом, что объект XMLHttpRequest не разрешает кросс-доменные запросы. В частности, это не позволяет использовать технологию Ajax для разработки клиентского кода для веб-сервисов (без использования ретрансляции запросов через "родной" веб-сервер). В новой спецификации объекта XMLHttpRequest ограничение на кросс-доменные запросы снято, однако насколько скоро это будет поддержано разраотчиками веб-браузеров остается только предполагать.

Использовать кросс-доменный Ajax можно уже сегодня при помощи динамического создания элементов SCRIPT и загрузки кода JavaScript. При этом возникают несколько проблем, часть из которых можно решить, а часть из которых не поддается простому решению. Давайте рассмотрим эти проблемы.

Прежде всего в разных веб-браузерах код будет действовать по-разному и потребуются разные подходы. Например, в некоторых веб-браузерах загрузка начинается в момент присвоения свойству src нового значения, а в других - только при присоединении элемента SCRIPT к дереву DOM документа. В некоторых веб-браузерах можно повторно использовать элементы SCRIPT для загрузки новых скриптов, а других нет.

Проблемой является вызов функции-обработчика и передача ему параметров. В спецификации HTML, к сожалению не специфицированы события, вызывающиеся по загрузке скрипта (аналогично body.onload) и эти события у различных версий веб-браузеров будут разные.

Вы, наверное, уже заждались кода, решающего эти проблемы. Вот он. Некоторые подробности обсудим далее.


function sendScriptRequest(url, httpParams, callback, callbackArgsArray) {
var currentScript = document.createElement("SCRIPT");
if (httpParams)
httpParams="?rand=" + Math.random() + "&" + httpParams;
else
httpParams="?rand=" + Math.random();
currentScript.ajax_readyState = false;
currentScript.onload = scriptCallback(currentScript, callback, callbackArgsArray);
currentScript.onreadystatechange = scriptCallback(currentScript, callback, callbackArgsArray);
currentScript.src = url + httpParams;
document.getElementsByTagName("script")[0].parentNode.appendChild(currentScript);
}function scriptCallback(currentScript, callback, callbackArgsArray){
return function() {
if (currentScript.ajax_readyState)
return;
if (! currentScript.readyState || currentScript.readyState == "loaded" || currentScript.readyState == "complete") {
currentScript.ajax_readyState = true;
callback.apply(currentScript, callbackArgsArray)
currentScript.parentNode.removeChild(currentScript);
}
}
}
К запросу добавляется параметр rand=Math.random(). Это необходимо, если скрипты генерируются динеамически и Вам необходимо избежать использование кэшированных скриптов. Если скрипты статические - можно удалить этот параметр.

К нерешенной проблеме относится то, что ответом на запрос является выполнение кода. И если Вам необходимо получить его в виде строки вроде responseText, Вам придется в генерируемом сервером скрипте присвоить єто значение переменной, например:

var responseText = "abc123" ;

Тогда вызов функции может быть таким


sendScriptRequest("http://test123.com", "a=1&b=2",myCallback, ["test123"]);
function(a) {
alert(responseText); // это переменная из загружаемого скрипта var responseText = "abc123" ;
alert(a) ; этот параметр задается при вызове функции как ["test123"]
}

Более подробно об этом и многом другом Вы можете прочитать в моей книге Овчаренко А. Ajax на примерах

Опубликовано 10.12.2008 17:55 и размещено в рубрике Ajax это просто, Уроки и примеры, Книги. Вы можете следить за комментариями, подписавшись на RSS 2.0 ленту этого сообщения. Вы можете оставить комментарий или trackback со своего сайта.