PHP и JavaScript

Совместное использование PHP и JavaScript

Разместил на этой странице примеры написания кода, и результаты совместного использования двух самых основных языков программирования: PHP и JavaScript.

Такое позволяет взаимодействовать с сервером БЕЗ перезагрузки страниц. Иногда с частичной перезагрузкой.

Всё происходит здесь, на этой странице, т.е. совершенно без участия и загрузки отдельного "файла-обработчика".

Код, написанный по этой технологии, всегда состоит из двух частей. Одна из них выполняется в браузере (JavaScript), а вторая (PHP) на сервере.

Для передачи данных (т.е. значений переменных) из одного языка программирования в скрипты другого, и существует такая отличная технология совместного использования PHP и JavaScript.

*Prim.
Некоторые программисты считают, что это и НЕ технология вовсе, а лишь способ обмена данными. Ну, ... ... ... пусть себе считают.
Человек, по курсам которого учился программированию я, считает по-другому. Да, какая в конце концов разница, что это?!!

Главное(!), что с помощью такого, пусть способа, возможно собирать очень интересные и полезные программные конструкции для сайтов.

Сначала самый простой пример работы и написания скрипта.

Передача данных из кода PHP в код JavaScript

Пробовал слово "Вася" взять в переменную в коде PHP, и передать её значение для вывода в код JavaScript.

Видно, что всё прошло "на ура"! Даже цвет и размер шрифта передался.
"Вася" преспокойно "переехал" из одного языка программирования в другой. Разумеется, не сама переменная "переехала", а именно её значение. Это важно!

**Сама переменная никогда и никуда НЕ передаётся, и передаваться НЕ может.
Она часть программы. Передаётся только её значение.

Пример написания.*
<?php
$name = "<font size='+2' color='blue'><b>Вася</b></font>";
?>
<script type="text/javascript">
var name = "<?php echo $name; ?>";
document.write(name);
</script>

P.S.* Работает и БЕЗ(!) создания глобальной переменной var, но всё же так, как сделал, будет правильнее.

Передача данных из JavaScript в код PHP

Теперь пробую Н А О Б О Р О Т. Разница есть! Этот способ немного отличается. Ведь JavaScript - клиентский скрипт, т.е. исполняемый у нас в браузере компьютера, а PHP - серверный.

Поэтому, просто так, как в верхнем примере, сделать уже "не прокатит". Нужно прописать метод. Иначе работать не будет!

Чаще всего используются методы: GET (для ссылок) и POST (для форм).
Хотя есть и более "экзотические" методы общения с сервером: TRACE DELETE PUT, и им подобные.

Из JavaScript в код PHP (методом GET)

По сути - всё то же самое. Принцип один(!): прописываем текст, его цвет и размер в "чистом" коде JavaScript, а после средствами PHP создаём команду вывода на языке JavaScript, используя оператор вывода языка PHP echo.

Видно, что здесь тоже всё прошло отлично!

Пример написания.*
<script type="text/javascript">
var name2 = "<font size='+2' color='blue'><b>Александр</b></font>";
</script>
<?php
$name2 = $_GET["name2"];
echo "<script type='text/javascript'>";
echo "document.write(name2);";
echo "</script>";
?>

Ниже пример совместной работы двух языков программирования по второму методу.

Из JavaScript в код PHP (методом POST)

Дальше не стал выводить на экран монитора примеры написания использованных языковых конструкций.

Всё абсолютно то же самое! Разница только, что вместо "вытаскивания" из глобального массива $_GET, прописываем $_POST. И всё! Результат работы кода ниже.

Показал самые простые примеры совместного использования (один внутри другого) двух языков программирования.

**Очень важно! Быть внимательнее с синтаксисом!
Нужно прописывать ПОЛНЫЙ синтаксис JavaScript внутри кода PHP, и наоборот: ПОЛНЫЙ синтаксис PHP внутри JavaScript.

Дальше покажу более сложные, наглядные примеры, которые позволяют себя опробовать прямо на этой странице.

Примеры практического использования

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

Из JavaScript в PHP (метод POST)

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

Можно ввести свой текст. Максимальное количество символов: 20 Не забывать! Пробел тоже символ! Подробнее об особенностях работы такой формы - под ней.

Передано в PHP-код:

Как уже писал, тестовая форма после клика по кнопке "Подача запроса" исчезает.

Так и должно быть. Так я прописал в её коде.
Важно! Желая ещё раз опробовать работу формы, нужно обновить страницу. НО! Это нужно делать НЕ(!) через такой символ обновления (или ему подобный) в верхней панели управления браузером, а сначала выделить в поисковой строке адрес страницы, и нажать клавишу ENTER на клавиатуре.
Такое действие скажет браузеру, чтобы он не брал данные из "кэша", а загрузил всё ещё раз. Иначе компьютер будет задавать неуместные здесь вопросы.

Есть ещё один интересный пример практического использования.

Изменение данных с помощью AJAX

Технология AJAX, несмотря на своё название "Asynchronous Javascript And Xml", может работать не только с файлами XML, а с разным типом.

Испытывая её неоднократно во время изучения, пробовал получать данные из файлов разных форматов: .htm .html .php .json, и даже простого .txt *Работают!

Проверял файл ajax.txt на сервере сайта, но оказалось, что содержание гораздо проще и лучше всего(!) менять, получая данные из файлов с форматом .htm

К примеру, нижний тестовый блок получает их из ajax.htm

Позволить коду по технологии AJAX изменить содержание этого пробного блока?

Для повторного испытания работы скрипта, нужно просто обновить страницу, как обычно, через кнопку верхней панели управления.

*Prim. Если вдруг компьютер снова начнёт задавать вопросы, значит - после проверки предыдущего кода страница НЕ была перезагружена, как было нужно.

* * *

Показанный пример использования технологии AJAX для обмена данными между двумя файлами хорош(!), конечно. Так можно передавать многое: не только текст, но и картинки, ссылки.

К тому же(!), входящий файл начинает "понимать" стиль CSS этой страницы, хотя сам он абсолютно "голый".

Главное! При внесении изменений во входящий файл, НЕ ЗАБЫТЬ(!) обратиться к нему "напрямую", чтобы изменения вступили в силу.

Интересный пример. Всё так. Здорово! ... ... ... НО!

Он гораздо "хитрее" по своему устройству, чем все показанные до него примеры. Да, и не только это.

Пришлось текстовую информацию написать на английском языке. Русские символы верно показывал только Internet Explorer 8.

Однако, самое главное "НО!" не в этом, а в том, что попытки создать и использовать ещё один тестовый блок (подобный показанному) на этой же странице ни к чему хорошему не привели.
Компьютер "вконец запутался", чего от него хотят, и локальный сервер стал давать сбои.

Оно и понятно! Нагрузка на сервер значительно возросла.
Ведь клик по управляющей кнопке запускает целую мини-программу: компьютер создаёт запрос к серверу, связывается с ним, считывает содержание нужного файла, но выводит НЕ ЕГО, а создаёт новый XML-документ. Короче - целая "бодяга"!

Поэтому, хоть последний показанный способ обмена данными и интересен, но мне всё же больше нравятся простые. Те, что показывал ДО него.

Тем не менее!
Если вдруг будет нужно, то отличная, подробнейшая(!) информация по созданию и настройке XMLHttpRequest (ajax-запросов) находится здесь.

В заключение маленькое дополнение о похожих способах изменения данных.

Дополнение

Последний показанный пример внешне очень похож на те, что я показывал в большом разделе, посвящённом изучению JavaScript на странице "Спойлеры" (откроется в новом окне).

Однако, это именно внешне!
Там всё уже было на самой странице, и просто пряталось/показывалось методами языка JavaScript hide/show.

Здесь же страница ничего не знает (до клика по кнопке) о содержании подключённого к ней файла.

Синяя стрелка вернёт на общую, главную страницу выбора тем: "Изучение PHP".

ВВЕРХ