пятница, 5 августа 2011 г.

AJAX- простая реаллизация.

Ну сколько не говори сыр - смешно не будет - простая реализация технологии AJAX наверно не самое главное, А вот сделать скрипт который устраивает меня и не тащит ни чего сложного ко мне в , чуть не сказал кровать.... тьфу тьфу тьфу... Но так что слабо сделать минимальный AJAX!!!

А я сделал. И он меня устраивает и не нужно мне диких jQuery которые только килобайтами накачивают мой трафик не делая больше того что мне лично нужно.
-- А если мне нужно сложнее -- себе под нос пробурчал Антип Ефграфыч
и опять засопел.
Спит . ну так бог с ним - мы и без него с усами
--- ушами ушами ушами.....---
гулко ответило эхо и сама исчезла в сетевой карте вместе с другом Аяксом.
var _ajax = window.ActiveXObject?
    new ActiveXObject('Microsoft.XMLHTTP')
      :(window.XMLHttpRequest?
        new XMLHttpRequest():false);
Вот такими кракозябами мы определим один общий на весь контент - канал для связи по AJAX и только им и будем пользоваться при передачи и приеме со своим сервером.
-- А с чужими как? ----встрепенулся Антип Ефрафыч.
А будто не знаешь, что мы на сторону не ходим. Ну да ладно, хотя стоит заметить что - кроссдоменность AJAX-ом не поддерживается. Почему - ну это уже вопрос безопасности, и нас пока не интересует. Надо просто запомнить - кроссдоменности - нет!!!
Итак что ж мы сделали? А мы определили разные возможности разных браузеров и запустили механизм АЯКСа. Теперь эта переменная и есть вход и выход для нашего объекта для связи. Разбирать я ее не буду, но только замечу что здесь сначала дается возможность слабым браузерам от инета (ИЕ и пр), а потом это же предложили современным, и в случае отсутствия и тех и других установили отсутствие возможности любовных связей с Аяксом. И ни каких сложных функций - просто переменная. В принципе могла быть и константой, но в этом случае - ее действия распространялись только на родной файл, и таким образом были бы приватными. А так же можно запросто убить Аякса! присвоив переменной значение любое но лучше 0 . Бр.. садизм какой!
Итак поехали дальше. Нас интересует как это использовать. В принципе используются два простейших варианта . Это GET и POST, есть и другие но пока нам не до них. Итак делаем функцию - которая выполняет посыл в виде _send(url,act) - типичный GET и _send(url,act,data) - типичный POST (есть данные)!!
Вот эта функцион перед нами
function _send(url,act){
  if(!_ajax) return;
Если нет AJAX-а ни чего не делаем, ну а далее по принципу последовательности
with (_ajax) {
    onreadystatechange = function(){
      return _hook(act)};
    if(arguments[2]) {
      open("POST",url,true);
      setRequestHeader('Content-type',
        'application/x-www-form-urlencoded');
      setRequestHeader('Connection','close');
    }else open("GET",url,true);
    send(arguments[2]);
  }
}
Первое что сразу смущает это задание некой функции в качестве переменной. Фактически мы запрограммировали таким образом реакцию на ответ , сразу оговорюсь именно успешный. Есть и другие, и этой переменной вставили реакцию на момент асинхронной передачи ответа от сервера, а сами занялись дальнейшими действиями по программам, или просто болтовней. И когда сервер ответит, и данные вернутся к нам - будет вызвана эта формальная функция, которая выполнит все что в ней заложено. А вот что конкретно мы заложим - мы определили в некой другом формальном контакте в виде переменной act - которые есть некий вход на исполняемую реакцию от чегото
--- Чего то сложно -- буркнул Антип Евграфыч
Нормально! Все нормально - нужно будут сами разберутся. Ну вот и этот вызов
function _hook(act){
  if(_ajax.readyState!=4) return;
  var h = _ajax.getResponseHeader('Content-Type');
  return act(_ajax,h);
}
Все здесь мы и определили наши контакты для входа в функцион, а именно первым аргументом будет ссылка на сам универсальный _ajax, а вторым аргументом - тип передаваемых данных, и еще в функции-реакции мы проверяем результат действия , т.е наличие не ошибки. И все. Теперь каким нибудь образом определив внешнюю функцию мы можем выполнить любой запрос по каналу AJAX. Причем по точкам входа можно все получить назад не опираясь на сам Аякс, а лишь подставив некую функцию в виде аргумента. Итак давайте посмотрим на примерах.
А в качестве примера - я покажу как я принимаю тот же знаменитый запрос в формате JSON
function _json(url,act){
  _send(url,function(a){
    if(!a.responseText) return;
    act(JSON.parse(a.responseText));
  })
}
Вот эта функция которая производит вызов GET и полученный ответ декодирует как JSON - возвращая данные как аргумент некой другой функции - эти данные обрабатывающие.
--------------
Все! и ни каких сложностей и накрутки чего то особливого.