Кросс-доменный 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);
}
}
}
К нерешенной проблеме относится то, что ответом на запрос является выполнение кода. И если Вам необходимо получить его в виде строки вроде 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 на примерах