W codziennej pracy Webmastera od czasu do czasu zdarza się sytuacja gdy do wykonania określonego zadania potrzeba zastosować zarówno skrypty działające po stronie serwera (np. napisane w PHP), jak i skrypty działające po stronie klienta, czyli w przeglądarce (tu praktycznie liczy się tylko JavaScript). Zadanie z pozoru jest błahe, może jednak niektórym sprawić spore kłopory. Ten artykuł opisuje techniki które można zastosować aby połączyć PHP i JavaScript.
Oczywiście PHP i JavaScript to nie jest jedyne możliwe połączenie – zaprezentowane poniżej techniki są na tyle ogólne, że można je wykorzystać do połączenia także innych języków, np. ASP i JavaScript. Należy tylko przepisać je w języku którego właśnie używasz.
Jak wykryć czy użytkownik ma włączony JavaScript
Sprawdzenie czy użytkownik odwiedzający witrynę posiada włączony JavaScript może być jednym z kluczowych elementów – jeżeli JavaScript nie jest obsługiwany przez przeglądarkę lub jest wyłączony, wówczas witryna może w ogóle stać się niedostępna dla takiej osoby. Dlatego warto w takim wypadku co najmniej wyświetlić komunikat o zaistniałej sytuacji, a idealnie – dostarczyć takiej osobie taką wersję strony, z której nadal będzie można w miarę wygodnie skorzystać.
Tutaj dodam że sytuacja że osoba odwiedzająca stronę posiada wyłączony JavaScript będzie się zdarzać coraz częściej, ze względu na rosnącą skalę zagrożeń w Internecie. Osobiście polecam plugin NoScript do przeglądarki Firefox – dzięki niemu możesz włączyć obsługę JavaScript tylko dla zaufanych witryn, przez co podniesiesz poziom bezpieczeństwa swojego komputera (oczywiście zakładam że masz już zainstalowany firewall i antywirus, bo to jest absolutna podstawa).
Wracając do tematu – niestety nie ma prostej możliwości sprawdzenia po stronie serwera czy JavaScript jest dostępny. Można owszem analizować zawartość nagłówka UserAgent, ale w ten sposób można się tylko dowiedzieć czy przeglądarka posiada możliwość obsługi JavaScript, ale nie czy JavaScript jest aktualnie włączony. Dlatego też aby mieć pewność że JavaScript jest włączony, trzeba posłużyć się skryptem JavaScript.
Wykorzystać tutaj można fakt, że w przypadku gdy JavaScript jest wyłączony lub nie jest obsługiwany, przeglądarka ignoruje zawartość znacznika <script>. Zamiast niego przetwarza zawartość znacznika <noscript>, który powinien znaleźć się tuż pod skryptem. Można zatem stworzyć następujący kawałek kodu:
<form action="strona.php" method="post"> <script type="text/javascript"><!-- document.write('<input type="hidden" name="js" value="1">'); //--></script> <noscript> <input type="hidden" name="js" value="0"> </noscript> </form>
Powyższy kod używa skryptu JavaScript do dodania do formularza ukrytego pola o nazwie „js” z wartością „1”. Jeżeli natomiast JavaScript byłby wyłączony, wtedy w formularzu pojawi się pole ukryte nazwane również quot;js”, ale posiadające wartość „0”. Dzięki temu w momencie gdy formularz zostanie wysłany, skrypt pracujący na serwerze (tutaj strona.php) może sprawdzić jaką wartość posiada $_POST['js'], i na tej podstawie określić czy JavaScript jest dostępny bądź nie.
W praktyce ten fragment kodu można np. dołączyć do formularza logowania – dzięki temu użytkownik nic nie zauważy, że własnie dokonuje się sprawdzenie czy ma on włączony JavaScript.
Przesyłanie danych z PHP do JavaScript
Najprostszym sposobem na przesłanie wartości zmiennych z PHP do JavaScript jest wysłanie z PHP skryptu JavaScript z ustawionymi odpowiednio zmiennymi:
// Ustawiamy wartości zmiennych $zmienna1 = 2; $zmienna2 = 27; // Drukujemy początek skryptu print "<script type='text/javascript'><!--\n"; // Drukujemy zmienne JS z przypisanymi wartościami print "var a = $zmienna1\n"; print "var b = $zmienna2\n"; // Dalszy fragment skryptu w JS print "document.write(a + b);\n"; // Zakończenie skryptu print "//--></script>\n";
Odmianą tej metody jest wysyłanie całego skryptu JavaScript jako wyniku wykonania skryptu PHP. Odpowiedni fragment kodu HTML powinien wyglądać następująco:
<script type="text/javascript" src="skrypt.php"></script>
Można także wysłać wartości zmiennych zapisane w ukrytych polach formularza. Stosując tą metodę należy pamiętać aby wysyłane dane najpierw przepuścić przez funkcję htmlspecialchars(), która zakoduje znaki specjalne HTML:
<form action="strona.php" method="post" name="f"> <input type="hidden" name="a" value="<?php= htmlspecialchars($zmienna_1) ?>"> <input type="hidden" name="b" value="<?php= htmlspecialchars($zmienna_2) ?>"> </form> <script type="text/javascript"> document.write(f.a.value + f.b.value); </script>
Musisz oczywiście pamiętać że wartości w ukrytych polach formularza są typu tekstowego (String), zatem powyższy fragment kodu połączy wartości z tych pól jako ciągi znaków. Jeżeli chcesz przekazać w ten sposób liczby, musisz dokonać ich konwersji w JavaScript na typ liczbowy.
Możesz także zastosować ten sposób aby wstawić wartości do innych typów pól formularza. Oczywiście te inne pola będą domyślnie wyświetlane na stronie (no chyba że je ukryjesz za pomocą stylów CSS).
Przesyłanie danych z JavaScript do PHP
Przesyłanie danych w odwrotnym kierunku, czyli z JavaScript do PHP, polega na wysłaniu do serwera żądania POST (lub GET), w którym będą zawarte odpowiednie dane. Najprościej można to zrobić poprzez stworzenie formularza z ukrytymi polami, które będą odpowiednio wypełniane przez skrypt JavaScript. Taki przygotowany formularz można następnie wysłać do serwera wykorzystując jego metodę submit(), lub też jeżeli jest to część formularza wypełnianego przez użytkownika, poczekać aż on sam to zrobi. Po stronie PHP zmienne będą jak zwykle dostępne w tablicy $_POST (lub $_GET).
Drugą metodą jest napisanie skryptu który przygotuje cały łańcuch zapytania GET (adres skryptu + parametry), a następnie przypisze go do właściwości document.location.href. Metoda ta jest bardziej skomplikowana niż poprzednia, gdyż należy zadbać samemu o odpowiednie zakodowanie zmiennych przed wysłaniem. Dodatkowo można skorzystać tylko z metody GET.
Obydwie podane metody wymagają przeładowana strony, co może być niepożądane. Można tego uniknąć poprzez zastosowanie ramki (np. <iframe>) o rozmiarze 1 piksela (1×1), której zawartość będzie się przeładowywać. Alternatywną metodą jest skorzystanie z obiektów HttpRequest lub XmlHttpRequest dostępnych w JavaScript, dzięki czemu można uniknąć zabawy z ramkami (przynajmniej w nowych przeglądarkach; jeżeli strona ma działać także pod tymi starszymi, trik z ramką będzie dalej przydatny).
AJAX
Obiekt XmlHttpRequest jest również wykorzystywany przez technologię AJAX (ang. Asynchronous JavaScript and XML – asynchroniczny JavaScript i XML). W dużym uproszczeniu technologia ta pozwala na „wywoływanie” funkcji PHP bezpośrednio z poziomu JavaScript. Tak naprawdę jednak po drodze żądanie kodowanie jest z użyciem XML, wysyłane do serwera, gdzie odpowiedni skrypt PHP przetwarza je i odsyła odpowiedź (też w postaci XML). Na odpowiedź tą czeka skrypt JavaScript, który ją rozkodowuje i może następnie skorzystać z przysłanych wyników. Więcej na temat tej technologii, jak również listę gotowych bibliotek AJAX, możesz znaleźć np. na Wikipedii.
Kwestie bezpieczeństwa
Pisząc skrypty PHP współpracujące ze skryptami JavaScript musisz mieć cały czas na uwadze kwestie bezpieczeństwa. To że dana wartość wysyłana do skryptu PHP jest przetwarzana przez JavaScript i normalny użytkownik nie może jej zmodyfikować nie jest żadnym zabezpieczeniem – napastnik zawsze może przeanalizować kod strony i napisać kawałek programu (albo nawet skryptu, np. w Perl’u), który wyśle odpowiednio spreparowane dane do serwera. Czasem nawet aż tak nie musi się męczyć – wystarczy że trochę poszuka i znajdzie plugin do przeglądarki, który pozwoli mu na modyfikację pól formularza na stronie w dowolny sposób. Dlatego wszystkie dane przesyłane z zewnątrz do skryptu PHP muszą być bezwzględnie walidowane pod kątem poprawności, jak również odpowiednio zakodowane przed np. zapisem do bazy danych czy wyświetleniem na stronie WWW. Brak zastosowania się do tych wskazówek może umożliwić przeprowadzenie np. ataku SQL Injection lub Cross Site Scripting (XSS).
Komentarze