BBProject.net » javascript

AJAX w jQuery dla początkujących

M@ster — Sun, 18 Apr 2010 19:10:40 +0000

Szybki i lekki kurs dla początkujących pod tytułem: AJAX w jQuery. Innymi słowy, jak przy pomocy tej biblioteki załadować dynamiczną treść bez przeładowania strony.

Wszystko czego będziemy potrzebować to biblioteka jQuery, dobre chęci oraz szczypta zapału. Przechodzimy na stronę jquery.com i pobieramy najnowszą wersję skryptu.

Ja na potrzeby tego wpisu stworzyłem sobie dwa pliki, pierwszy będący główną stroną która będzie korzystać z techniki AJAX, oraz drugą zawierającą ładowane treści – obie jako skrypty PHP, aby nie było zbyt nudno. Ok, przechodzimy do działania.

Pierwszym krokiem będzie dołączenie do dokumenty biblioteki jQuery w sekcji head strony:

Najprostszy przypadek

Czyli zwyczajne załadowanie zawartości innego pliku html/php bez przeładowania strony.

Dodam do naszej strony dwie warstwy, jedną która będzie przyjmować ładowane treści, i drugą z przyciskiem wywołującym zdarzenie.

Teraz pozostaje nam już tylko dodanie akcji do przycisku.

$(document).ready(function(){
  $('#btn').click(function(){
    $('#box').load('data.php');
  });
});

Może czas na wyjaśnienie powyższego kodu. Pierwsza linia przypisuje zdarzeniu załadowania strony funkcję w której określamy co ma się dziać. Jest to wymagane podczas używania jQuery (i nie tylko), aby mieć pewność że struktura dokumentu widziana przez przeglądarkę jest kompletna. Kolejno elementowi o identyfikatorze btn przypisujemy zdarzenie kliknięcia w którym do elementu box ładujemy przy pomocy funkcji .load dane z pliku data.php.

W data.php umieściłem zwyczajowy tekst, równie dobrze może to być plik html. Przy tak przygotowanym kodzie, kliknięcie przycisku „Wyślij” powinno skutkować pojawieniem się nad nim treści zawartej w zewnętrznym pliku.

Kompletny kod całego dokumentu wygląda następująco:

Przekazywanie parametrów

Jeśli powyższy przypadek chcielibyśmy wzbogacić o przekazanie jakichś parametrów do wywoływanego pliku data.php, musimy rozbudować nieco funkcję .load.

$('#box').load('data.php', {index: 4, str: 'abc'});

Drugi parametr określa tablicę par klucz: wartość. Dane te są przesyłane metodą POST, zatem mamy do nich łatwy dostęp w docelowym skrypcie php. Przykładowa zawartość data.php:

Index: 

Ciąg znaków:

Tym sposobem możemy wpływać na to co ma zostać załadowane. Podawane dane możemy odczytać z pola tekstowe lub innych zmiennych – wszystko zależy od naszej inwencji oraz umiejętności pisania w JavaScript.

Wysyłanie formularzy

Ostatnim punktem będzie wysłanie formularza. Można by oczywiście skorzystać z powyższej metody kopiując zawartości pól formy, jednak było by to mało wygodne. My skorzystamy z funkcji .serializeArray.

Zmodyfikowałem zawartość dokumentu wzbogacając go o prosty formularz z dwoma polami:



  
    Pole 1: 

    Pole 2:

Kolejno modyfikujemy kod JavaScript:

$('#box').load('data.php', $('#form').serializeArray());

Tym sposobem, do pliku data.php zostanie przekazana zawartość pól formularza o identyfikatorze form. Co z nimi zrobimy, zależy już od nas.

Podsumowanie

Mam nadzieję iż chociaż troszkę pomogłem osobą które po raz pierwszy próbowały użyć technologii AJAX przy pomocy jQuery. Bardziej zaawansowanym polecam zapoznanie się z resztą funkcji dostępnych w jQuery, które dają większe możliwości manipulacji danymi i tym co się dzieje podczas wywołania asynchronicznego.

CAPTCHA bez dręczenia użytkownika

M@ster — Thu, 08 Apr 2010 15:11:00 +0000

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) – rodzaj techniki stosowanej jako zabezpieczenie na stronach www, celem której jest dopuszczenie do przesłania danych tylko wypełnionych przez człowieka.

Źródło: http://pl.wikipedia.org/wiki/CAPTCHA

Zapewne nie raz spotkaliście się z kodami obrazkowymi które trudno było rozpoznać nawet człowiekowi. Widziałem już różne zabezpieczenia przeciw spam botom, mniej lub bardziej wymyślne, a nawet takie które spowodowały że sobie odpuściłem wysłanie formularza gdyż nie byłem w stanie ich pomyślnie przejść.

W tym wpisie pokaże Wam jak zrobić alternatywne metody weryfikacji człowieczeństwa bez denerwujących kodów obrazkowych czy innych mechanizmów utrudniających życie.

Być może to co opiszę ktoś już wynalazł i stosuje z powodzeniem, nie mniej, wymyśliłem to przy okazji jednego projektu gdzie po dziś dzień działa i spisuje się znakomicie – chyba że tą stronę omijają spam boty .

Idea

Na czym polega ów metoda? Na dynamicznej zmianie formularza, przed jego wysłaniem. Kolejno, w skrypcie PHP obsługującym daną formę, sprawdzamy poprawność struktury.

Spam boty, przeczesując sieć, odczytują z kodu HTML dostępne pola i wysyłają żądanie POST do lokacji widniejącej w parametrze action. Jeśli zmienimy formularz dynamicznie przy pomocy JavaScript’u, wtedy spam bot nie zobaczy tych zmian i wyśle pierwotną wersję – wyjątkiem było by tutaj gdyby bot działał jak przeglądarka i interpretował całą stronę, ale w to wątpię.

Praktyka

Jeśli powyższy opis nie jest zbyt jasny, to poniższy przykład rozwieje wszelkie wątpliwości.

Załóżmy że mamy prosty formularz z jednym polem tekstowym – na przykład do dodawania komentarzy na stronę.

Po wysłaniu takiej formy i zrzuceniu w PHP zawartości tablicy $_POST otrzymamy:

array(2) {
  ["comment"]=>
  string(14) "mój komentarz"
  ["submit"]=>
  string(7) "Wyślij"
}

I w ten sposób wyglądała by przesłana zawartość jeśli wysłał by ją spam bot. Teraz wprowadzimy kilka zmian, aby ta wysłana przez człowieka (tj. z tradycyjnej przeglądarki) różniła się od tej powyższej.

Skorzystam z biblioteki jQuery w celu łatwiejszego manipulowania elementami dokumentu HTML.

$(document).ready(function(){
  $('#form').append('');
  $('#form input[name="submit"]').removeAttr('name');
});

Co zrobiłem? Tuż po załadowaniu całego dokumentu, dodałem nowe ukryte pole formularza o nazwie key i wartości 234786. Kolejno, usunąłem atrybut name z przycisku submit. Po takim zabiegu, skrypt PHP widzi nasz formularz w następujący sposób:

array(2) {
  ["comment"]=>
  string(14) "mój komentarz"
  ["key"]=>
  string(6) "234786"
}

Jak widać, nie występuje już w tablicy $_POST w ogóle przycisk submit, a dodatkowo doszło ukryte pole key.

Jeśli teraz wyczulimy skrypt przetwarzający formularz na te zmiany, możemy odróżnić bota od człowieka:

if (( ! isset($_POST['submit'])) && isset($_POST['key']) && ($_POST['key'] == '234786'))
{
  echo 'jesteś człowiekiem :]';
}
else
{
  echo 'jesteś spam botem :[';
}

Zabezpieczenia

Pokazane tutaj rozwiązanie, w postaci usunięcia atrybutu przycisku submit, oraz dodanie pola hidden są tylko przykładowe. Siła tego rozwiązania tkwi w unikalności metody, a tutaj mamy naprawdę spore pole do popisu.

Możemy dodawać i usuwać pola. Manipulować nazwą lub zawartością pól ukrytych, np.: jego wartość musi być sumą kontrolną z tego co wpisze użytkownik w innym polu (wymagane podpięcie się pod zdarzenie onSubmit w takim wypadku). Możemy dodać pole z nazwą przeglądarki, adresem IP i porównać w skrypcie PHP czy się zgadzają oba wpisy. Pole do popisu jest naprawdę ogromne – niech poniesie Was fantazja, grunt to dobrze namieszać .

Sam kod JavaScript warto umieścić w zewnętrznym pliku oraz potraktować narzędziem typu kompresor JS. To utrudni ew. rozgryzienie naszego przypadku.

Uwagi

Czy jest to rozwiązanie idealne? Oczywiście nie. Pierwsza wada to wymagana obsługa JavaScript u użytkownika. Druga to łatwość obejścia tego typu zabezpieczenia przez człowieka. I tutaj są dwa aspekty tej przypadłości.

Autor bota musiał by przejrzeć kod naszej strony i zorientować się co tam się dokładnie dzieje i zmodyfikować swój twór. Jeśli przyjmiemy że każdy webmaster zastosuje inny algorytm zabezpieczający, to mało komu będzie się chciało dostosowywać swojego szkodnika do każdej strony z osobna tylko po to by móc masowo spamować. Koszt tej operacji przewyższał by zyski z rozsyłanego spamu.

Czyli, zasadniczo da się prosto dojść do tego jak spreparować formularz (chociaż jeśli ktoś namiesza to wcale to takie łatwe być nie musi ), jednak jest to z ekonomicznego punktu widzenia nieopłacalne dla spamera.

Firefox 3.6 – wydajność silnika JavaScript

M@ster — Thu, 21 Jan 2010 19:26:50 +0000

Wraz z wydaniem nowego ognistego lisa, oznaczonego numerem 3.6, otrzymaliśmy sporo zmian w tej przeglądarce. To co najbardziej interesujące z punktu widzenia programisty to wydajność silnika JavaScript, która została poprawiona wg. zapewnień producenta o ok. 20%.

Pokusiłem się o mały test przy pomocy benchmark’a SunSpider nowej wersji Firefox’a, tego jak wypada w porównaniu do poprzedniej 3.5.7, oraz na tle innych popularnych przeglądarek. Co z tego wyszło? Zobaczcie sami.

Wyniki przedstawione na poniższym wykresie są rezultatami testów SunSpider’a, podanymi w milisekundach. Ogólnie rzecz ujmując, im mniej, tym lepiej.

Stawkę otwiera Internet Explorer 8 z oszałamiającym wynikiem na poziomie prawie 5 sekund. Najlepiej wypada przeglądarka firmy Google, deklasując pozostałych rywali. Nowy Firefox 3.6 stara się zbliżyć do lidera poprawiając swój dotychczasowy wynik o 25%. Jak widzimy, słowa Mozilli są jednak coś warte jeśli chodzi o deklaracje wydajności.

Oczywiście bezwzględne wartości liczbowe zależą od konfiguracji sprzętowej na jakiej wykonywany był pomiar. Nie mniej, względne różnice między wersjami czy też przeglądarkami mówią nam o wydajności ich silnika JavaScript.

Jak przekłada się to na realne odczucia? W dobie popularyzacji technik takich jakich jak AJAX, oraz dominacji framework’ów pokroju jQuery, bardzo! Może nowa wersja produktu Mozilli, w porównaniu ze starszą, nie wgniecie nas w fotel, to jednak dobrze że producenci starają się implementować coraz to lepsze rozwiązania w tym zakresie.