Как я уже говорил, начал писать новый крупный проект, но перед этим решил потренироваться на малом стартапе, который я представлю в ближайшее время. Задачей было понять структуру MVC фреймворка CodeIgniter, а также выучить хотя бы азы JavaScript и AJAX.
Изначально мне казалось, что изучение JS будет очень сложной и муторной задачей. Как оказалось нет, просто в моем понимание, наверное изначально сложился стереотип о том, что JS это что-то неуклюжее и корявое. Все те кто собирается выучить его в ближайшее время советую, почитать статейки для начинающих, которых кучу в интернете, а если есть опыт кодинга в других языках, то вообще классно, к примеру JS, во многом похож на PHP со смесью Basic. Я так его представляю :)

Следующей целью был AJAX, о котором как раз таки я хотел бы сегодня поговорить. В первую очередь, для меня было вникнуть в него как можно скорее и использовать без особых затрудней. Но так как, если писать на чистом JS, то получаеться громадный код, который к томуже не кросбраузерный, т.е с IE могут быть проблемы. Поэтому решил снова прибегнуть к помощи сторонних библиотек. Такой оказалась Prototype.
Она предназначена не только для выполнения асинхронных запросов, но также делает общение с JS намного приятнее и удобнее. Что я имел введу вы можете прочесть в этой статье.
Нас сейчас в первую очередь интересует AJAX. И так одной библиотекой это дело конечно же не обойдется, для этого я написал отдельную функцию для выполнения запросов в одно касание.

Листинг данной функции:

function changeMain(v,onform,urlto,supraz) {
  //supraz='main';
  var loado='';
  $(supraz).hide();
  loado='loading';
  $(loado).show();

  var doo="";
  if (onform)
  {
  for (var i = 0; i < $(v).length; i++) {
    if ($(v).elements[i].name!='')
    if ($(v).elements[i].type!='checkbox')
    {doo = doo + $(v).elements[i].name + "=" + $(v).elements[i].value + "&";}
    else
    {doo = doo + $(v).elements[i].name + "=" + $(v).elements[i].checked + "&";}
  }
  }
  else
  {
    doo=v;
  }

  new Ajax.Updater(supraz, urlto,
    { method: 'post',
      parameters: "?"+doo,
      onComplete: function () {
        $(loado).hide();
        $(supraz).show();
      }
    }
  );
}

Вызов функции происходит таким образом:

changeMain ( имя формы либо POST/GET параметры, передавать параметры формы (true) либо (false), url скрипта, id тега в который будет выведен результат );

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

<div id="loading" style="display: none;text-align:center;"><img src="/images/ajax_load.gif"></div>

Картинки загрузки вы можете выбрать и перекрасить под себя на специализированном сервисе.

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

<div id=”main”>пока ничего нету</div>

Последний штрих, добавьте ссылку на скрипт Prototype в head.

<script type="text/javascript" src="/prototype.js"></script>

Пример страницы с запросом:

<html>
<head>
<title>AJAX</title>
<script type="text/javascript" src="/prototype.js"></script>
<script type="text/javascript" src="/nashifunkcii.js"></script>
</head>
<body>
  <div id="main">Нажми на ссылку ниже, чтобы увидеть результат!</div>
  <div id="loading" style="display: none;text-align:center;"><img src="/images/ajax_load.gif"></div>
  <a href="#" onClick="changeMain('text=YES&show=true',false,'/view.php','main'); return false;">НУКА!</a>
</body>
</html>

Все теперь можно запускать и тестировать. Согласитесь не сложно. Конечно это малая часть того, что можно реализовать, но для моего проекта этого вполне хватило.

Сегодня вы можете стать первыми бета тестерами моего маленького стартапа: Sewin.Beta. Сразу скажу Whois работает не стабильно.
Рассказывать о его предназначение и функциях не стану, думаю вы и так поймете. Подробнее уже в релизе.

Немного ссылок по теме:
Аякс по-русски
AllAjax
Ajax Load - картинки загрузки