PHP и JavaScript

Взаимодействие PHP и JavaScript. Как передать переменную из PHP в JavaScript? Нужно во время выполнения скрипта PHP просто сформировать JavaScript, чтобы он потом мог выполниться в браузере.

Оглавление:
  1. Синхронный метод передачи данных из JavaScript в PHP
  2. Асинхронная передача переменной из JavaScript в PHP
  3. Передача сложных объектов из PHP в JavaScript
  4. О безопасности
  5. Передача данных между браузером и сервером
  6. Заключение

Например:

<?php
$var = 'Привет мир';
print '<script language="javascript">alert("'.$var.'");</script>';

Если вы создадите файл PHP с таким кодом и запустите его в браузере будет сообщение в окне alert Привет мир.

Разумеется нужно помнить что синтаксис должен быть JavaScript. Фактически, когда мы формируем код JavaScript в PHP мы должны знать что PHP сначала что-то генерирует и это что-то должно быть валидным JavaScript.

В данном случае скрипт PHP формирует простую строку JavaScript:

<script type="text/javascript" language="javascript">
  alert("Привет, мир");
</script>

И это вполне корректный JavaScript, который будет выполнен в браузере.

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

к меню ↑

Синхронный метод передачи данных из JavaScript в PHP

<script language="javascript">
var message = encodeURIComponent('Hello, server!');
window.location.href = 'http://dayte2.com/index.php?message'+message;
</script>

Этот код немедленно перенаправит пользователя по адресу http://dayte2.com/index.php?message=Hello%2C%20server!

Код PHP в файле index.php получит данные из GET и сформирует суперглобальные массивы.

<?php
print $_GET[message];

Асинхронная передача переменной из JavaScript в PHP

Асинхронная передача переменной из JavaScript в PHP подразумевает использование Ajax. По сути, осуществляется то же что и в предыдущем случае, но страница браузера не перезагружается.

Проще всего это сделать используя библиотеку jQuery:

<script src="http://yandex.st/jquery/2.1.0/jquery.min.js" type="text/javascript"></script>
<script language="javascript">
var message = 'Hello, server!';
$.get('http://dayte2.com/index.php', {message:message}, function(data)	{
	alert('Сервер ответил: '+data);
});
</script>

Не сложно, да? Не нужно применять функцию encodeURIComponent её применит за нас jQuery. Мы описываем функцию, которая принимает ответ сервера и складывает его в переменную data. Если index.php возвращает просто значение переменной $_GET[message], то мы увидим окно alert с текстом Сервер ответил: Hello, server!

к меню ↑

Передача сложных объектов из PHP в JavaScript

Для генерации JavaScript из PHP нужно придерживаться синтаксиса JavaScript. Проще всего это сделать, воспользовавшись форматом JSON и функцией json_encode(), она превратит объект или массив PHP в строку, и при выполнении покажет объект JavaScript.

<?php
$arr = array('test'=>'123','key'=>'value');
$js_obj = json_encode($arr);
print "<script language='javascript'>var obj=$js_obj; alert(obj.test);</script>";

Тут можно начать путаться. Но ничего страшного нет, достаточно понимать последовательность. Сперва выполняется PHP затем JavaScript.

После выполнения PHP получится:

<script language="javascript">var obj={"test":"123","key":"value"}; alert(obj.test);</script>

Что выведет нам окно alert с текстом 123.

Нужно запомнить что PHP генерирует JavaScript, поэтому передавать данные очень просто. Нужно формировать JavaScript так же, как формируется html с соблюдением синтаксиса JavaScript.

Для передачи данных из JavaScript в PHP всегда используется дополнительный запрос. Как он осуществляется дело десятое. Например, может формировать и отправлять данные веб-форм, или откроется iframe. Понимая это, можно довольно просто перекидывать любые данные из браузера на сервер и обратно.

к меню ↑

О безопасности

При выполнении PHP можно обращаться к файловой системе сервера, базам данных и другим объектам, на которые вам предоставили права администратора. А вот с JavaScript так не получится, он ограничен только встроенными объектами браузера, с помощью JavaScript вы не сможете считать с диска или записать на диск сервера. Сделано это в первую очередь для защиты от злоумышленников, если разрешить доступ скриптам к системной информации и файлам, обязательно найдётся умелец, который напишет код скрытно отсылающий ваши файлы, логины, пароли и другую закрытую информацию на адрес умельца.

Помимо прочего, протокол HTTP по которому передаются все веб-страницы не поддерживает постоянных соединений, т.е. браузер подключается к серверу, запрашивает страницу, получает ответ и немедленно отключается. Это означает, что все скрипты PHP завершаются ещё ДО того, как начнёт выполняться JavaScript.

Таким образом сам собой напрашивается вывод: прямое взаимодействие PHP и JavaScript попросту невозможно.

к меню ↑

Передача данных между браузером и сервером

Но не всё так фатально, косвенное взаимодействие мы обеспечить всё-таки можем. Для передачи данных между браузером и сервером можно использовать один из трёх способов:

  1. Внесение изменений в скрипт страницы.
  2. Использовать Cookies.
  3. Использовать Ajax.

Первый способ пригоден только для передачи данных и параметров с сервера в браузер. Суть метода проста: при генерации страницы необходимые параметры зашиваются прямо в JavaScript.

<html>
  …
  <script type="text/javascript">

  <?php // php
  	If ( $login == "admin" )
  		echo "var  isAdmin = true"
  	else  echo "var isAdmin = false"
  ?>

  if(isAdmin)
  	document.write("Я админ");
  else
  	document.write("Я юзер");
  </script>
  …

В этом примере на этапе формирования страницы мы вписываем заданную переменную с нужным нам значением.

Работает это так:

  1. От пользователя поступает запрос на получение страницы.
  2. Запускается PHP и начинает выполнять соответствующий скрипт.
  3. В процессе выполнения скрипт формирует страницу HTML содержащую JavaScript. Как я уже упоминал ранее, создаваемая веб-страница с точки зрения сервера – обычный текст, который он может перед отправкой пользователю править как угодно.
  4. Готовая страница передаётся в браузер пользователя.
  5. По окончании загрузки страницы в браузере выполняется JavaScript. При этом JavaScript не знает, каким образом он составлен, вручную программистом или автоматически скриптом. Главное чтобы скрипт был синтаксически верен и работоспособен.

Второй способ Cookies несколько сложнее, но позволяет передавать параметры как со стороны сервера, так и со стороны браузера. Суть в том, что PHP и JavaScript позволяют читать и сохранять cookies (подробнее как добавить cookies в браузер).

Условный пример:

<html>
  <?php // при выполнении скрипта на сервере сохраняем
        // данные в cookie setcookie(…); ?>
  <script> // а этот фрагмент будет выполнен после
           // загрузки страницы
           // надо лишь считать cookie getcookie(…);</script>

Здесь мы на стороне сервера устанавливаем cookie с необходимыми нам параметрами. При этом клиенту посылается специальным образом сформированная команда и данные, т.е. все cookie передаются ДО передачи основной страницы. Это значит, что все установленные сервером cookie будут доступны после загрузки страницы, а значит и при выполнении JavaScript.

Аналогично и для обратной передачи: все cookies, установленные из JavaScript будут переданы на сервер при первом же обновлении страницы.

Основной недостаток этого метода  ограничение размера передаваемых данных. Максимальный размер одного cookie не может превышать 4Кб, а у некоторых пользователей возможность установки cookies вообще отключена. Так же этот способ создаёт большой дополнительный трафик, и все cookies автоматически отправляются на сервер при каждом обновлении страницы.

У обоих методов взаимодействия есть два общих недостатка:

  1. Все обновления и изменения происходят только при загрузке/обновлении страницы. Это очень неудобно, особенно когда приходится заполнять громоздкие и сложные формы с динамическим содержимым, когда состав и содержимое полей изменяется в зависимости от уже введённых данных.
  2. Программист должен достаточно хорошо разбираться как в PHP, так и в JavaScript, чтобы грамотно написать клиентские и серверные скрипты.

Последний способ взаимодействия – это Ajax. Это лучший, пусть и не самый простой способ. Ajax – это комбинированная технология, использующая все преимущества PHP и JavaScript, позволяет на лету изменять и обновлять данные на страницах вашего сайта, т.е. без перезагрузки страницы.

Для использования Ajax обычно создаются front-end и back-end.

Back-end – это выполняющиеся на сервере скрипты PHP. Обычно такие скрипты возвращают структурированные блоки данных (массивы), без какого либо оформления.

Front-end – это выполняющиеся JavaScript в браузере пользователя. Основное их назначение вызвать требуемый скрипт back-end, и получить данные для отображения их на странице, добавив при необходимости оформление из тегов HTML и стилей CSS.

к меню ↑

Заключение

Таким способом взаимодействие PHP и JavaScript наладить всё-таки можно, но для этого надо разбираться в обоих языках. Из собственного опыта могу сказать, что для домашних страничек и небольших сайтов проще всего применять первый способ (Внесение изменений в скрипт страницы). Для проектов покрупнее лучше Ajax. А вот второй способ я не рекомендую, там слишком много подводных камней и условностей, таких как: размер cookie, отключение куки пользователем, формат данных, кодировка и т.п.

htmlhook.ru | Скрипты для веб-приложений