Интеграция языков PHP и JavaScript на вашем сайте

Автор: Александр Петров, веб-студия WDT.RU

- Подскажите, как передать параметры из Javascript в PHP?
- Как запустить PHP-скрипт, не перегружая страницу?
- Как сгенерировать Javascript-код из PHP?
Из различных форумов Интернета


    Предисловие
  1. Механизм использования PHP и Javascript на сайте
  2. PHP и динамический сайт
  3. Передача данных из Javascript в PHP
  4. Передача данных из PHP в Javascript
  5. Скрытая работа PHP-скрипта
    Выводы

Предисловие
В различных форумах довольно часто встречаются вопросы, вынесенные в эпиграф этой статьи. Попробуем ответить на них. Если поставить вопрос шире, то он будет звучать так: «Как могут взаимодействовать на сайте PHP и Javascript?»

Был бы жив К.Прутков, он сказал бы примерно так: «Язык PHP смело уподоблю орлу, парящему на недосягаемой высоте, а Javascript – крокодилу в зоопарке.»

Могут ли они – «орел»-PHP и «крокодил»-Javascript – как-то взаимодействовать между собой? Практически, маловероятно. Они живут в разных средах, но создают для нас общую и более полную картину мира. Ваш HTML-сайт – это открывающийся вид гор: всё просто, строго и надежно. Наличие орлов и крокодилов разнообразит окружающую природу. Использование PHP и Javascript делают ваш сайт более интересным – динамичным и функциональным.

Справка
  Язык PHP (“пи-эйч-пи”) появился в 1994 году, когда программист Расмус Лердорф (
Rasmus Lerdorf) создал для себя инструмент ведения статистики посещаемости сайта.
  По данным Netcraft на октябрь 2005 г. в мире зарегистрировано около 50 млн. веб-серверов Apache. И соответственно почти на всех установлен язык PHP. Т.е. де-факто PHP стал одним из самых распространенных языков программирования в мире.
  Язык Javascript («джава-скрипт») уже давно поддерживается основными браузерами: IE, Netscape, Opera и т.д. Правда, с ним связана неистребимая проблема – каждый браузер имеет свои особенности реализации языка.

Итак, как могут взаимодействовать PHP и Javascript на вашем сайте? Почти все знают, что крокодилы не летают. «Крокодил»-Javascript живет в вашем браузере, как в клетке зоопарка – его действия и возможности довольно ограничены.

Как известно, орлы не ползают: орел должен взлететь, чтобы увидеть добычу. РНР срабатывает только в момент загрузки/перезагрузки страницы или вызова скрипта – при обращении к серверу. И делает все на лету: читает/записывает в базу данных или в файл, а результат – обновленную новую страниц – отдает браузеру по HTTP-протоколу.

Как орлы и крокодилы живут в одной биосреде (дышат одним воздухом), но не пересекаются, так взаимодействуют PHP и Javascript: посредством отображаемого браузером HTML-кода страницы.

Запомним!

1. Механизм использования PHP и Javascript на сайте

Вы – начинающий PHP-программист или уже практически знаток PHP (несколько месяцев пишете скрипты для своей домашней супер-странички), а примеров Javascript уже скачали столько (на все случаи), что и не счесть. Тем не менее, нет-нет да и возникнут вопросы или что-то не получается. Попробуем разобраться, как вы можете использовать во взаимодействии эти два языка. Из опыта вы уже знаете, что иногда нужно передавать от страницы к страницы некоторые данные, обрабатывая их. Для этого может использоваться и PHP, и Javascript. Прежде чем разобраться и посмотреть примеры, давайте представим процесс работы сайта, как взаимодействие клиента и сервера (см. Схему 1).

Схема 1:
                                                                   
 ---------------              --------------            ----------
|               |    HTML    |              |   HTTP   |          |
| Пользователь  |   <---->   |    Клиент    |  <---->  |  Сервер  |    
|               | Javascript |   (браузер)  |    PHP   |          |
 ---------------              --------------            ----------   

Из схемы видно, что браузер преобразовывает HTML-код и выдает пользователю для просмотра вашу супер-страничку. Javascript может реагировать на нажатие ссылок или кнопок, менять вид страницы (не перегружая ее), вызывать другой URL в этом или другом окне (фрейме), перегружать эту страницу. Ваш сайт может быть построен только на HTML-файлах с включением (или без) Javascript.
(Продолжая сравнения в духе К.Пруткова я бы уподобил любителей создавать HTML-сайт на Frontpage посетителям зоопарка, а программистов PHP – путешественникам в джунглях).

Важно!  
Не путайте Javascript и Jscript, тем более серверный Javascript от Microsoft

При разработке динамического сайта (генерации содержания страниц по заданным параметрам, использовании базы данных) вам нужно использовать серверный скрипт. В данном случае вы остановили свой выбор на PHP. PHP-скрипт может быть запущен на сервере несколькими способами:

В первых двух способах есть возможность интеграции PHP и Javascript, что и будет рассмотрено ниже.

Важно!  
Пользователь не может видеть PHP-кода, а только HTML-код,
который сформирован сервером и передан браузеру.

2. PHP и динамический сайт
Итак, в чем же будет заключаться динамика вашего сайта? Если вы об этом еще ничего не знаете, то для начала сделайте так: например, вместо трех html-страниц, соответствующих 3-м разделам меню (1.htm, 2.htm, 3.htm) с одинаковым дизайном создайте один файл с этим же дизайном – index.php – приблизительно такого содержания:

<!-- шапка сайта... -->
<!-- меню сайта -->
<a href=’index.php?numPage=1’>Раздел 1</a>
<a href=’index.php?numPage=2’>Раздел 2</a>
<a href=’index.php?numPage=3’>Раздел 3</a>
<? /* включение содержания страницы в зависимости от переданного параметра – номера раздела меню $numPage: */
if (phpversion()>"4.0.5") $numPage=$_GET["numPage"];
Include($numPage.".htm");
?>
<!-- конец HTML-кода -->
Смотрите
работающий пример.
В основной части страницы вы будете подгружать (включать) функцией Include соответствующее выбранному разделу содержание (в файлах 1.htm, 2.htm, 3.htm нужно оставить только контент). В развитие динамики вы можете, анализируя переданный параметр numPage, делать выборку содержания активного раздела из базы данных.

Конечно, эти нехитрые преобразования еще не значат, что вы уже из своего статического сайта получили динамический. Более сложные примеры сопряжения PHP и Javascript, например, по технологии AJAX, смотрите ниже.

3. Передача данных из Javascript в PHP

Три варианта передачи данных из Javascript в PHP соответствуют трём методам обращения браузера к серверу:

Рассмотрим подробнее эти варианты.


3.1. PHP-скрипт вызывается путём загрузки документа с GET-параметрами, сформированными Javascript-ом.

ПРИМЕР:

Предыдущий пример с тремя разделами меню может выглядеть и так:

<SCRIPT language=JavaScript>
<!-- функция перезагрузки страницы с параметром выбранного раздела -->
function getPage(numPage) {
alert("Загружаем раздел "+ numPage+ "!");
self.location.href="?numPage=" + numPage;
}
//-->
</SCRIPT>

<form name="main" action="index.php">
<!-- вывод кнопок меню: -->
<input type=button value=”Раздел 1” onClick=” getPage(1); return false”>
<input type=button value=”Раздел 2” onClick=” getPage(2); return false”>
<input type=button value=”Раздел 3” onClick=” getPage(3); return false”>

</form>

Смотрите работающий пример.

3.2. Javascript-ом заполняются поля формы (по выбору раздела из select-списка получаем его значение), после чего вызывается PHP-скрипт и страница/форма перегружается по нажатию кнопки Submit (метод POST):

ПРИМЕР:

<title>Пример 3_2</title>
<SCRIPT language=JavaScript>
<!-- функция перезагрузки страницы с параметром выбранного раздела -->
function doPage() {
var opt=document.main.chpage;
var page=opt.options[opt.selectedIndex].value;
document.main.page.value=page;
// другие преобразования:
main.submit(); // перезагрузка страницы
}
//-->
</SCRIPT>
<form method=post name="main" action="<?=$_SERVER['PHP_SELF']?>">
<input type=hidden name=page value="<?=$_POST["page"]?>">

<SELECT NAME='chpage' ONCHANGE=" doPage();">
<OPTION <? if ($_POST["chpage"]=="1") echo "selected";?> VALUE=1>Раздел 1
<OPTION <? if ($_POST["chpage"]=="2") echo "selected";?> VALUE=2>Раздел 2
<OPTION <? if ($_POST["chpage"]=="3") echo "selected";?> VALUE=3>Раздел 3
</SELECT>
</form>
<?
if (!empty($_POST["page"])) echo "Загружаем раздел <b>".$_POST['page']."</b>...";
//Include($page.".htm"); // содержание раздела...
?>
Смотрите работающий пример.

3.3. Javascript-ом формируется переменная и через браузер посылаются куки на локальный компьютер пользователя.
При перезагрузке страницы прочитать куки можно из массива $_COOKIE[‘ИмяКуки’]

ПРИМЕР: записываем куки на Javascript, а читаем из PHP
Запись кук на Javascript:

<SCRIPT language=JavaScript>
<!--
function setCookie(name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
document.cookie = curCookie;
}
//-->
</SCRIPT>

... тело страницы... посылаем куки:

<SCRIPT language=JavaScript>
<!--
name="nick";
value="BOM";
setCookie(name, value,"","/","",""); // послать куки
//-->
</SCRIPT>
Смотрите работающий пример.

Чтение кук в PHP-скрипте:
<?
function unicode_decode($txt) {
return ereg_replace('%u([[:alnum:]]{4})', '&#x\1;',$txt);
}

$nick=$_COOKIE['nick'];
echo "Было введено имя: <b>". unicode_decode($nick)."</b>";
?>
Обратите внимание, что через JavaScript куки были отправлены с применением функции escape, роэтому при чтении необходмо перекодировать текст из Unicode в Windows-1251.
Смотрите работающий пример.


4. Передача данных из PHP в Javascript

Фактически есть только два варианта передачи данных из PHP в Javascript:

4.1. Генерация HTML-кода, включая Javascript
ПРИМЕР: получение Id текущего раздела в JavaScript-переменной
$currentRazdel=$_GET["idRazdel"]; // текущий раздел передан как параметр URL
$str = "SELECT * from razdel";
$result = MYSQL_QUERY($str);

$jst=""; // собираем строку Javascript-кода
$jst.=”<SCRIPT language=JavaScript>\n!--\n”;

while ($row=MYSQL_FETCH_ARRAY($result)) {
$idrazdel=$row["idrazdel"];
$razdel=$row["razdel"]; // раздел - пункт главного меню
if ($currentRazdel==$idrazdel) {
$jst.=” var curMenu=’$idrazdel’; // текущий раздел \n”;
}
}
$jst.=”//-->\n</SCRIPT>\n”;

echo $jst; // вывод кода JavaScript
?>

Вы получите на странице http://ваш.сайт/?idRazdel=2 следующий JavaScript-код:

<SCRIPT language=JavaScript>
<!--
var curMenu=’2’; // текущий раздел
//-->
</SCRIPT>

Более сложный пример – генерации Javascript-меню – смотрите здесь.

4.2. Отправить куки с сервера, после чего (в последующих загрузках страниц) читать куки через Javascript

Пример PHP-кода с отправкой кук:

<?
// передаем кук с именем nick:
SetCookie("nick",$nick,time()+1200*24*30,"/","");
?>
Смотрите работающий пример.

Пример JavaScript-кода чтения кук:

<SCRIPT language=JavaScript>
>!--
// читаем cookie:
var AllCookies = document.cookie;
// далее идет обработка строки кукисов…
//-->
</SCRIPT>

Здесь AllCookies – это строка, которая содержит все кукисы в виде "имя1=значение1; имя2=значение2;".
Смотрите полный пример записи и чтения кук через JavaScript.

5. Скрытый вызов и работа PHP-скрипта

5.1. Для вызова PHP-скрипта совсем не обязательно запускать его непосредственно через адресную строку браузера или перезружать страницу. И не всегда PHP-скрипт отдает браузеру HTML-код. Он может сделать свою работу на сервере, не изменяя ничего на странице сайта.
ПРИМЕР вызова скрипта в тэге img:

вариант 1 – в HTML-коде:

<img src="stat.php?page=1" border=0 width=1 height=1>

вариант 2 – в JavaScript-коде:

<script language="JavaScript">
<!--
document.write(“<img src=’stat.php?page=1’ border=0 width=1 height=1>”);
//-->
</script>

Файл stat.php может быть файлом счетчика или статистики.

5.2. AJAX! Хит сезона – супер-связка Javascript-PHP.
На самом деле AJAX расшифровывается как "Asynchronous JavaScript + XML". Суть технологии AJAX заключается в следующем: пользователю предоставляется возможность получить данные с сервера (вызовом скрипта), не перегружая страницу, т.е. в интерактивном режиме.
XML здесь используется, как уникальный "передатчик" данных. А вот с помощью какого инструмента на сервере он будет создан – не так уж важно. Вы можете использовать для этого PHP. Посмотрите, как работает
работает ajax-технология, к примеру, на официальном сайте Юрия Визбора в разделе поиск песни.
Данная технология на сегодняшний день является довольно сложной для ее реализации, поэтому эта тема заслуживает отдельной статьи.

Выводы
Интеграция языков программирования PHP и Javascript дает возможность сделать ваш сайт динамичным, удобным для пользователя, более функциональным.
Приходится признать, что Javascript "восстал из пепла", и не такой уж это "безмозглый крокодил", а "умное и страшное :) животное" – он еще проявит себя в полной мере!
«Орлы»-PHP стремительно расширяют зону своего обитания, и уже кружатся над Силиконовой долиной. То ли еще будет!

Запомним!

© 2005 Александр Петров, веб-студия WDT.RU
Вопросы, поправки и предложения по статье шлите по e-mail alexpetrov[]km.ru