аватар |

Уроки / Ajax /

Пример работы Ajax и PHP с демонстрацией

Теперь один из самых долгожданных уроков в теме - реализация и пример работы Ajax и PHP. На данный момент подобные механизмы есть повсюду - социальные сети, форумы, интернет-магазины. В этом примере мы научимся создавать свой блок комментариев.


Как же взаимодействуют Ajax и PHP на примере


Для создания примера достаточно создать два файла (ajax.html и get_ajax.php) и вставить в них содержимое, указанное ниже. Но сначала плюшки - демонстрация работы!

Демонстрация Скачать исходники


Теперь к созданию. Делаем по шагам:

1. Создаём клиентский html-файл. С кнопками и полями)
2. Назовём его ajax.html
3. Вставляем в него код, указанный ниже.

Текст в ajax.html (в качестве примера)

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Ajax + PHP: пример работы - комментарии</title>
<script Language="JavaScript">
function XmlHttp()
{
var xmlhttp;
try{xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}
catch(e)
{
 try {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} 
 catch (E) {xmlhttp = false;}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined')
{
 xmlhttp = new XMLHttpRequest();
}
  return xmlhttp;
}
 
function ajax(param)
{
                if (window.XMLHttpRequest) req = new XmlHttp();
                method=(!param.method ? "POST" : param.method.toUpperCase());
 
                if(method=="GET")
                {
                               send=null;
                               param.url=param.url+"&ajax=true";
                }
                else
                {
                               send="";
                               for (var i in param.data) send+= i+"="+param.data[i]+"&";
                               // send=send+"ajax=true"; // если хотите передать сообщение об успехе
                }
 
                req.open(method, param.url, true);
                if(param.statbox)document.getElementById(param.statbox).innerHTML = '<img src="wait.gif">';
                req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                req.send(send);
                req.onreadystatechange = function()
                {
                               if (req.readyState == 4 && req.status == 200) //если ответ положительный
                               {
                                               if(param.success)param.success(req.responseText);
                               }
                }
}
</script>
</head>
<body>
<div id="status" style="width:470px;background:#fff;padding:30px 10px 30px 10px;border:solid 5px #D1D1D1;">
Ни одного комментария пока нет.
</div>

                <form action="get_ajax.php">
                <p><b>Оставьте ваш комментарий</b></p>
                <p><textarea id="area_1" name="area_1" style="height:50px; width:500px;padding:10px;">Введите имя</textarea></p>
                <p><textarea id="area_2" name="area_1" style="height:100px; width:500px;padding:10px;">Текст сообщения</textarea></p>
                <input type='button' value='Сохранить комментарий' onclick='
                               ajax({
                                                               url:"get_ajax.php",
                                                               statbox:"status",
                                                               method:"POST",
                                                               data:
                                                               {
                                                                              first_area:document.getElementById("area_1").value,
                                                                              second_area:document.getElementById("area_2").value
                                                              },
                                                              success:function(data){document.getElementById("status").innerHTML=data;}

                                               })'
                >
                </form>
</body>
</html>

4. Теперь создаём php-файл с обработкой данных.
5. Назовём его get_ajax.php
6. Вставляем код указанный ниже (надеюсь, что после предыдущих уроков понятно, что в нём и к чему. Если есть вопросы, то просмотрите последние 2-3 урока).

<?php 
header("Content-type: text/plain; charset=utf-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
sleep(1); // время ожидания
// echo "Ajax проработал запрос";


                // запишем время коммента по Мск, потом сами выберите часовой пояс
                // подробнее тут    http://tradebenefit.ru/vivod-vremeni-s-uchetom-chasovogo-poyasa
                date_default_timezone_set("UTC"); // Можно установить часовой пояс настроив его
        date_default_timezone_set('Europe/Moscow'); // Например, для Москвы
        echo "<small>".date("Y-m-d H:i:s")."</small>";
        
while(list ($key, $val) = each ($_POST))
{

                $val = iconv("UTF-8","UTF-8", $_POST[$key]);
                echo "<pre>".stripslashes($val)."</pre>"; // обработаем, чтобы никто не баловался

}

?>

7. Модуль готов к работе. Пока комментарии не сохраняются, для этого нужно только создать таблицу в базе данных и создать INSERT и SELECT запросы с данными для записи и вывода комментариев соответственно. И можно ставить на сайт)
Наслаждаемся работой!


Где чаще всего используют комбинацию ajax + php?


1. Добавление и редактирование комментариев
2. Лайк, оценка, голосование
3. Авторизация на сайте
4. Асинхронный поиск по сайту
5. Для пошагового заполнения форм
6. Динамичный просмотр контента


Итак, код вполне понятный, простой, местами с комментариями. Анализируйте.
Удачи в мире web! Спасибо за внимание!
 



Распечатать
Похожие статьи
15 июня 2013 10:58 Методы и свойства объекта XMLHttpRequest
27 августа 2013 16:55 Пример работы Ajax и txt-файла
27 августа 2013 16:42 Синхронная и асинхронная передача данных в Ajax
07 июня 2013 13:32 Что такое Ajax?
15 июня 2013 10:57 Обмен данными в Ajax


Комментарии к статье (vk.com)