Войти Регистрация

AJAX + PHP: применение, взаимодействие, пример


ajax php

В данной статье поговорим о взаимодействии ajax с php. Как связать работу ajax скрипта и php кода? Как применить ajax в веб разработке? Если вас интересуют такие вопросы, вы найдете на них ответы в нашей статье. А также примеры ajax php кода.


Наши цели

Применение ajax + php

Взаимодействие ajax с php

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 пример

Для примера взаимодействия 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:

Пример странички 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 :

Ожидание ответа php с сервера

Это ответ, полученный от файла get_ajax.php:

Ответ ajax php приложения

Остались еще вопросы по поводу ajax + php? Задайте их в комментариях ниже…



Дальше: MySQL примеры: примеры запросов mysql


Дискуссия по теме    36 Комментариев
Добавить комментарий
Евгений 11.08.2016 ? 10:07
Атрибут <script language=...>. Этот атрибут давно мертв и никому не нужен. Не используйте его для javascript.
Мария 03.09.2015 в 14:11
Здравствуйте! А как сделать, что бы то что вывелось сохранялось? и таким образом накапливались текста?
Андрей 18.03.2015 в 22:03
Спасибо за скрипт! Тренируюсь сейчас на стареньком CodeIgniter, доработал этот скрипт, создал нужный массив - все заработало с Ajax без больших переделок, не нарушая MVC
Денис 15.08.2014 в 17:12
Извиняюсь проблема решена. Не заметил кое что.
Денис 15.08.2014 в 16:27
Здравствуйте Использовал данный скрипт. Пока тестил только на денвере. Возник такой вопрос картинка отображения загрузки данных показывается только когда нажимаешь на кнопку с пустыми значениями полей input, и дальше уже нормально. Но если сначала ввести данные в поля та картинка не отображается пока не прогонишь 1 раз с пустыми полями. В чем может быть проблема?
Александер 05.04.2014 в 00:47
Большое спасибо за статью, впервые конкретно познакомился с ajax, многие задумки осуществлю. Делаю сайт, тренируюсь. Буду рад если взгляните http://sadava.w.pw/
Тарас 05.04.2014 в 02:48
Радуйтесь, посмотрел. Неплохо, для версии 1.0
Гена 10.01.2014 в 22:04
ребята... не подскажете, почему ajax страницу не перезагружает сам после нажатия на кнопку отправки? Как посмотреть ошибку на стороне php? (200, parseerror)
goodjiny 23.05.2013 в 16:31
<input id="r1" type="radio" value="1" name="radiobtn">
Mister 18.10.2012 в 01:46
просьба удалить все куски моих сообщений так как все за один раз не помещается и если вам не сложно связаться со мной через isq 399822655 или скайп mister_x_88 спасибо заранее
Тарас 19.10.2012 в 01:44
Удалил сообщения как и просили... Если систему чата не вы писали, а использовали готовый скрипт, то будет очень сложно это сделать... практически нереально. Проще будет написать самому чат, или найти готовый скрипт на ajax. Ближе к сути, как можно это реализовать: В базе данных должны храниться данные об авторизованых пользователях. Каждые 3 секунды, через js будем отправлять запрос к php скрипту, который будет получать информацию из бд о пользователях и присылать на страницу... после получения списка пользователей, обновляем на странице клиента.
Тарас 19.10.2012 в 01:51
Вот примерный шаблон js функции... function get_users(){ ajax(... здесь как описано в статье отправляем запрос к php ); setTimeout('get_users()',3000); } функция будет вызавть сама себя каждые 3 сек, и делать запрос к php. В php определяем какие пользователи авторизованы и возвращаем в виде готового куска html кода. Мой скайп: moroz_taras, вас не могу найти в скайпе.
danivaske 03.09.2012 в 21:37
"По сути, технология ajax не может существовать без php скриптов, " - очепятка - ajax можно с любым серверным языком юзать
Тарас 03.09.2012 в 23:08
Правильно будет сказать: ajax не может существовать без серверной стороны приложения.
ivan 07.08.2012 в 14:15
отличная статья
Тарас 07.08.2012 в 14:43
Рад что вам понравилась!
я 06.05.2012 в 18:50
Я предпочитаю ajax jquery. Легко и просто!
kost 02.05.2012 в 18:44
Спасибо
kost 01.05.2012 в 22:05
Здравствуйте. А можно вызывать функцию ajax через определенный отрезок времени т.е. чтоб код страницы сам инициировал обращение к серверу?
Тарас 02.05.2012 в 16:26
Конечно можно, устанавливаете setTimeOut и пишите, чтобы функция вызывала сама себя... рекурсия function name() { здесь идет вызов функции ajax setTimeout(name, 1000); }
ИнУр 17.04.2012 в 23:36
что делать если в php файле имеется текст содержащий свою разметку т.е.
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
Тарас 18.04.2012 в 12:59
Что делать с чем? с разметкой или текстом... текст с разметкой выведется как обычный html код, или о чем вы?
some user 05.04.2012 в 02:36
Спасибо за очень интереснуюстатью!!! Но вот вопрос: а почему нельзя обединить эти два файла в один?
Тарас 05.04.2012 в 15:44
Можно объединить. Когда я учился, мне было так понятнее: один файл отвечает за пользовательскую сторону, другой за серверную. Впрочем можно сделать все гораздо проще, через один файл. Да, там name должен area_2 быть, там я протупил... но протупил в следующем, тот name вообще не нужен, ведь информация берется через id (getElementById), так-что name можно удалить, как в первом поле ввода, так и во втором.
Сергей 22.02.2012 в 16:14
Как ускорить работу скрипта? В js не разбираюсь, но мне кажется там соль)
Тарас 23.02.2012 в 12:06
Если php не возвращает данных вообще, то проблема не в скорости, а в ошибках программирования. Если работает, но долго, можете удалить строку sleep(2); в php файле, тогда будет срабатывать максимально быстро.
Aries 02.02.2012 в 10:23
все, разобрался в проблеме, спасибо
Aries 02.02.2012 в 07:24
есть форма для заполнения, там пользователь вводит имя, с помощью ajax имя передается в php (метод POST), где генерируется изображение с текстом "имя". В php есть проверка на получаемую строку, если она пустая, то переменной имя присваивается строка "имя не введено". Так вот, если результатом php скрипта является сохранение изображения на сервер, то на картинку накладывается имя (работает корректно), если же я хочу вывести изображение непосредствено в браузер, без сохранения на сервер, то на картинку накладывается текст "имя не введено". То есть php не получает строку "имя"( p.s. надеюсь описал проблему понятно
Aries 01.02.2012 в 13:25
Спасибо за статью. Но возникла такая проблема. У меня php генерирует изображения в зависимости от полученных данных, если сохранять картинку на сервер, то все работает, а если выводить php непосредственно в браузер, то не работает. Получается, что php не получает или не обрабатывает данные, строки, которые должны быть заполнены остаются пустыми.
Тарас 01.02.2012 в 20:29
Что-то я не понимаю... При чем здесь картинка?
Тарас 04.01.2012 в 01:32
Александр, это надо вычислять средствами JavaScripta. Предлагаю создать отдельную функцию для определения значения radio, можно выбрать все элементы с помощью document.getElementByTag(), и определить какой из них checked, его значение возвратить через return... radio_area: your_function();
Александр 03.01.2012 в 16:35
А как быть с радио-кнопками? Один id я им дать не могу (во всяком случае у меня так не работает - пример ниже), а как тогда передать значение в таком формате, как у вас, например radio_area:document.getElementById("r1").value 1 2 3
Тарас 06.12.2011 в 20:43
Выходило куда? При выводе результата после отправки запроса? Если да, то нужно отредактировать файл get_ajax.php. Можно просто заменить тег pre на span, это более вопрос HTML разметки.
boombast1k 05.12.2011 в 08:52
Здраствуйте! А как сделать чтобы все это в строчку выходило? То есть: first_area=Введите свой текст. Например: Я люблю sitear.ru!
Тарас 03.10.2011 в 17:09
1. Создаете пункт меню в виде div блока. 2. Через onclick, отправляете в php файл нужные данные (id раздела...). 3. В php, формируете ленту новостей, на свой вкус и выводите - echo "HTML код ленты"; Просмотрите еще раз статью, также само, только вместо значения форм вы передаете id раздела меню. В методе ajax передаете данные масивом data. Пример: data:{id_menu:"id_vashego_razdela"}
goodjiny 01.10.2011 в 11:17
Это хорошо, а как сделать, чтобы при нажатии на пункт меню, выводились материалы в виде ленты новостей???
Добавить комментарий
Просмотров: 123144