[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Кросдоменный JS транспорт от bodja
Форум PHP программистов > JavaScript
bodja
11.05.2012 - 15:06
Ни для кого не секрет ,что Асинхронный JavaScript и XML (AJAX)
ключевая технология нового поколения сайтов, причисляемых к WEB 2.0
Для кого -применение AJAX - это просто круто,для кого- экономит трафик и увеличивает скорость загрузки,
лично для меня AJAX позволяет поставить полноценный движок сайта на JS ,так как
нет перезагрузки страниц и JS соответственно не сбрасывается.
Эта статья посвящена Кроссдоменному Асинхронному JavaScript Транспорту
известному еще под названием Кроссдоменный AJAX или JSONP.
Назвал так ,потому что считаю ,что аналогичные названия не очень точно отвечают
функционалу и создают только путаницу.
Сама техника не нова,но в статьях ,что нашел,на эту тему много воды и неточной информации и путаницы.
Плюс я с кусочков собрал достаточно небольшую и удобную в использовании универсальную функцию.

ИТАК ,ДЛЯ ЧЕГО ЭТО НУЖНО ???

1 У этой техники две стороны одной медали,все очень просто,
если вы предоставляете скрипт с этой техникой в качестве сервиса,
типа анимационная либа,плагин,API,CMS,лайк социалки,счетчик посетителей,отправка почты ,биллинг,поиск,
сервис постов и т.д.-вы имеете этот сайт как хотите ,если вы сами таким пользуетесь - вас имеют как хотят.
Тоесть можно делать все ,добавлять рекламу,тырить куки,перенаправлять посетителей,
отслеживать что ввел посетитель,даже если он это передумал отправлять или просто положить сайт.
При этом скрипт загружается динамически на клиенте и никаких следов потом не остается.

2 Для "централизации" сети своих сайтов,например портфолио,магазины,спутники,SEO.
Позволит располагать сайты
на совсем бесплатных HTML хостингах при этом у них функционал PHP,всю инфу сети сайтов можно собирать\отдавать на
"центральный пульт" с PHP хостингом,получать статистику,почту,держать коменты,держать базу товаров,менять рекламу,
включать\отключать сайты.

3 Для программирования,например динамическая загрузка необходимых библиотек,как у себя так и со сторонних сервисов,
предоставление своих работ\проектов\сайтов на тестовый период.

4 Придумайте сами,что нибудь.

Теперь я думаю вам понятно откуда взялось мое отношение к разным сторонним либам,плюшкам и фреймворкам.
И почему я проедпочитаю "велосипедировать" на чистом JS. wink.gif biggrin.gif

ИТАК ,САМА ФУНКЦИЯ.
проверено ИЕ6,опера,хром,фф.

Цитата
function _j(get, code) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = get + '?rnd=' + Math.random();
document.body.appendChild(s);
var f = function () {eval(code);document.body.removeChild(s);}
if (navigator.appName !== "Microsoft Internet Explorer") {
  s.onload = function () {f();}
} else {
  s.onreadystatechange = function () {
   if (s.readyState === 'loaded') {f();}
  }
}
}


Вызываем ее
Цитата
_j('домен с гет запросом','выполняемый код после загрузки скрипта')


например
1 делаем запрос
Цитата
_j('http://site.com/test.php?get1=1&get2=2','alert(data)');

2 вызвращаем из test.php строку
Цитата
data="Hello Word!"

3 После загрузки срабатывает alert c содержимым переменной data,то есть Hello Word!
Вот и все.

Теперь детали.
Функция фактически генерирует и добавляет в DOM вот такой элемент.
Цитата
<script type="text/javascript" src="http://site.com/test.php?get1=1&get2=2"></script>

поэтому естественно ,мы можем передать только GET запросы и принять только JS код.
Из за этого нам необходимо всегда генерировать JS код при ответе.
Функция так же назначает событие ,которое срабатывает после загрузки скрипта и выполняет код
который мы передали во втором аргументе.По этой причине, мы код во втором аргументе
всегда передаем в строковом представлении,если в коде встречаются кавычки ,мы их должны экранировать.
После выполнения кода ,еслемент <script> удаляется из DOM,но несмотря на это
код скрипта остается в памяти браузера и может быть использован.
Math.random() используется в запросе ,для того ,чтобы JS код не кешировался браузером и генерил новый запрос.

Здесь демонстрация работы.
Получаем\передаем данные из одного домена в другой.

Вот и все ,будут вопросы - спрашивайте. biggrin.gif

Еще ,для справки,захотелось мне посмотреть фильма... biggrin.gif biggrin.gif biggrin.gif
И вот что я увидел порывшись в загруженом на его сайте код.
Яндех
Свернутый текст
var b = aX.createElement("script");
b.setAttribute("src", location.protocol + "//clck.yandex.ru/jclck/dtype=stred/pid=52/cid=70685/path=" + a + "/rnd=" + Math.round(Math.random() * 100000) + "/*" + encodeURIComponent(location.href));
aN.appendChild


Контакт
Свернутый текст
function attachScript(url) {
setTimeout(function() {
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = url || w.fastXDM.helperUrl;
waitFor(document, 'body', function() {
document.getElementsByTagName('HEAD')[0].appendChild(newScript);
});
}, 0);
}

Майл
Свернутый текст
with(document.getElementsByTagName('head')[0].appendChild(document.createElement('script'))){
type = 'text/javascript';
src = this._modulePath+ module+ modrelease+ module+ '.js' +modver;
if(deferLoad){
defer = "defer";
}
}

квери
Свернутый текст
f.ajaxTransport("script", function (a) {
if (a.crossDomain) {
var d,
e = c.head || c.getElementsByTagName("head")[0] || c.documentElement;
return {
send : function (f, g) {
d = c.createElement("script"),
d.async = "async",
a.scriptCharset && (d.charset = a.scriptCharset),
d.src = a.url,
d.onload = d.onreadystatechange = function (a, c) {
if (c || !d.readyState || /loaded|complete/.test(d.readyState))
d.onload = d.onreadystatechange = null, e && d.parentNode && e.removeChild(d), d = b, c || g(200, "success")
},
e.insertBefore(d, e.firstChild)
},
abort : function () {
d && d.onload(0, 1)
}
}
}
});

фейсбук
Свернутый текст
jsonp : function (a, b, c, d, e) {
var f = FB.guid(),
g = document.getElementsByTagName('script')[0],
h = document.createElement('script');
d = FB.copy({}, d);
if (a === 'graph' && c !== 'get')
d.method = c;
d.callback = 'FB.ApiServer._callbacks.' + f;
var i = (FB.getDomain(a) + b + (ES5(b, 'indexOf', true, '?') > -1 ? '&' : '?') + FB.QS.encode(d));
if (i.length > 2000)
throw new Error('JSONP only support a maximum of 2000 bytes of input.');
FB.ApiServer._callbacks[f] = function (k) {
e && e(k);
delete FB.ApiServer._callbacks[f];
h.parentNode.removeChild(h);
};

Все ,на большее у меня терпения не хватило,как не кликнеш,все новые скрипты грузятся.
Делайте выводы.



Спустя 29 минут, 12 секунд (11.05.2012 - 15:36) redreem написал(а):
год назад мне стукнула идея сделать двиг полностью по этой технологии, сделал прототип, попробовал, потрогал и понял что его программирование - это ад! зарубил и выкинул smile.gif ну а в качестве разных плюшек, безусловно бывает полезно использовать... в тех же самых счетчиках посещения например.

Спустя 9 минут, 27 секунд (11.05.2012 - 15:45) bodja написал(а):
redreem
Я эту технику немного доработал.
Везде пишут про калбек и JSON формат.
Здесь же достаточно просто добавить к данным data= и поехали.
Отличатся от обычного аякса уже не будет,разве что нет POST запросов.
Вот пример post.php который выбрасывает коменты.

<?php
$p=intVal($_GET['page']);
$f=file('./text.txt');
$h='';
for($i=($p-1)*5;$i<$p*5;$i++){
$h.=$f[$i];
}
//здесь ключевые 3 строчки.
$a=array("\r\n","\r","\n");
$h=str_replace($a,"",$h);
$h='data=\''.$h.'\';';
echo $h;
?>

Спустя 2 минуты, 9 секунд (11.05.2012 - 15:47) redreem написал(а):
да понятно что работает, просто сильно усложняется разработка. приходится еще к контроллерам на php тягять js, учавствующие в модуле. говорю же, "потрогал и плюнул", слишком муторно получается.
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2025 Invision Power Services, Inc.