AJAX + PHP: применение, взаимодействие, пример
В данной статье поговорим о взаимодействии ajax с php. Как связать работу ajax скрипта и php кода? Как применить ajax в веб разработке? Если вас интересуют такие вопросы, вы найдете на них ответы в нашей статье. А также примеры ajax php кода.
Наши цели
Применение ajax + php
Для того, чтобы понять, нужен ли нам вообще ajax с php, давайте разберемся для чего он может быть полезен. Применение ajax+ php может быть разнообразным, единственное, то что, нельзя конструировать элементы страницы с помощью данной технологии, которые несут в себе релевантность для поисковых систем. Потому что ajax подгружает элементы страницы после ее загрузки при вызове js событий, но как нам известно, поисковые системы не умеют читать javascript кода, поэтому нужно тщательно выбирать где нужно, а где не нужно применять ajax с php.
Где можно применить ajax + php?
1. Добавление нового комментария
4. Организация поиска на сайте (автозавершение)
5. Пошаговая регистрация пользователя на сайте
Как видите вариантов применения ajax + php масса. То есть, можно применить там, где перезагрузка страницы будет не уместной, где нужно просто обменяться данными с сервером.
Где не стоит применять ajax + php
Мое мнение объективное, может вы думаете иначе, но полагаясь на мой опыт скажу что ajax + php не стоит применять:
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:
Здесь будем принимать отчеты о работе ajax приложения и ответ сервера.
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: .
success – имя функции или сама функция, которая будет обрабатывать полученные данные (текст).
Вызов функции ajax как вы видите сделан событием onclick=ajax().
Теперь разберем серверную сторону ajax + php приложения, то есть файл get_ajax.php:
"; while(list ($key, $val) = each ($_POST)) < $val = iconv("UTF-8","CP1251", $_POST[$key]); echo "".$key.": "."".stripslashes($val)."
"; > ?>
Здесь все гораздо проще. Сначала устанавливаем кодировку выходящих данных, с помощью header. Устанавливаем запрет на кеширование данных. sleep(2) – приостанавливает работу скрипта на 2 секунды, это для того, что бы увидеть анимацию ожидания wait.gif. Выводим полученные данные, при этом читая все элементы массива $_POST и преобразуя их в нужную кодировку (для кириллицы).
Для запуска нашего ajax php приложения загружаем в браузер страничку ajax_page.html
Вот что у меня получилось при нажатии кнопки TEST AJAX :
Это ответ, полученный от файла get_ajax.php:
Остались еще вопросы по поводу ajax + php? Задайте их в комментариях ниже…
Опыт создания Ajax-приложения
В данной статье речь пойдет о написании Ajax-приложения. Если говорить проще — то, о написании сайта – работающего без перезагрузок. Быстро, легко, доступно. В этой статье не будет рассматриваться код серверной стороны, будут только примеры, для лучшего понимания.
Меня давно интриговала тема написания сайта, в котором несколько компонентов (например, flash плееры) не перезагружаются с каждым переходом по ссылкам, а продолжают себе напевать песенки. И вот однажды, набравшись смелости — я начал думать насчет структуры такого вот приложения. Что в итоге получилось — читайте ниже.
Начнемс
Первый, это знакомый всем ну может почти всем — js фреймворк. Второй файл — это шаблонизатор, на базе jquery, мы будем его использовать — т.к. он работает на стороне клиента, что нам и нужно. Так же потребуется небольшое дополнение к jquery, для конвертации js-объектов в json.
Для начала создадим папку, например jstemp — в этой папке будут находится шаблоны jquery-tmpl. Еще нужно создать хотя бы один шаблон, например — шаблон главной страницы. Создаем в папке jstemp подпапку main в которой будет файл page.html
В файле простой html код:
Суть работы
В тот момент, когда пользователь заходит на страницу, наше ajax приложение обращается к серверу, с текущей ссылкой, и параметрами, и ждет в ответ JSON. Полученный JSON мы парсим в js-объект и отправляем плагину jquery-tmpl, который расставляет данные из объекта по полочкам, и показывает нужный шаблон нашему пользователю. А так же, если пользователь решит, что текущая страница ему не нужна, и попробует перейти на другую — ajax-приложение тут же отловит его действие и сделает те же самые процедуры, только уже с новой ссылкой, по которой юзер хотел перейти, и вернет результат работы.
Реализация
Для начала напишем начальную страницу:
body < font: 11pt Arial, Helvetica, sans-serif; margin: 0; >h1 < font-size: 36px; margin: 0; color: #fc6; >h2 < margin-top: 0; >#header < padding: 10px; >#sidebar < float: left; border: 1px solid #eee; width: 20%; padding: 5px; margin: 10px 10px 20px 5px; >#sidebar p < margin-left:20px; >#content < margin: 10px 5px 20px 25%; padding: 5px; border: 1px solid #eee; >#footer < background: #eee; padding: 5px; color: #fff; clear: left; >.error Какой - нибудь хеадер.
Ссылки
Главная
О сайте
Контакты
Какая - то страница
Авторизация
Какой - то контент
© 1 Отметим наличие div с — именно в него будут подгружаться загруженные шаблоны.
Далее напишем начальную загрузку контента.
var user = <>; /** * Возвращает текущий hash без # в начале **/ function hash() < return document.location.hash.replace('#',''); >function load(u) < console.log('loading page '+ u +':'); $.ajax(< url: "/" + u,//я обращаюсь на страницу, которую мне нужно загрузить, //т.к. на серверной стороне - все запросы идут к index.php, //и там я могу найти тот контроллер, который мне нужен type: "GET", data: "action=pageLoad&url="+u+"", // action=pageLoad на серверной стороне - говорит мне, что нужно возвращать JSON success: function(msg) > document.location.hash = u; render(arr, u); console.log("load template"); > >); > function render(data, url) < //Грузит шаблон, параметр data - объект данных, передаваемых в шаблон; url - вида main/page , user/login $("#content_wrap").show().html('');// обнуляем тот самый участок html-кода, в котором будет подгружена новая страница $.get("jstemp/"+ url +".html", function(template) ).appendTo('#content_wrap');//добавляем к #content_wrap $("#content_wrap").prepend("");//позже поясню для чего нужен этот код. >); > $(function() else < var url = 'main/page';// ставим какое - нибудь дефолтное значение >load(url);//загружаем страницу. >);
На данном этапе, если все нормально, то можно загрузить главную страницу. Для примера напишу совсем малюсенький серверный код:
'Контакты', 'info'=>'Связаться с нами можно с помощью сарафанного радио, ответ последует таким же образом.'); break; case 'page/about': $arr = array('name'=>'О сайте', 'info'=>'Этот сайт написан не профессионалами за еду.'); break; case 'page/somepage': $arr = array('name'=>'Еще одна страница', 'info'=>'Тут тоже что - то есть'); break; case 'main/page': default: $arr = array('name'=>'Главная страница', 'info'=>'Разного рода информация'); break; > echo json_encode($arr); > else < ?>Тут Html код, который описан выше. ?>
Теперь, при обращении к main/page — должно вывестись
Ура! 3/4 сделано. Теперь напишем простой скрипт, для отлова клики на ссылки.
/** * Клик на ссылке */ $("a[href^='#']").unbind('click');//старое событие нужно убрать, иначе появляется много одинаковых событий на один клик. $("a[href^='#']").click(function(e) >);
и поместим этот код в тот самый included.js
Назначение этого файла простое: При подгрузки html текста — скрипты, которые уже были на страницы, не хотят с ним работать, для этого приходит на помощь included.js.
А как же работа с формами, спросите вы? Да легко!
Работа с формами
Для примера создадим шаблон user/login.html
и поместим в него код:
А в тот же included.js следует добавить:
/** * сабмит формы */ $('form').submit(function() > >); return false; >);
Обновим серверный код, чтобы было понятно на примере, что происходит:
'Пользователя '.$user['login'].' не существует')); > else '/')); > > else 'Вы уже авторизированы.')); > > else if(isset($_GET['action'])&&$_GET['action']=='pageLoad')< switch($_GET['url']) < case 'page/contacts': $arr = array('name'=>'Контакты', 'info'=>'Связаться с нами можно с помощью сарафанного радио, ответ последует таким же образом.'); break; case 'page/about': $arr = array('name'=>'О сайте', 'info'=>'Этот сайт написан не профессионалами за еду.'); break; case 'page/somepage': $arr = array('name'=>'Еще одна страница', 'info'=>'Тут тоже что - то есть'); break; case 'main/page': default: $arr = array('name'=>'Главная страница', 'info'=>'Разного рода информация'); break; > echo json_encode($arr); > else < ?>тут полный html код ?>
При POST запросе со страницы, мы проверяем авторизирован ли юзер, и если да — выводим ошибку, и убираем форму, в противном случае — проверяем логин пользователя, если не существует — выводим Message, иначе — отправляем юзера на главную страницу.
В заключении
В заключении хочу сказать, что данный способ не самый правильный, и тем более идеальный, но он заслуживает место быть. Надеюсь, тема статьи была интересна, и может быть, даже, кому — то окажется полезной сама статья.
Спасибо за внимание.
Update: ссылка на сорцы
