CSSing – Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.

Аякс за 30 секунд

Перевожу заметку с которой я начал свое знакомство с аяксом.
Находится на сайте Rasmus'a - Rasmus' 30 second AJAX Tutorial.
Мой вольный перевод.
Вообще сам Аякс я считаю немного обманом. Многие использовали те же самые приемы задолго до того как они вдруг стали "Аяксом". И эти вещи совсем не такие сложные как многие считают. Вот простой пример из одного из моих приложений.
Сначала Javascript:

function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == 'Microsoft Internet Explorer'){
        ro = new ActiveXObject('Microsoft.XMLHTTP');
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}

var http = createRequestObject();

function sndReq(action) {
    http.open('get', 'rpc.php?action='+action);
    http.onreadystatechange = handleResponse;
    http.send(null);
}

function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        var update = new Array();

        if(response.indexOf('|' != -1)) {
            update = response.split('|');
            document.getElementById(update[0]).innerHTML = update[1];
        }
    }
}

Этот код создает обьект запроса, сам запрос и функцию для его принятия и распарсивания(по названиям, собственно, нетрудно догадаться). Для использования вам нужно включить этот скрипт в вашу страницу. (<script type="text/javascript" src="js.js"></script>)
Теперь для того чтобы послать запрос нужно его прицепить к какому-нибудь событию. Например onclick или поместив прямо в href вот так:

1. <a href="javascript:sndReq('foo')">[foo]</a>

В rpc.php у вас может быть примерно такой код:

1. switch($_REQUEST['action']) {
2. case 'foo': /*...action=foo...*/
3. /* тут например запрос к базе*/
4. echo "foo|foo done";
5. break;
6. ...
7. }

1. <div id="foo">
2. </div>

1. <div id="foo">
2. foo done
3. </div>

Обобщить этот подход, например для отсылки нескольких переменных, было бы очень просто, примерно так:

1. function sndReqArg(action,arg) {
2. http.open('get', 'rpc.php?action='+action+'&arg='+arg);
3. http.onreadystatechange = handleResponse;
4. http.send(null);
5. }

А функцию handleResponse можно легко расширить для более интересных целей, чем просто замещение содержимого ДИВа.

Автор - Rasmus

В конце

Хотя бы потому, что лично мне претит использовать все эти навороченные библиотеки. Это как использовать сложную ЦМС для сайта с 3 статическими страницами. Такие вот ассоциации. И это не говоря о пушках и воробьях.

Ваше мнение по поводу тюториала приветствуется!