AJAX. С чем это едят?


Если вы каким-то чудом ещё не знаете что такое AJAX то вы пришли по адресу.

Простыми словами можно сформулировать так: AJAX – это когда с помощью JavaScript можно запрашивать и получать данные с сервера не перезагружая станицу сайта.

Основные библиотеки позволяющие использовать технологию AJAX: Prototype и(или) JQuery.

Листинг 1. подключение библиотек prototype, jquery:

<script type="text/javascript" src="prototype.js"></script>
// и(или)
<script type="text/javascript" src="jquery.js"></script>

Jquery – это вообще полезная вещь, так как данная библиотека предлагает разработчику большое количество методов для манипуляции элементами документа и их свойствами и позволяет находить простые и изящные решения для, казалось бы, сложных задач.

Примеры:

//prototype
new Ajax.Request( 'some.php',
{
	method: 'get',
	onSuccess: function( transport ){
		var responseStr = transport.responseText || "Пусто...";
		alert( responseStr );
	},
	onFailure: function(){
		alert( 'Ошибка...' )
	}
});
 
 
//jquery
$.ajax({
  type: "POST",
  url: "some.php",
  data: "name=John&amp;location=Boston",
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});
 
// или
$.get("test.cgi",
  { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  }
);
 
// ну или
$.post("test.cgi",
  { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  }
);

Полезнее всего использовать AJAX для улучшения юзабилити в таких приложениях как голосование, корзина, букмарки (..да, много всего) ну и в CMS. Наполнять страницу контентом нужно традиционно, статически, а вот всякий “мусор” типа декора или счётчиков подгружать динамически с применением AJAX.

Изначально сайт нужно разрабатывать без применения AJAX, а потом вкручивать его как дополнение. Посетители не использующие JS смогут без ошибок просматривать сайт, ну и нельзя забывать про индексацию страниц поисковиками. Со всеми своими плюсами AJAX легко может оказать негативное влияние на СЕО.

Ссылочки:

, , , ,

  1. #1 by Dmitry on 23.11.2010 - 7:08 pm

    Я использую mootools.
    Недавно столкнулся с проблемой.
    Нужно было послать ajax запрос и в зависимости от ответа продолжить определенные действия.

    Все это вызывается вызывается Функцией makeBookmarks();

    Но столкнулся с проблемой: не могу подождать выполнения запроса.
    Вот код.

    var qwerty = false;
    var i = 0;
    var qwerty1= 0;

    var myRequest = new Request.JSON({
    method : ‘get’,
    url : ‘/member/index.php’,
    onComplete : function (bookmarks)
    {
    // некоторые опперции с qwerty1;
    qwerty = true;
    }
    });
    myRequest.send(‘mod=reader&act=get_bookmarks&id=79′);

    while(1)
    {
    if (qwerty)
    break;
    i++;
    }

    // дальше тоже продолжается обработка
    // но break не сработывает.
    Почему?????

    • #2 by proglammer on 23.11.2010 - 7:46 pm

      Dmitry, единственную ошибку, которую я вижу, и то, не факт, что это ошибка, это неправильная обработка объекта JSON. Я совсем недавно с ним столкнулся и пока не совсем его освоил, но у меня JSON объекты не обрабатывались, если объект приходил с сервера в неверном формате. Может пришли свой код серверного скрипта, посмотрим на него?

      • #3 by Dmitry on 24.11.2010 - 2:54 pm

        В этом та и вся фишка.
        Все работает.

        function get_bookmarks($id)
        {
        $json = new Services_JSON();
        $bookmarks = findBy($id);
        $j = new Services_JSON();

        echo $j->encode($bookmarks);
        exit;
        }

        findBy возвращает 0 если ничего не нашел.
        Здесь ошибки быть не может.

        Кстати забыл сказать, решение данной проблемы я нашел:

        нужно добывить параметр
        async : false
        в myRequest.

        Но этот баг задел меня. Спать не могу спокойно .
        Почему ???

        • #4 by proglammer on 24.11.2010 - 9:39 pm

          аа, ну да… блин… а я то и сути не совсем понял первого вопроса:) конечно, все верно. в классе Request параметр async по умолчанию стоит true, т.е. используется асинхронный запрос, соответственно, браузер не дожидается ответа от сервера, а продолжает что-то там свое делать… но если установить его на false, тогда браузер “замрет” на время, пока не получит ответа от сервера. если тебе нужно было именно это, заставить брауз. замереть, то да – ты нашел решение :) поздравляю! И спасибо, что поделился опытом! ;) удачи и далее в решениях!

  2. #5 by Dmitry on 25.11.2010 - 10:11 am

    Не за что.
    Всегда рад помочь.

(никто не узнает)

Код на картинке: