-
PHP
-
Статьи -
Книги -
Софт -
Уроки
-
-
MySQL
-
Статьи -
Книги
-
-
JavaScript
-
Статьи -
Книги -
Уроки
-
- → Программирование
- → JavaScript
- → Статьи
AJAX + PHP: применение, взаимодействие, пример
В данной статье поговорим о взаимодействии ajax с php. Как связать работу ajax скрипта и php кода? Как применить ajax в веб разработке? Если вас интересуют такие вопросы, вы найдете на них ответы в нашей статье. А также примеры ajax php кода.
Наши цели
Применение ajax + php
Для того, чтобы понять, нужен ли нам вообще ajax с php, давайте разберемся для чего он может быть полезен. Применение ajax+ php может быть разнообразным, единственное, то что, нельзя конструировать элементы страницы с помощью данной технологии, которые несут в себе релевантность для поисковых систем. Потому что ajax подгружает элементы страницы после ее загрузки при вызове js событий, но как нам известно, поисковые системы не умеют читать javascript кода, поэтому нужно тщательно выбирать где нужно, а где не нужно применять ajax с php.
Где можно применить ajax + php?
1. Добавление нового комментария
2. Голосование
3. Авторизация на сайте
4. Организация поиска на сайте (автозавершение)
5. Пошаговая регистрация пользователя на сайте
6. Подписка на e-mail
7. Просмотр фотографий
И другие…
Как видите вариантов применения ajax + php масса. То есть, можно применить там, где перезагрузка страницы будет не уместной, где нужно просто обменяться данными с сервером.
Где не стоит применять ajax + php
Мое мнение объективное, может вы думаете иначе, но полагаясь на мой опыт скажу что ajax + php не стоит применять:
1. Для реализации меню
2. Реализации вкладок на странице (Например: когда в интернет магазине на странице товара вы видите обзор, информация, комментарии, фото, видео … не нужно делать загрузку данных при переключении данных вкладок.)
И другие негативные примеры, которые могут навредить лучшему ранжированию вашей страницы.
Взаимодействие ajax с php
По сути, технология ajax не может существовать без php скриптов, так как ajax, только отправляет данные на сервер и принимает обратный ответ, при этом не перезагружая страницы. Поэтому правильнее задать вопрос, как связать работу ajax и php. Но об этом мы поговорим в следующем пункте статьи (ajax php пример), а сейчас разберемся с спецификой работы ajax.
Для отправки данных на сервер, нужно создать объект XMLHTTPRequest. С помощью него открыть url (php скрипт), послать на него данные (POST или GET метод), получить ответ, и средствами знаний языка js вывести полученный ответ сервера на монитор (ответом может быть любой фрагмент или элемент страницы сайта).
Для прояснения посмотрите ниже предоставленную схему иллюстрирующую взаимодействие ajax с php.
Ajax + php пример
Для примера взаимодействия ajax с php, создадим два файла:
1. ajax_page.html
2. get_ajax.php
Сначала рассмотрим пользовательскую сторону приложения, то есть ajax_page.html:
<html>
<head>
<title>Ajax + PHP: пример | sitear.ru</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="images/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">
Здесь будем принимать отчеты о работе ajax приложения и ответ сервера.
</div>
<form action="get_ajax.php">
<p><b>Поле ввода 1</b></p>
<p><textarea id="area_1" name="area_1" style="height:50px; width:500px;">Введите свой текст. Например: Я люблю sitear.ru!</textarea></p>
<p><b>Поле ввода 2</b></p>
<p><textarea id="area_2" name="area_1" style="height:100px; width:500px;">Произвольный текст... Я тащусь от этой статьи, и хочу подписаться на RSS, что-бы читать такие статьи почаще!!!</textarea></p>
<input type='button' value='TEST AJAX' 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>
ajax_page.html:
Разберем javascript сторону данного примера:
XmlHttp() – функция которая создает объект XMLHttpRequest(), она написана максимально компактно и кроссбраузерно.
ajax(param) – наш обработчик при вызове событий (onclick), принимает в массиве paramнеобходимые данные:
url – куда отсылать данные, причем он может быть в таком виде page.php?parameter=value, то есть информация может передаваться по методу GET.
statbox – ид html блока который будет принимать результаты работы ajax + php приложения.
method – метод отправки данных, может быть POST или GET. В нашем примере мы используем POST метод, но в то же время через url можно передавать информацию GET методом.
data – массив передаваемых данных. В нашем примере, данные автоматически берутся из поля 1 и 2, хотя можно просто писать data: {name: "value"}.
success – имя функции или сама функция, которая будет обрабатывать полученные данные (текст).
Вызов функции ajax как вы видите сделан событием onclick=ajax().
Теперь разберем серверную сторону ajax + php приложения, то есть файл get_ajax.php:
<?php
header("Content-type: text/plain; charset=windows-1251");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
sleep(2);
echo "Ура получилось! Спасибо sitear.ru!<br>";
while(list ($key, $val) = each ($_POST))
{
$val = iconv("UTF-8","CP1251", $_POST[$key]);
echo "<b>".$key.":</b> "."<pre>".stripslashes($val)."</pre>";
}
?>
Здесь все гораздо проще. Сначала устанавливаем кодировку выходящих данных, с помощью header. Устанавливаем запрет на кеширование данных. sleep(2) – приостанавливает работу скрипта на 2 секунды, это для того, что бы увидеть анимацию ожидания wait.gif. Выводим полученные данные, при этом читая все элементы массива $_POST и преобразуя их в нужную кодировку (для кириллицы).
Для запуска нашего ajax php приложения загружаем в браузер страничку ajax_page.html
Вот что у меня получилось при нажатии кнопки TEST AJAX :
Это ответ, полученный от файла get_ajax.php:
Остались еще вопросы по поводу ajax + php? Задайте их в комментариях ниже…
MySQL примеры: примеры запросов mysql
Комментарии по теме:
AJAX + PHP: применение, взаимодействие, пример 27
