Здесь я хотел бы рассказать о том, как легко и просто начать использовать Ajax в повседневной жизни для отправки данных из форм, получения ответа и пр.

Мы будем использовать библиотеку JQuery. Скачайте и сохраните файл на своем сайте.

в хеде страницы подключаем нашу библиотеку кодом

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>

Технология аякс состоит из трех основных составных:

-файл взаимодействия с пользователем (с формой, которую заполняет и отправляет пользователь, например), назовем его index.php

– файл библиотеки позволяющей передавать данные на серверный скрипт

– сам серверный скрипт, в нашем случае написанный на php, и обрабатывающий передаваемые аяксом данные.

Представим ситуацию, когда вам нужно передать какие то данные на сервер без перезагрузки страницы. Например, пользователю нужно ввести в форму свои имя и фамилию, и это должно пойти в базу данных по нажатию кнопки “отправить”.

Рисуем следующие поля

<p>
  <label>Имя
    <input type="text" name="name" id="name" />
  </label>
</p>
<p>
  <label>Фамилия
    <input type="text" name="lastname" id="lastname" />
  </label>
</p>
<p>
  <label>
    <input type="submit" name="go" id="go" value="Отправить" />
  </label>
</p>

Сюда пользователь будет вводить данные. Сохраним файл под именем index.php

Затем создадим файл serverside.php со следующим содержимым

<?
$host 		= "localhost";
$dbuser 	= "user";
$dbpass 	= "pass";
$db 		= "dbname";
$link = mysql_connect($host, $dbuser, $dbpass) or die("не могу соединиться"); 
mysql_select_db($db, $link); 

if (!empty($_POST))
	{
		$sql="INSERT INTO table (name,lastname) VALUES ('".mysql_real_escape_string($_POST['name'])."','".mysql_real_escape_string($_POST['last'])."')";	
		if (mysql_query($sql)) {echo 'Success!';}
	}
?>

Что нам нужно сделать: нам нужно как то передать данные из файла index.php файлу serverside.php без перезагрузки страницы. Пишем JS часть. Вставляем ее в хед документа после подключения библиотеки JQuery.

<script type="text/javascript" language="javascript">
function senddata() {
$.ajax({
  type: 'POST',
  url: "serverside.php",
  data: { name: $('#name').val(), lastname:$('#lastname').val()  }}
)}

</script>

что здесь происходит:

type: ‘POST’ – говорим библиотеке, что будем использовать пост запрос

url: “serverside.php”, – скрипт на который будет идти пост запрос

data: { name: $(‘#name’).val(), lastname:$(‘#lastname’).val() } – данные, которые мы ему передадим

$(‘#name’).val() – фича JQuery, аналог записи document.getElementById.value, то бишь получение значение элемента по его ID.

Далее нам нужно сделать так, чтобы на какие то наши события шла отправка этих данных, вешаем на нашу кнопку он клик

<input id="go" onclick="senddata();" type="submit" name="go" value="Отправить" />

и по нажатию на кнопку срабатывает функция, отправляющая наши данные.

Для разнообразия, давайте получим ответ со скрипта serverside.php

Если помните, мы там написали вывод строки “Success!” если все будет ок, и данные вобьются в базу. Немного обновим наш JS код, отправляющий данные на серверную часть программы

function senddata() {
$.ajax({
  type: 'POST',
  url: "serverside.php",
  data: { name: $('#name').val(), lastname:$('#lastname').val()  },
 success: function(data){$('#resp').html(data)}}
)}

этим мы говорим, что полученный от сервера ответ, в случае успеха нужно вставить как html код внутри объекта с идентификатором resp, теперь давайте создадим этот объект, например контейнер div, и поместим его чуть ниже формы отправки

<div id="resp"></div>

и мы будем получать сообщение “Success” если корректно сработал запрос, и все это без перезагрузки страницы!

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