Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00313 005349 19045349 na godz. na dobę w sumie
PHP, MySQL i JavaScript. Wprowadzenie. Wydanie V - książka
PHP, MySQL i JavaScript. Wprowadzenie. Wydanie V - książka
Autor: Liczba stron: 736
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-5149-3 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> jquery - programowanie
Porównaj ceny (książka, ebook (-35%), audiobook).

Trio: PHP, MySQL i JavaScript jest znane jako najwygodniejszy zestaw narzędzi do tworzenia dynamicznych stron internetowych, które do działania wymagają bazy danych. Mimo upływu lat i dynamicznego rozwoju konkurencyjnych technologii twórcy aplikacji WWW wciąż cenią PHP, MySQL i JavaScript za otwarte źródła, brak opłat za korzystanie, elastyczność i łatwość w nauce. Każdy ambitny programista posługujący się systemem Unix czy Linux z serwerem Apache powinien zapoznać się z tymi narzędziami. W połączeniu z takimi technologiami jak jQuery, CSS i HTML5 pozwalają budować serwisy porównywalne z gigantami w rodzaju Facebooka, Twittera czy Gmaila.

Ta książka jest kolejnym, uzupełnionym i zaktualizowanym wydaniem znakomitego wprowadzenia do projektowania dynamicznych stron internetowych. Oprócz przystępnego omówienia technik tworzenia responsywnych stron WWW znalazły się tu solidne podstawy PHP, MySQL, JavaScriptu, CSS i HTML5; opisano też możliwości bibliotek jQuery i jQuery Mobile. Pokazano, jak połączyć możliwości tych technologii, oraz opisano zalecane metody programowania. Co istotne, w książce zawarto wskazówki dotyczące optymalizacji stron WWW pod kątem urządzeń mobilnych. Dzięki licznym przykładom uzyskaną wiedzę można na bieżąco testować w praktyce.

W tej książce między innymi:

PHP, MySQL i JavaScript: klasyczne narzędzia dla nowoczesnych rozwiązań!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Learning PHP, MySQL JavaScript: With jQuery, CSS HTML5, 5th Edition Tłumaczenie: Piotr Cieślak ISBN: 978-83-283-5149-3 © 2019 Helion S.A. Authorized Polish translation of the English edition of Learning PHP, MySQL JavaScript 5e ISBN 9781491978917 © 2018 Robin Nixon This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Helion SA dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Helion SA nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Helion SA ul. Kościuszki 1c, 44-100 Gliwice tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/phmyj5 Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treści Przedmowa ................................................................................................................23 HTTP i HTML: podstawy wynalazku Bernersa-Lee Procedura żądanie/odpowiedź Zalety PHP, MySQL, JavaScriptu, CSS i HTML5 1. Wst(cid:253)p do dynamicznych stron internetowych ........................................................27 28 28 31 32 32 33 34 35 36 37 37 38 38 40 MariaDB — klon MySQL Zastosowanie PHP Zastosowanie MySQL Zastosowanie JavaScriptu Zastosowanie CSS I HTML5 na dokładkę Serwer WWW Apache Obsługa urządzeń mobilnych Kilka słów o open source Zgrany zespół Pytania WAMP, MAMP, LAMP — a cóż to takiego? Instalowanie pakietu AMPPS w systemie Windows Testowanie instalacji Dostęp do katalogu głównego w systemie Windows Inne pakiety WAMP AMPPS i macOS 2. Konfigurowanie serwera .......................................................................................... 41 42 42 46 48 49 49 50 51 52 52 52 Instalowanie pakietu LAMP pod Linuksem Praca zdalna Logowanie Obsługa FTP Dostęp do katalogu głównego w systemie macOS 5 Poleć książkęKup książkę Obsługa edytora kodu Obsługa środowiska IDE Pytania Dodawanie elementów PHP do kodu HTML Przykłady z tej książki Składnia PHP Zastosowanie komentarzy Podstawowa składnia Zmienne Operatory Przypisywanie wartości zmiennym Instrukcje wielowierszowe Deklaracja typu zmiennych Stałe Stałe predefiniowane Różnica między instrukcjami echo i print Funkcje Zasięg zmiennych 53 54 56 3. Wst(cid:253)p do PHP .............................................................................................................57 57 58 59 59 60 61 65 68 71 73 74 74 75 76 77 81 4. Wyra(cid:348)enia i sterowanie dzia(cid:293)aniem programu w PHP ............................................83 83 83 85 86 86 88 89 93 93 95 96 97 99 101 101 103 103 105 106 Pętla while Pętla do … while Pętla for Przerywanie pętli Instrukcja continue Instrukcja if Instrukcja else Instrukcja elseif Instrukcja switch Operator ? Pętle Pytania Wyrażenia Prawda czy fałsz? Literały i zmienne Operatory Priorytet operatorów Asocjacyjność Operatory relacji Wyrażenia warunkowe 6 (cid:95) Spis treści Poleć książkęKup książkę Rzutowanie jawne i niejawne Dynamiczne linkowanie w PHP Dynamiczne linkowanie w praktyce Pytania 106 107 108 109 Dołączanie i wymaganie plików Instrukcja include Zastosowanie instrukcji include_once Zastosowanie instrukcji require i require_once Funkcje PHP Definiowanie funkcji Zwracanie wartości Zwracanie tablicy Przekazywanie argumentów przez referencję Zwracanie zmiennych globalnych Przypomnienie informacji o zasięgu zmiennych 5. Funkcje i obiekty w PHP ............................................................................................ 111 112 113 113 115 115 117 117 118 118 118 119 119 120 120 121 122 122 124 125 125 126 126 127 128 129 129 130 133 Sprawdzanie zgodności wersji PHP Obiekty w PHP Terminologia Deklarowanie klasy Tworzenie obiektu Odwoływanie się do obiektów Klonowanie obiektów Konstruktory Destruktory Tworzenie metod Deklarowanie właściwości Deklarowanie stałych Zasięg właściwości i metod Metody statyczne Właściwości statyczne Dziedziczenie Pytania Prosty dostęp 6. Tablice w PHP .......................................................................................................... 135 135 135 137 137 Tablice indeksowane numerycznie Tablice asocjacyjne Dodawanie pozycji do tablicy przy użyciu słowa kluczowego array Spis treści (cid:95) 7 Poleć książkęKup książkę Pętla foreach … as Tablice wielowymiarowe Zastosowanie funkcji do obsługi tablic is_array count sort shuffle explode extract compact reset end Pytania 138 140 143 143 143 143 144 144 145 146 147 147 147 Zastosowanie funkcji printf Określanie precyzji Dopełnianie łańcuchów tekstowych Zastosowanie funkcji sprintf Funkcje do obsługi daty i czasu Stałe związane z datą Zastosowanie funkcji checkdate Obsługa plików 7. PHP w praktyce ........................................................................................................149 149 150 152 153 153 154 156 156 157 157 158 160 160 160 161 162 163 164 169 170 171 Sprawdzanie istnienia pliku Tworzenie pliku Odczytywanie zawartości plików Kopiowanie plików Przenoszenie pliku Kasowanie pliku Aktualizowanie plików Ochrona plików przed wielokrotnym otwarciem Odczytywanie całego pliku Wysyłanie plików Wywołania systemowe XHTML czy HTML5? Pytania 8. Wst(cid:253)p do MySQL ..................................................................................................... 173 173 174 Podstawy MySQL Podsumowanie pojęć dotyczących baz danych 8 (cid:95) Spis treści Poleć książkęKup książkę Dostęp do MySQL z poziomu wiersza poleceń Uruchamianie wiersza poleceń Obsługa serwera z poziomu wiersza poleceń Instrukcje MySQL Typy danych Indeksy Tworzenie indeksu Tworzenie zapytań do bazy MySQL Łączenie tabel Zastosowanie operatorów logicznych Funkcje MySQL Dostęp do MySQL za pośrednictwem aplikacji phpMyAdmin Pytania 174 174 178 179 184 193 193 198 206 209 209 209 211 Klucze główne, czyli kluczowy element relacyjnych baz danych Relacje Jeden do jednego Jeden do wielu Wiele do wielu Bazy danych i anonimowość Transakcje Projektowanie bazy Normalizacja Pierwsza postać normalna Druga postać normalna Trzecia postać normalna Kiedy nie stosować normalizacji 9. Zaawansowana obs(cid:293)uga MySQL ............................................................................ 213 213 214 215 215 218 220 222 223 223 224 224 226 226 226 227 228 228 228 230 230 231 233 233 234 234 Mechanizmy składowania danych z obsługą transakcji Instrukcja BEGIN Instrukcja COMMIT Instrukcja ROLLBACK Instrukcja EXPLAIN Instrukcja mysqldump Tworzenie pliku z kopią zapasową Odtwarzanie danych z pliku kopii zapasowej Zapisywanie danych w formacie CSV Planowanie tworzenia kopii zapasowych Archiwizacja i przywracanie danych Pytania Spis treści (cid:95) 9 Poleć książkęKup książkę Tworzenie zapytań do bazy MySQL za pośrednictwem PHP Proces Tworzenie pliku logowania Nawiązywanie połączenia z MySQL Praktyczny przykład Tablica $_POST Usuwanie rekordu Wyświetlanie formularza Wysyłanie zapytań do bazy danych Działanie programu 10. Korzystanie z MySQL za po(cid:316)rednictwem PHP ........................................................237 237 237 238 239 244 246 247 247 248 249 250 250 251 252 252 253 253 254 254 255 256 257 258 260 262 263 MySQL w praktyce Tworzenie tabeli Wyświetlanie informacji o tabeli Usuwanie tabeli Dodawanie danych Odczytywanie danych Aktualizowanie danych Usuwanie danych Zastosowanie opcji AUTO_INCREMENT Wykonywanie zapytań pomocniczych Działania prewencyjne Zastosowanie elementów zastępczych Zapobieganie przekazywaniu niepożądanych danych przez HTML Proceduralny wariant zastosowania mysqli Pytania Zapobieganie próbom ataków Tworzenie formularzy Odczytywanie przesłanych danych Wartości domyślne Rodzaje pól Oczyszczanie danych wejściowych 11. Obs(cid:293)uga formularzy .................................................................................................265 265 267 268 269 276 278 280 280 281 281 281 281 Przykładowy program Usprawnienia w HTML5 Atrybut autocomplete Atrybut autofocus Atrybut placeholder Atrybut required Atrybuty nadpisania 10 (cid:95) Spis treści Poleć książkęKup książkę Atrybuty width i height Atrybuty min i max Atrybut step Atrybut form Atrybut list Pole wejściowe typu color Pola wejściowe typu number i range Selektory daty i czasu Pytania 282 282 282 282 283 283 283 283 284 Zastosowanie ciasteczek w PHP Tworzenie ciasteczka Dostęp do ciasteczka Usuwanie ciasteczek 12. Ciasteczka, sesje i autoryzacja ................................................................................285 285 287 288 288 288 291 293 296 297 299 300 300 304 Inicjowanie sesji Kończenie sesji Określanie czasu trwania sesji Bezpieczeństwo sesji Przechowywanie loginów i haseł Przykładowy program Pytania Autoryzacja HTTP Obsługa sesji JavaScript i tekst w HTML Zastosowanie komentarzy Średniki Zmienne Zastosowanie skryptów w nagłówku dokumentu Starsze i niestandardowe przeglądarki Dołączanie plików JavaScript Debugowanie kodu JavaScript 13. Zapoznanie z JavaScriptem ....................................................................................305 305 307 307 309 309 310 310 310 311 311 311 312 312 313 313 Zmienne znakowe Zmienne numeryczne Tablice Operatory Operatory arytmetyczne Operatory przypisania Operatory porównania Spis treści (cid:95) 11 Poleć książkęKup książkę Operatory logiczne Inkrementacja i dekrementacja zmiennych oraz skrócony zapis tych operacji Konkatenacja łańcuchów znaków Znaki modyfikujące Typowanie zmiennych Funkcje Zmienne globalne Zmienne lokalne Obiektowy model dokumentu Kolejne zastosowanie symbolu $ Zastosowanie obiektowego modelu dokumentu Kilka słów o document.write Zastosowanie funkcji console.log Zastosowanie funkcji alert Umieszczanie tekstu w elementach HTML Zastosowanie funkcji document.write Pytania 314 314 314 315 315 316 316 317 318 319 320 321 321 321 321 321 322 Wyrażenia Literały i zmienne Operatory Priorytet operatorów Asocjacyjność Operatory relacji Instrukcja with Zdarzenie onerror Konstrukcja try … catch Wyrażenia warunkowe 14. Wyra(cid:348)enia i sterowanie dzia(cid:293)aniem programu w JavaScripcie ............................323 323 324 325 325 326 326 329 330 331 332 332 332 333 335 335 335 336 337 337 338 339 339 Instrukcja if Instrukcja else Instrukcja switch Operator ? Pętle Pętle while Pętle do … while Pętle for Przerywanie pętli Instrukcja continue Typowanie jawne Pytania 12 (cid:95) Spis treści Poleć książkęKup książkę Funkcje w JavaScripcie Definiowanie funkcji Zwracanie wartości Zwracanie tablicy Obiekty w JavaScripcie Deklarowanie klasy Tworzenie obiektu Dostęp do obiektów Słowo kluczowe prototype 15. Funkcje, obiekty i tablice w JavaScripcie ................................................................ 341 341 341 343 344 345 345 347 347 347 350 350 351 352 353 358 Tablice w JavaScripcie Tablice numeryczne Tablice asocjacyjne Tablice wielowymiarowe Zastosowanie metod do obsługi tablic Pytania Weryfikowanie wprowadzonych danych przy użyciu JavaScriptu Wyrażenia regularne Dokument validate.html (część pierwsza) Dokument validate.html (część druga) 16. Weryfikacja danych i obs(cid:293)uga b(cid:293)(cid:253)dów w JavaScripcie i PHP .................................359 359 360 362 365 365 366 367 367 368 368 368 371 373 373 373 374 380 Dopasowywanie za pomocą metaznaków Dopasowanie „rozmyte” Grupowanie przy użyciu nawiasów Klasy znaków Określanie zakresu Zaprzeczenie Kilka bardziej skomplikowanych przykładów Podsumowanie metaznaków Modyfikatory ogólne Zastosowanie wyrażeń regularnych w JavaScripcie Zastosowanie wyrażeń regularnych w PHP Ponowne wyświetlenie formularza po weryfikacji w PHP Pytania Czym jest komunikacja asynchroniczna? Zastosowanie obiektu XMLHttpRequest 17. Zastosowanie komunikacji asynchronicznej .......................................................... 381 382 382 384 388 Twój pierwszy program asynchroniczny Zastosowanie metody GET zamiast POST Spis treści (cid:95) 13 Poleć książkęKup książkę Przesyłanie żądań XML Zastosowanie bibliotek komunikacji asynchronicznej Pytania 390 395 395 Importowanie arkusza stylów Importowanie stylów CSS z poziomu HTML Style zagnieżdżone Style domyślne Style użytkownika Zewnętrzne arkusze stylów Style wewnętrzne Style bezpośrednie Zastosowanie identyfikatorów ID Zastosowanie klas Zastosowanie średników Reguły CSS 18. Wst(cid:253)p do CSS ...........................................................................................................397 398 398 399 399 399 400 400 400 401 402 402 402 403 403 404 404 404 404 405 406 407 407 408 408 408 409 410 410 412 414 416 416 417 417 418 Selektor typu Selektor potomka Selektor dziecka Selektor identyfikatora Selektor klasy Selektor atrybutu Selektor uniwersalny Selekcja grupowa Dziedziczenie kaskadowe Źródła stylów Metody definiowania reguł Selektory arkuszy stylów Różnica między elementami div i span Jednostki miar Fonty i typografia Wiele deklaracji Zastosowanie komentarzy Rodzaje stylów Selektory CSS font-family font-style font-size font-weight 14 (cid:95) Spis treści Poleć książkęKup książkę Zarządzanie stylami tekstu Efekty tekstowe Odstępy Wyrównanie Wielkość znaków Wcięcia Kolory w CSS Skrócone określenia kolorów Gradienty Rozmieszczanie elementów Położenie bezwzględne Położenie względne Położenie stałe Pseudoklasy Skracanie reguł Model pudełkowy i układ strony Definiowanie marginesów Definiowanie ramek Definiowanie odstępu Zawartość obiektu Pytania 418 418 419 419 419 419 420 421 421 422 422 423 423 425 427 428 428 430 431 432 432 Dopasowywanie fragmentów łańcuchów Selektory atrybutów Właściwość box-sizing Tła w CSS3 Właściwość background-clip Właściwość background-origin Właściwość background-size Zastosowanie właściwości auto Wiele obrazów w tle 19. Zaawansowane regu(cid:293)y CSS w CSS3 ........................................................................435 436 436 437 438 438 439 440 440 441 442 442 443 446 446 447 448 448 449 Cienie Właściwość overflow Układ wielokolumnowy Kolory i przezroczystość Ramki w CSS3 Właściwość border-color Właściwość border-radius Kolory HSL Kolory HSLA Spis treści (cid:95) 15 Poleć książkęKup książkę Kolory RGB Kolory RGBA Właściwość opacity Efekty tekstowe Właściwość text-shadow Właściwość text-overflow Właściwość word-wrap Fonty internetowe Fonty Google Przekształcenia Przekształcenia 3D Przejścia Właściwości przejść Czas trwania przejścia Opóźnienie przejścia Dynamika przejścia Skrócona składnia Pytania 449 450 450 450 450 451 451 452 453 454 455 456 456 457 457 457 458 459 Dostęp do właściwości CSS z poziomu JavaScriptu Niektóre typowe właściwości Inne właściwości JavaScript w kodzie HTML Ponowne spotkanie z funkcją getElementById Funkcja O Funkcja S Funkcja C Dołączanie opisanych funkcji 20. Dost(cid:253)p do CSS z poziomu JavaScriptu ....................................................................461 461 461 462 463 463 464 464 465 467 468 468 469 470 471 472 473 473 474 474 476 477 Zastosowanie przerwania setTimeout Anulowanie opóźnienia Zastosowanie przerwania setInterval Animacje na bazie przerwań Usuwanie elementów Inne sposoby na dodawanie i usuwanie elementów Słowo kluczowe this Łączenie zdarzeń i obiektów w skrypcie Odwoływanie się do innych zdarzeń Dodawanie nowych elementów Zastosowanie przerwań Pytania 16 (cid:95) Spis treści Poleć książkęKup książkę Dlaczego jQuery? Dołączanie jQuery Składnia jQuery Prosty przykład Unikanie konfliktów między bibliotekami Efekty specjalne Obsługa zdarzeń Oczekiwanie na gotowość dokumentu Funkcje i właściwości związane ze zdarzeniami Selektory Metoda css Selektor elementów Selektor identyfikatorów Selektor klas Łączenie selektorów Wybór odpowiedniej wersji Pobieranie Zastosowanie sieci dostarczania treści (CDN) Dostosowywanie jQuery 21. Wprowadzenie do jQuery .......................................................................................479 479 480 480 481 482 482 483 483 484 484 485 485 486 486 486 486 488 489 489 490 491 492 493 494 496 497 498 499 500 501 502 502 504 506 507 508 508 509 511 Zdarzenia blur i focus Słowo kluczowe this Zdarzenia click i dblclick Zdarzenie keypress Przemyślane programowanie Zdarzenie mousemove Inne zdarzenia myszy Inne metody związane z obsługą myszy Zdarzenie submit Ukrywanie i wyświetlanie Metoda toggle Stopniowe zanikanie i wyświetlanie Przesuwanie elementów w górę i w dół Animacje Zatrzymywanie animacji Manipulowanie drzewem DOM Różnica między metodami text i html Metody val i attr Dodawanie i usuwanie elementów Dynamiczne stosowanie klas Spis treści (cid:95) 17 Poleć książkęKup książkę Modyfikowanie wymiarów Metody width i height Metody innerWidth i innerHeight Metody outerWidth i outerHeight Nawigowanie w obrębie drzewa DOM Elementy nadrzędne Elementy potomne Elementy siostrzane Wybieranie poprzedzających i kolejnych elementów Przetwarzanie selekcji w jQuery Metoda is Użycie jQuery bez selektorów Metoda $.each Metoda $.map Zastosowanie komunikacji asynchronicznej Zastosowanie metody POST Zastosowanie metody GET Rozszerzenia jQuery User Interface Inne rozszerzenia Pytania 512 512 514 514 514 515 519 519 521 522 523 525 525 526 526 526 527 528 528 528 529 Dołączanie biblioteki jQuery Mobile Zaczynamy Dołączanie stron Dołączanie synchroniczne Odsyłacze w ramach wielostronicowego dokumentu Przejścia między stronami 22. Wprowadzenie do jQuery Mobile ........................................................................... 531 532 533 534 535 535 536 539 541 542 544 546 546 Stylizowanie przycisków Obsługa list Listy z możliwością filtrowania Separatory list Co dalej? Pytania 23. Wst(cid:253)p do HTML5 .....................................................................................................549 549 551 552 Obiekt canvas Geolokacja Dźwięk i filmy 18 (cid:95) Spis treści Poleć książkęKup książkę Formularze Magazyn danych Web workers Pytania 553 554 554 554 Tworzenie elementu canvas i dostęp do niego Umieszczanie napisów na elemencie canvas Metoda strokeText Własność textBaseLine Własność font Własność textAlign Metoda fillText Metoda measureText Funkcja toDataURL Określanie formatu obrazu Metoda fillRect Metoda clearRect Metoda strokeRect Łączenie wymienionych instrukcji Metoda createLinearGradient Szczegółowe informacje o metodzie addColorStop Metoda createRadialGradient Wypełnianie wzorkami 24. Obiekt canvas w HTML5 ..........................................................................................555 555 557 558 558 559 559 559 560 562 563 565 566 567 567 567 568 568 569 570 570 570 572 572 573 573 573 574 575 578 578 578 581 581 583 Metoda arc Metoda arcTo Metoda quadraticCurveTo Metoda bezierCurveTo Kreślenie ścieżek Metody moveTo i lineTo Metoda stroke Metoda rect Wypełnianie obszarów Metoda clip Metoda isPointInPath Zastosowanie krzywych Rysowanie linii Własność lineWidth Własności lineCap i lineJoin Własność miterLimit Spis treści (cid:95) 19 Poleć książkęKup książkę Obsługa obrazków Metoda drawImage Skalowanie obrazu Wybieranie fragmentu obrazu Kopiowanie z elementu canvas Tworzenie cieni Przetwarzanie obrazu na poziomie pikseli Metoda getImageData Metoda putImageData Metoda createImageData Zaawansowane efekty graficzne Własność globalCompositeOperation Własność globalAlpha Przekształcenia Metoda scale Metody save i restore Metoda rotate Metoda translate Metoda transform Metoda setTransform Pytania 584 584 584 585 586 586 587 588 591 591 591 591 593 594 594 595 596 596 598 600 600 25. Filmy i d(cid:346)wi(cid:253)k w HTML5 .......................................................................................... 601 602 603 605 607 607 611 612 O kodekach Element audio Wsparcie dla przeglądarek nieobsługujących HTML5 Element video Kodeki wideo Obsługa starszych przeglądarek Pytania 26. Inne funkcje HTML5 ................................................................................................. 613 613 Geolokacja i usługi GPS 614 Inne sposoby lokalizacji Geolokacja i HTML5 615 617 Magazyn lokalny 618 618 620 622 Zastosowanie magazynu lokalnego Obiekt localStorage Web workers Technologia przeciągnij i upuść 20 (cid:95) Spis treści Poleć książkęKup książkę Komunikacja między dokumentami Inne znaczniki HTML5 Pytania 624 628 628 Funkcje header.php setup.php index.php signup.php Dodawanie tekstu „O mnie” Dodawanie zdjęcia profilowego Przetwarzanie obrazu Wyświetlanie bieżącego profilu members.php Wyświetlanie profilu użytkownika Dodawanie i usuwanie znajomych Wyświetlanie listy wszystkich użytkowników Projektowanie aplikacji — serwisu społecznościowego Strona WWW z przykładami functions.php Sprawdzanie dostępności nazwy użytkownika Logowanie checkuser.php login.php profile.php 27. Zastosowanie wszystkich omówionych technologii .............................................629 630 630 630 631 633 635 636 637 639 639 640 641 642 644 644 644 645 647 649 649 649 650 653 656 657 660 friends.php messages.php logout.php styles.css javascript.js A Odpowiedzi na pytania kontrolne .......................................................................... 661 B Zasoby internetowe ................................................................................................ 681 C S(cid:293)owa z grupy stopwords w MySQL .......................................................................685 D Funkcje MySQL .........................................................................................................689 E Selektory, obiekty i metody jQuery ........................................................................699 Skorowidz .................................................................................................................721 Spis treści (cid:95) 21 Poleć książkęKup książkę 22 (cid:95) Spis treści Poleć książkęKup książkę ROZDZIAŁ 17. Zastosowanie komunikacji asynchronicznej Pojęcie Ajax po raz pierwszy zostało użyte w 2005 roku. Pochodzi ono od określenia Asynchronous JavaScript and XML, a bardziej przystępnie oznacza pewien zestaw wbudowanych metod języka JavaScript, służących do przesyłania danych „w tle” między przeglądarką a serwerem. Termin ten został jednak w dużej mierze zarzucony na rzecz bardziej potocznego określenia komunikacja asynchroniczna. Doskonałym przykładem zastosowania tej technologii są Mapy Google (rysunek 17.1) — przeglądarka pobiera z serwera nowe części mapy dopiero wtedy, gdy są potrzebne, bez konieczności przeładowy- wania strony. Rysunek 17.1. Mapy Google to doskonały przykład praktycznego zastosowania komunikacji asynchronicznej 381 Poleć książkęKup książkę Zastosowanie komunikacji asynchronicznej nie tylko zdecydowanie zmniejsza ilość danych przesyła- nych w obu kierunkach, ale sprawia, że strony internetowe obsługuje się bardzo interaktywnie i płynnie, co upodabnia je do samowystarczalnych aplikacji. Dzięki temu uzyskuje się wygodę i re- sponsywność interfejsu. Czym jest komunikacja asynchroniczna? Początki komunikacji asynchronicznej w jej dzisiejszym wydaniu można datować od premiery Inter- net Explorera 5, która miała miejsce w 1999 roku. Pojawił się w nim nowy obiekt ActiveX o na- zwie XMLHttpRequest. ActiveX to technologia opracowana przez firmę Microsoft, umożliwiająca tworzenie komponentów i kontrolek rozszerzających możliwości przeglądarki. Inni producenci przeglądarek podążyli tym tropem, lecz zamiast korzystać z ActiveX, zaimplementowali podobne rozwiązania w postaci integralnej części interpretera JavaScriptu. W pewnej uproszczonej formie mechanizmy tego rodzaju istniały jednak już wcześniej: opierały się one na użyciu na stronie ukrytych ramek, komunikujących się „w tle” z serwerem. Jednym z pierw- szych zastosowań komunikacji asynchronicznej były czaty internetowe, w których technologia ta słu- żyła do pobierania i wyświetlania nowych wiadomości bez konieczności przeładowywania strony. Przyjrzyjmy się, jak korzystać z komunikacji asynchronicznej w JavaScripcie. Zastosowanie obiektu XMLHttpRequest Ze względu na różnice w implementacji obiektu XMLHttpRequest w różnych przeglądarkach najpierw należy napisać specjalną funkcję, która będzie gwarantowała poprawne wykonywanie kodu w każdej popularnej przeglądarce. Aby to zrobić, należy zapoznać się z trzema sposobami tworzenia obiektu XMLHttpRequest: (cid:120) IE 5: request = new ActiveXObject( Microsoft.XMLHTTP ) (cid:120) IE 6: request = new ActiveXObject( Msxml2.XMLHTTP ) (cid:120) wszystkie pozostałe: request = new XMLHttpRequest() Różnice w przeglądarce IE wynikają ze zmiany wprowadzonej przez Microsoft w Internet Explorerze 6 względem poprzedniego wydania. Wszystkie pozostałe przeglądarki używają innej metody. Kod podany w przykładzie 17.1 będzie poprawnie działał we wszystkich przeglądarkach wydanych w ciągu kilku ostatnich lat. Przykład 17.1. Funkcja komunikacji asynchronicznej kompatybilna z wszystkimi przeglądarkami script function asyncRequest() { try // Przegl(cid:261)darka inna ni(cid:298) IE? { // Tak var request = new XMLHttpRequest() } catch(e1) { try // IE 6+? 382 (cid:95) Rozdział 17. Zastosowanie komunikacji asynchronicznej Poleć książkęKup książkę { // Tak request = new ActiveXObject( Msxml2.XMLHTTP ) } catch(e2) { try // IE 5? { // Tak request = new ActiveXObject( Microsoft.XMLHTTP ) } catch(e3) // Brak obs(cid:225)ugi komunikacji asynchronicznej { request = false } } } return request } /script Być może pamiętasz z rozdziału 14. wstępne informacje na temat obsługi błędów za pomocą kon- strukcji try … catch. Przykład 17.1 doskonale ilustruje użyteczność tej metody: instrukcja try podejmuje próbę wykonania instrukcji dla przeglądarki innej niż IE, a jeśli próba zakończy się powo- dzeniem, program przeskakuje od razu do ostatniej instrukcji return, gdzie następuje zwrócenie nowego obiektu. W przeciwnym razie instrukcja catch wyłapuje błąd i podejmowana jest kolejna próba. I ponownie: jeśli próba ta się powiedzie, zwracany jest nowy obiekt; w przeciwnym razie program przystępuje do wykonywania ostatniej spośród trzech grup instrukcji. Jeśli i ta próba zawiedzie, to znaczy, że prze- glądarka nie obsługuje komunikacji asynchronicznej, a obiekt request otrzymuje wartość false; w przeciwnym razie jest zwracany w zwykły sposób. W ten sposób masz do dyspozycji uniwersalną funkcję, którą możesz z powodzeniem dodać do biblioteki przydatnych funkcji JavaScript. Wiesz już, jak utworzyć obiekt XMLHttpRequest, ale co można z nim zrobić? Każdy z takich obiektów jest wyposażony w zestaw właściwości (zmiennych) oraz metod (funkcji), zebranych w tabelach 17.1 i 17.2. Tabela 17.1. Właściwości obiektu XMLHttpRequest Właściwość onreadystatechange Określa zdarzenie wywoływane za każdym razem, gdy właściwość readyState Opis readyState responseText responseXML status statusText obiektu ulegnie zmianie. Właściwość przyjmująca wartości całkowite, informująca o bieżącym stanie żądania. Może mieć następującą wartość: 0 – niezainicjalizowane, 1 – przesyłanie, 2 – przesłane, 3 – przetwarzanie, 4 – zakończone. Dane w postaci tekstowej zwrócone przez serwer. Dane w postaci XML zwrócone przez serwer. Kod statusu HTTP zwrócony przez serwer. Tekst statusu HTTP zwrócony przez serwer. Zastosowanie obiektu XMLHttpRequest (cid:95) 383 Poleć książkęKup książkę Tabela 17.2. Metody obiektu XMLHttpRequest Metoda abort() getAllResponseHeaders() getResponseHeader(parametr) open( metoda , url , asynch ) send(dane) setRequestHeader( parametr , warto(cid:258)(cid:202) ) Opis Przerywa bieżące żądanie. Zwraca wszystkie nagłówki w postaci łańcucha znaków. Zwraca wartość param w postaci łańcucha znaków. Określa metodę przesyłania danych HTTP (GET albo POST), docelowy adres URL oraz czy żądanie ma być obsłużone asynchronicznie (true albo false). Wysyła dane do docelowego serwera przy użyciu podanej metody HTTP. Określa nagłówek w postaci pary parametr/wartość. Te właściwości i metody dają kontrolę nad rodzajem danych wysyłanych na serwer i odbieranych z niego, a także umożliwiają określenie sposobu ich wysyłania i odbierania. Można na przykład okre- ślić, czy dane mają zostać przesłane w postaci czystego tekstu (który może zawierać kod HTML i inne znaczniki), czy w formie XML, a także wybrać metodę POST lub GET wysyłania danych na serwer. Przyjrzyjmy się najpierw metodzie POST na podstawie dwóch bardzo prostych dokumentów: pierwszy zawiera kod HTML i JavaScript, a drugi — program PHP, który komunikuje się asynchronicznie z pierwszym. Wystarczy kilka linii kodu JavaScript, by pobrać z zewnętrznego serwera dokument, który następnie jest zwracany do przeglądarki za pośrednictwem Twojego serwera i umieszczany w wybranej części bieżącego dokumentu. Twój pierwszy program asynchroniczny Wprowadź kod podany w przykładzie 17.2 i zapisz go pod nazwą urlpost.html, ale na razie nie otwieraj go w przeglądarce. Przykład 17.2. Dokument urlpost.html !DOCTYPE html html !-- urlpost.html -- head title Przyk(cid:239)ad komunikacji asynchronicznej /title /head body style= text-align:center h1 Wczytywanie strony do elementu DIV /h1 div id= info To zdanie zostanie zast(cid:200)pione /div script params = url=news.com request = new asyncRequest() request.open( POST , urlpost.php , true) request.setRequestHeader( Content-type , application/x-www-form-urlencoded ) request.setRequestHeader( Content-length , params.length) request.setRequestHeader( Connection , close ) request.onreadystatechange = function() 384 (cid:95) Rozdział 17. Zastosowanie komunikacji asynchronicznej Poleć książkęKup książkę { if (this.readyState == 4) { if (this.status == 200) { if (this.responseText != null) { document.getElementById( info ).innerHTML = this.responseText } else alert( B(cid:239)(cid:200)d komunikacji: Nie otrzymano danych ) } else alert( B(cid:239)(cid:200)d komunikacji: + this.statusText) } } request.send(params) function asyncRequest() { try { var request = new XMLHttpRequest() } catch(e1) { try { request = new ActiveXObject( Msxml2.XMLHTTP ) } catch(e2) { try { request = new ActiveXObject( Microsoft.XMLHTTP ) } catch(e3) { request = false } } } return request } /script /body /html Przyjrzyjmy się temu przykładowi i jego działaniu. Kilka pierwszych linii odpowiada za zainicjowanie dokumentu HTML i wyświetlenie nagłówka. W następnej linii jest tworzony element div o identyfikatorze info, który zawiera napis To zdanie zostanie zast(cid:200)pione. Później pojawi się tutaj tekst zwrócony przez wywołanie asynchroniczne. Następnych sześć linii jest niezbędne do zrealizowania żądania HTTP POST. Najpierw zmiennej params zostaje przypisana para w postaci parametr=warto(cid:258)(cid:202), która zostanie przesłana na serwer. Następnie jest tworzony nowy obiekt żądania. Potem za pomocą metody open zostaje określony sposób przesłania żądania (POST), adres (urlpost.php) oraz tryb (asynchroniczny). Trzy ostatnie linie w tej sekcji definiują nagłówki, które poinformują docelowy serwer o żądaniu POST. Zastosowanie obiektu XMLHttpRequest (cid:95) 385 Poleć książkęKup książkę Właściwość readyState Teraz możemy zająć się detalami obsługi wywołań asynchronicznych, która opiera się na właściwości readyState. Wywołania te umożliwiają przeglądarce ciągłą interakcję z użytkownikiem i zmianę wy- świetlanych danych, podczas gdy program za pośrednictwem właściwości onreadystatechange odwołuje się do funkcji wykonywanej przy każdej zmianie właściwości readyState. W tym przypadku została użyta funkcja anonimowa, umieszczona bezpośrednio w wierszu z żądaniem — można jednak w tym celu użyć osobnej funkcji o zdefiniowanej nazwie. Tego rodzaju funkcje noszą nie- kiedy nazwę wywołań zwrotnych (ang. callback), gdyż program zwraca się do nich za każdym razem, gdy zmieni się właściwość readyState. Składnia wywołania zwrotnego przy założeniu użycia funkcji anonimowej w jednym wierszu wygląda następująco: request.onreadystatechange = function() { if (this.readyState == 4) { // tu co(cid:286) si(cid:266) dzieje } } Gdybyś chciał użyć osobnej funkcji o zdefiniowanej nazwie, konstrukcja będzie wyglądała tylko trochę inaczej: request.onreadystatechange = asyncCallback function asyncCallback() { if (this.readyState == 4) { // tu co(cid:286) si(cid:266) dzieje } } Na podstawie tabeli 17.1 wiesz, że właściwość readyState może przyjmować pięć wartości. Ale nas in- teresuje tylko jedna: wartość 4, która oznacza zakończenie żądania. Jak widać, wywołanie naszej no- wej funkcji nie będzie miało żadnych efektów, dopóki właściwość readyState nie przyjmie wartości 4. Gdy wartość ta zostanie wykryta, sprawdzany jest status żądania, aby się upewnić, że ma on wartość 200 — taka wartość oznacza bowiem, że żądanie zostało zakończone powodzeniem. Jeśli wartość jest inna niż 200, na ekranie pojawia się komunikat błędu zawarty we właściwości statusText. Zauważ, że zamiast nazwy używanego obiektu, czyli request (np. request.readyState lub request.status), w odwołaniach do właściwości obiektów pojawia się słowo this (np. this.readyState, this.status itd.). Chodzi o to, by móc łatwo przenieść kod do innego programu, który w tej postaci będzie działał z dowolnie nazwanym obiektem: słowo kluczowe this zawsze odnosi się bowiem do bieżącego obiektu. Po upewnieniu się, że właściwość readyState ma wartość 4, a status wynosi 200, należy sprawdzić właściwość responseText, aby się przekonać, czy zawiera ona jakąś wartość. Jeśli nie, na ekranie pojawi się okno z ostrzeżeniem. W przeciwnym razie treść elementu div zostanie zastąpiona warto- ścią właściwości responseText: document.getElementById( info ).innerHTML = this.responseText 386 (cid:95) Rozdział 17. Zastosowanie komunikacji asynchronicznej Poleć książkęKup książkę W tej linii kodu metoda getElementByID odwołuje się do elementu info, a wartość zwrócona przez to odwołanie jest przypisywana do właściwości innerHTML tego elementu. Efekt jest taki, że zmienia się tylko ten element strony internetowej, a wszystko inne pozostaje bez zmian. Po wszystkich tych przygotowaniach żądanie asynchroniczne jest wreszcie wysyłane na serwer przy użyciu następującej instrukcji, która przekazuje parametry zdefiniowane uprzednio w zmiennej params: request.send(params) Omówiona procedura jest uaktywniana za każdym razem, gdy wartość właściwości readyState ulega zmianie. Pozostała część kodu to funkcja asyncRequest z przykładu 17.1, a także znaczniki kończące skrypt oraz dokument HTML. Proces komunikacji asynchronicznej po stronie serwera Przejdźmy teraz do drugiej części procedury, realizowanej za pomocą PHP — jej kod został podany w przykładzie 17.3. Przepisz go i zapisz pod nazwą urlpost.php. Przykład 17.3. Dokument urlpost.php ?php // urlpost.php if (isset($_POST[ url ])) { echo file_get_contents( http:// . SanitizeString($_POST[ url ])); } function SanitizeString($var) { $var = strip_tags($var); $var = htmlentities($var); return stripslashes($var); } ? Jak widać, kod jest krótki, prosty i — tak jak to powinno być w przypadku wszystkich przesyłanych danych — robi dobry użytek z bardzo ważnej funkcji SanitizeString. W tym przypadku pominięcie procedury oczyszczania danych mogłoby doprowadzić do wstawienia przez użytkownika kodu JavaScript i przejęcia kontroli nad Twoim programem. Program korzysta z funkcji PHP o nazwie file_get_contents do pobrania strony internetowej znajdującej się pod adresem URL przekazanym za pośrednictwem zmiennej $_POST[ url ]. Funkcja file_get_contents jest o tyle uniwersalna, że umożliwia załadowanie całej zawartości pliku albo strony internetowej z lokalnego lub zdalnego serwera; uwzględnia ona nawet przekierowania (na przykład w przypadku przeniesionych stron). Po zapisaniu pliku z podanym kodem możesz otworzyć dokument urlpost.html w przeglądarce i po kilku chwilach powinieneś zobaczyć stronę internetową serwisu news.com wczytaną do elementu div , utworzonego specjalnie w tym celu. Cały proces będzie trwał trochę dłużej od bezpośredniego otwarcia strony WWW, gdyż dokument zostanie przesłany dwukrotnie: raz na serwer i po raz kolejny z serwera do przeglądarki. Efekt powinien wyglądać podobnie jak na rysunku 17.2. Zastosowanie obiektu XMLHttpRequest (cid:95) 387 Poleć książkęKup książkę Rysunek 17.2. Strona główna serwisu news.com wczytana do elementu div W ten sposób udało się nam nie tylko wykonać żądanie asynchroniczne i zwrócić odpowiedź do skryptu JavaScript, ale przy okazji wykorzystać możliwości PHP do połączenia zupełnie niezależnych stron WWW. Tak się bowiem składa, że jeśli spróbowalibyśmy bezpośrednio pobrać tę stronę internetową za pomocą żądania asynchronicznego (z pominięciem skryptu PHP na serwerze), nie udałoby się nam to ze względu na istnienie zabezpieczeń chroniących przed wykonywaniem takich żądań między różnymi domenami. Ten prosty przykład stanowi więc zarazem rozwiązanie praktycz- nego problemu. Zastosowanie metody GET zamiast POST Tak jak w przypadku przesyłania dowolnych danych za pośrednictwem formularza, istnieje możliwość przekazania danych w trybie GET, co zarazem pozwala zmniejszyć objętość kodu o kilka linii. Ma to jednak pewną wadę: niektóre przeglądarki mogą przechowywać żądania GET w pamięci cache, co w przypadku żądań POST nigdy nie ma miejsca. Żądania nie powinny być jednak przechowywane w pamięci podręcznej, bo przeglądarka po prostu ponownie wyświetli to, co otrzymała poprzednio, zamiast zwrócić się do serwera o nowe dane. Pewnym obejściem tego problemu jest dodanie do każ- dego żądania losowego parametru, dzięki czemu docelowy adres URL jest za każdym razem inny. 388 (cid:95) Rozdział 17. Zastosowanie komunikacji asynchronicznej Poleć książkęKup książkę Przykład 17.4 pokazuje, w jaki sposób uzyskać efekt analogiczny jak w przypadku przykładu 17.2, ale za pomocą żądań typu GET zamiast POST. Przykład 17.4. Dokument urlget.html !DOCTYPE html html !-- urlget.html -- head title Przyk(cid:239)ad komunikacji asynchronicznej /title /head body style= text-align:center h1 Wczytywanie strony do elementu DIV /h1 div id= info To zdanie zostanie zast(cid:200)pione /div script nocache = nocache= + Math.random() * 1000000 request = new asyncRequest() request.open( GET , urlget.php?url=news.com + nocache, true) request.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { if (this.responseText != null) { document.getElementById( info ).innerHTML = this.responseText } else alert( B(cid:239)(cid:200)d komunikacji: Nie otrzymano danych ) } else alert( B(cid:239)(cid:200)d komunikacji: + this.statusText) } } request.send(null) function asyncRequest() { try { var request = new XMLHttpRequest() } catch(e1) { try { request = new ActiveXObject( Msxml2.XMLHTTP ) } catch(e2) { try { request = new ActiveXObject( Microsoft.XMLHTTP ) } catch(e3) { Zastosowanie obiektu XMLHttpRequest (cid:95) 389 Poleć książkęKup książkę request = false } } } return request } /script /body /html Najważniejsza różnica między dwoma dokumentami została wyróżniona pogrubieniem. Można ją opisać następująco: (cid:120) W przypadku żądania typu GET nie trzeba przesyłać nagłówków. (cid:120) W żądaniach typu GET używamy metody open. Przekazujemy jej URL zawierający symbol ?, po którym następuje para parametr-wartość w postaci (tutaj) url=news.com. (cid:120) Drugą parę parametr/wartość dołączamy za pomocą symbolu . Parametr nosi nazwę nocache, a jego wartość jest losowana z zakresu od 0 do 1000000. Dzięki temu każdy URL będzie inny, a kolejne żądania nie będą pobierane z pamięci podręcznej przeglądarki. (cid:120) W odwołaniu do metody send przekazujemy teraz tylko argument null, gdyż w przypadku metody GET nie są przekazywane żadne parametry. Warto pamiętać, że całkowite zrezygnowanie z przekazywania argumentów nie wchodzi w grę, gdyż wywołałoby błąd. Aby nowy dokument był kompletny, trzeba jeszcze zmodyfikować program w PHP tak, by obsługiwał żądanie GET. Przykład 17.5 należy zapisać w pliku o nazwie urlget.php. Przykład 17.5. Dokument urlget.php ?php // urlget.php if (isset($_GET[ url ])) { echo file_get_contents( http:// .sanitizeString($_GET[ url ])); } function sanitizeString($var) { $var = strip_tags($var); $var = htmlentities($var); return stripslashes($var); } ? Cała różnica pomiędzy powyższym kodem a przykładem 17.3 sprowadza się do tego, że odwołania do tablicy $_POST zostały zastąpione odwołaniami do tablicy $_GET. Efekt otwarcia dokumentu urlget.html w przeglądarce jest taki sam jak urlpost.html. Przesyłanie żądań XML Choć obiekty, które tworzyliśmy do tej pory, należą do klasy o nazwie XMLHttpRequest, jak dotąd w ogóle nie posługiwaliśmy się XML. Przekonałeś się już, że za pośrednictwem żądań asynchronicz- nych bez trudu da się pobrać cały dokument HTML, ale równie dobrze moglibyśmy zażądać strony czysto tekstowej, łańcucha znaków, liczby, a nawet danych z arkusza kalkulacyjnego. 390 (cid:95) Rozdział 17. Zastosowanie komunikacji asynchronicznej Poleć książkęKup książkę Zmodyfikujmy zatem poprzedni przykładowy dokument HTML i program PHP w taki sposób, by pobrać dane XML. Aby to zrobić, najpierw przyjrzyjmy się programowi xmlget.php pokazanemu w przykładzie 17.6. Przykład 17.6. Dokument xmlget.php ?php // xmlget.php if (isset($_GET[ url ])) { header( Content-Type: text/xml ); echo file_get_contents( http:// .sanitizeString($_GET[ url ])); } function sanitizeString($var) { $var = strip_tags($var); $var = htmlentities($var); return stripslashes($var); } ? Jak widać, program został bardzo nieznacznie zmodyfikowany (zmiana została wyróżniona pogrubie- niem) w celu przesłania poprawnego nagłówka XML przed odwołaniem się do docelowego doku- mentu. W programie nie zastosowano żadnych mechanizmów sprawdzających — przyjąłem założe- nie, że żądanie będzie rzeczywiście odwoływało się do dokumentu XML. Przejdźmy teraz do kodu HTML w pliku xmlget.html w przykładzie 17.7. Przykład 17.7. Dokument xmlget.html !DOCTYPE html html !-- xmlget.html -- head meta charset= utf-8 title Przyk(cid:239)ad komunikacji asynchronicznej /title /head body h1 Wczytywanie danych XML do elementu DIV /h1 div id= info To zdanie zostanie zast(cid:200)pione /div script nocache = nocache= + Math.random() * 1000000 url = rss.news.yahoo.com/rss/topstories out = ; request = new asyncRequest() request.open( GET , xmlget.php?url= + url + nocache, true) request.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { if (this.responseText != null) { titles = this.responseXML.getElementsByTagName( title ) Zastosowanie obiektu XMLHttpRequest (cid:95) 391 Poleć książkęKup książkę for (j = 0 ; j titles.length ; ++j) { out += titles[j].childNodes[0].nodeValue + br } document.getElementById( info ).innerHTML = out } else alert( B(cid:239)(cid:200)d komunikacji: Nie otrzymano danych ) } else alert( B(cid:239)(cid:200)d komunikacji: + this.statusText) } } request.send(null) function asyncRequest() { try { var request = new XMLHttpRequest() } catch(e1) { try { request = new ActiveXObject( Msxml2.XMLHTTP ) } catch(e2) { try { request = new ActiveXObject( Microsoft.XMLHTTP ) } catch(e3) { request = false } } } return request } /script /body /html Po raz kolejny zmiany zostały wyróżnione pogrubieniem, co pozwala łatwo zauważyć, że kod jest bardzo podobny do poprzednich wersji — z tym że docelowy URL rss.news.yahoo.com/rss/topstories od- wołuje się do dokumentu XML, a konkretnie do kanału RSS z najpopularniejszymi wiadomościami z serwisu Yahoo!. Inna istotna różnica polega na zastosowaniu właściwości responseXML, która zastąpiła właściwość responseText. Gdy serwer zwraca dane XML, zostają one zapisane właśnie w responseXML. Właściwość responseXML nie zawiera jednak zwykłego łańcucha tekstowego XML: tak naprawdę jest to obiekt z dokumentem XML, który można analizować i przetwarzać przy użyciu metod i właści- wości typowych dla drzewa DOM. To oznacza, że do takiego obiektu można się odwołać na przy- kład przy użyciu metody JavaScript getElementsByTagName. 392 (cid:95) Rozdział 17. Zastosowanie komunikacji asynchronicznej Poleć książkęKup książkę Kilka słów o XML Dokumenty XML, o jakich tutaj mowa, na ogół mają postać danych RSS, jak w przykładzie 17.8. Piękno XML polega jednak na tym, że strukturę tego rodzaju można zapisać w ramach drzewa DOM (rysunek 17.3), co umożliwia jej szybkie i wygodne przeszukiwanie. Przykład 17.8. Przykładowy dokument XML ?xml version= 1.0 encoding= UTF-8 ? rss version= 2.0 channel title RSS Feed /title link http://stronainternetowa.com /link description Kana(cid:239) RSS serwisu stronainternetowa.com /description pubDate Mon, 11 May 2020 00:00:00 GMT /pubDate item title Nag(cid:239)ówek /title guid http://stronainternetowa.com/naglowek /guid description To jest nag(cid:239)ówek /description /item item title Nag(cid:239)ówek 2 /title guid http://website.com/naglowek2 /guid description Drugi nag(cid:239)ówek /description /item /channel /rss Rysunek 17.3. Drzewo DOM z przykładu 17.8 Za pomocą metody getElementsByTagName można szybko wyszukać wartości powiązane z różnymi znacznikami, bez czasochłonnego przeszukiwania całego tekstu. Właśnie taki jest cel użycia poniższej instrukcji w kodzie przykładu 17.7: titles = this.responseXML.getElementsByTagName( title ) Ta jedna instrukcja wystarczy, by wszystkie wartości elementów title — czyli tytułów wiadomości — zostały umieszczone w tablicy titles. Stąd zaś już tylko krok, by wyodrębnić je przy użyciu następującej składni (gdzie zmienna j zawiera wartość całkowitą odpowiadającą pozycji tytułu, do którego się odwołujemy): titles[j].childNodes[0].nodeValue Zastosowanie obiektu XMLHttpRequest (cid:95) 393 Poleć książkęKup książkę Wszystkie tytuły są następnie dołączane do zmiennej tekstowej out, a po ich przetworzeniu rezultat jest umieszczany w elemencie div na początku dokumentu. Po otwarciu pliku xmlget.html w przeglądarce powinieneś otrzymać efekt podobny jak na rysunku 17.4. Rysunek 17.4. Asynchroniczne pobieranie nagłówków wiadomości w postaci XML z serwisu Yahoo! Podsumowując, każdy składnik taki jak title jest tzw. węzłem (ang. node), to zaś oznacza, że tekst tytułu jest uważany za węzeł. Odwołując się do węzła potomnego, trzeba zażądać go w postaci tekstowej — i temu służy .nodeValue. Ponadto przy żądaniu danych XML (cid:127) tak jak w przypadku formularzy (cid:127) można użyć metody POST albo GET; wybór nie ma większego wpływu na rezultat. Po co używać XML? Zastanawiasz się być może, po co używać XML w celach innych niż pobieranie dokumentów XML takich jak kanały informacyjne RSS. No cóż, rzeczywiście nie ma takiej konieczności, ale gdyby zale- żało Ci na tym, by dane przesyłane do aplikacji Ajax miały konkretną strukturę, to jest to znacznie wygodniejsze niż przetwarzanie zwykłego tekstu przy użyciu procedur w JavaScripcie. W takich przypadkach lepiej utworzyć dokument XML i przekazać go z powrotem do funkcji wywołującej, która automatycznie umieści go w drzewie DOM, równie łatwym do przetwarzania jak drzewo DOM dokumentu HTML, który poznałeś już wcześniej. 394 (cid:95) Rozdział 17. Zastosowanie komunikacji asynchronicznej Poleć książkęKup książkę Obecnie programiści częściej stosują do wymiany danych JavaScript Object Notation (http://json.org), czyli JSON, prosty podzbiór JavaScriptu. Zastosowanie bibliotek komunikacji asynchronicznej Wiesz już, w jaki sposób od podstaw programować procedury komunikacji asynchronicznej, zachęcam Cię więc do zapoznania się z darmowymi bibliotekami (ang. frameworks), które zde- cydowanie ułatwiają pracę z tą technologią i oferują wiele zaawansowanych funkcji. Szczególnie chciałbym Ci polecić przyjrzenie się bibliotece jQuery, która jest chyba najpopularniejszym rozwiąza- niem tego typu — będziesz zresztą mógł o niej przeczytać w rozdziale 21. Tymczasem jednak w kolej- nym rozdziale przyjrzymy się modyfikowaniu wyglądu stron WWW przy użyciu technologii CSS. Pytania 1. Dlaczego należy napisać specjalną funkcję do tworzenia nowych obiektów XMLHttpRequest? 2. Do czego służy konstrukcja try … catch? 3. Ile właściwości i metod ma obiekt XMLHttpRequest? 4. Jak sprawdzić, czy przetwarzanie żądania asynchronicznego zostało zakończone? 5. Jak sprawdzić, czy przetwarzanie żądania asynchronicznego zakończyło się powodzeniem? 6. Jaka właściwość obiektu XMLHttpRequest zwraca odpowiedź w postaci tekstowej na żądanie asyn- chroniczne? 7. Jaka właściwość obiektu XMLHttpRequest zwraca odpowiedź w postaci XML na żądanie asynchro- niczne? 8. Jak odwołać się do funkcji zwrotnej obsługującej odpowiedzi na żądania asynchroniczne? 9. Jaka metoda obiektu XMLHttpRequest służy do inicjalizowania żądania asynchronicznego? 10. Na czym polegają główne różnice między żądaniami asynchronicznymi typu GET i POST? Odpowiedzi na pytania znajdziesz w dodatku A, w sekcji „Odpowiedzi na pytania z rozdziału 17.”. Pytania (cid:95) 395 Poleć książkęKup książkę 396 (cid:95) Rozdział 17. Zastosowanie komunikacji asynchronicznej Poleć książkęKup książkę Skorowidz formaction, 281 height, 282 list, 283 min, 282 multiple, 275 placeholder, 281 required, 281 step, 282 viewport, 533 width, 282 atrybuty nadpisania, 281 automatyczna inkrementacja, 189, 254 autoryzacja HTTP, 288 awatar użytkownika, 156 B BASIC, 61 baza danych MariaDB, 32 MySQL, 33, 156 MySQL \t, 29 bazy danych anonimowość, 226 dostęp, 181, 222 efektywność, 216 odtwarzanie, 233 optymalizacja, 215 projektowanie, 213 relacje, 223 transakcje, 226 tworzenie, 180 wyświetlanie zawartości, 231 zapytania, 213 BBS, 27 Berners-Lee Tim, 27 $, symbol, 319 A AAC, kodek audio, 602 adres IP, 28, 551 przekazywanie, 614 MAC, 614 Ajax, 381, 535, 624 akcja domyślna, 99, 335 definiowanie, 99 algorytm BCRYPT, 295 kompresji MP3, 601 MPEG, 601 md5, 292 SHA-1, 292 TLS, 618 AMPPS, 42, 111, 175, 176, 182 dla OS X, 49 testowanie instalacji, 46 Android, 549 anulowanie polecenia, 178 transakcji, 228 Apple, 549 asocjacyjność, 88 atak cross-site scripting, XSS, 260 atrybut AUTO_INCREMENT, 188, 254 autocomplete, 280 autofocus, 281 data-ajax, 535 data-rel, 536 form, 282 721 Poleć książkęKup książkę Béziera krzywe, 578 bezpieczeństwo, 81, 94, 160, 170 białe znaki, 122 biblioteka GD, 37 jQuery, Patrz: jQuery jQuery Mobile, Patrz: jQuery Mobile BlackBerry, 549 blog, 108 błędy dostępu, 176 dzielenia przez zero, 106 Parse error, 60, 72 przenoszenia plików, 160 Undefined index, 138 Undefined offset, 138 wychwytywanie, 332 Boole George, 83 boolowska wartość, 89 boolowskie wyrażenia, 84 bumpyCaps, konwencja, 346 C C, 32 canvas, 549, 555 kreślenie ścieżek, 572 określanie formatu obrazu, 558 operacje na pikselach, 587 przekształcanie elementów, 594 rysowanie linii, 570 skalowanie obrazu przed umieszczeniem, 584 tworzenie, 550 tworzenie cieni, 586 umieszczanie napisów, 566 umieszczanie obrazów, 584 wyodrębnianie obrazów, 584 wypełnianie obszarów, 574 zaawansowane efekty graficzne, 591 zastosowanie krzywych, 578 CERN, 27 CGI, 31 Chrome, 549 ciasteczka, 617 dostęp, 288 tworzenie, 287 usuwanie, 288 użycie w sesji, 303 zastosowanie, 285 722 (cid:95) Skorowidz COBOL, 33 CSS, 29, 35, 657 animacje, 476, 536 dołączenie do dokumentu HTML, 398 dziedziczenie kaskadowe, 409 importowanie stylów, 398 jednostki miar, 414 kolory, 420 gradienty, 421 określenia skrócone, 421 komentarze, 401 model pudełkowy, 428 marginesy, 428 odstęp, 431 ramki, 430 pseudoklasy, 425 reguły, 400 metody definiowania, 410 obliczanie specyficzności, 410 skracanie, 427 z wieloma deklaracjami, 400 rozmieszczanie elementów położenie bezwzględne, 422 położenie stałe, 423 położenie względne, 423 selekcja grupowa, 408 selektor atrybutu, 407, 436 dziecka, 405 identyfikatora, 406, 410 klasy, 407, 410 potomka, 404 typu, 404 uniwersalny, 408 style arkusze zewnętrzne, 403 bezpośrednie, inline, 404 domyślne, 402 użytkownika, 402 wewnętrzne, 403 zagnieżdżone, 399 wersja CSS3, 435 właściwości dostęp z poziomu JavaScript, 464 pisma, 416 zarządzanie stylami tekstu, 418 zastosowanie identyfikatorów, 399 klas, 399 średników, 400 Poleć książkęKup książkę CSS3, 35 box-sizing właściwość, 437 cienie, 446 efekty tekstowe, 450 fonty internetowe, 452 Google, 453 kolory definiowanie, 448 luminacja, 449 modele, 448 – 450 nasycenie, 448 przezroczystość, 449, 450 operator $, 437 *, 437 ^, 437 przejścia, 456, 499 skrócona składnia, 458 przekształcenia, 454 3D, 455 ramki, 442 kolor, 442 zaokrąglanie rogów, 443 tło, 438 położenie obrazka, 439 umieszczenie kilku obrazów, 441 widoczność, 438 wielkość, 440 właściwość auto, 440 tworzenie animacji, 456 układ wielokolumnowy, 447 CSV format, 230 zapisywanie danych, 233 D dane archiwizacja, 230 konwersja, 151, 153 komponenty modyfikatora, 151 przywracanie, 230 walidacja, 167 data format, 154 sprawdzanie poprawności, 156 wyświetlanie, 154 debugowanie, 74, 146, 331 definiowanie akcji domyślnej, 99 funkcji, 113, 124 klas, 124 typu zmiennej, 315 deklarowanie funkcji, 76, 342 w JavaScript, 316 klas, 121 klasy, 345, 348 User, 345 metod, 126 stałych, 127 typu zmiennych, 73 właściwości, 126 jawne, 127 niejawne, 126 zmiennych, 61, 80 o różnym zasięgu, 317 destruktory, 125 dodawanie kolumny, 191 z automatyczną inkrementacją, 188 DOM, Document Object Model, 393, 397, 488 dostęp z poziomu JavaScript, 461 elementy dodawanie, 470 usuwanie, 471 manipulowanie, 507 nawigowanie, 514 struktura, 305 zastosowanie, 320 dopasowywanie metaznaki, 365 tryb niezachłanny, 369 zachłanny, 369 dyrektywa @font-face, 452 @import, 398 NATURAL JOIN, 208 dziedziczenie, 130 dzienniki zdarzeń, Patrz: logi E Editra, 53 edytor kodu, 53 encje HTML, 81 Skorowidz (cid:95) 723 Poleć książkęKup książkę F Flash, 29, 549, 605, 612 format GIF, 185 formularze etykiety, 275 HTML 5, 280 atrybuty nadpisania, 281 autocomplete, 280 autofocus, 281 color, 283 form, 282 height, 282 list, 283 max, 282 min, 282 number, 283 placeholder, 281 range, 283 required, 281 selektory daty i czasu, 283 step, 282 width, 282 listy z opcjami, 274 odczytywanie przesłanych danych, 267 podatność na ataki, 359 pola opcji, 270 pola tekstowe, 269 wielowierszowe, 269 pola ukryte, 273 przełączniki, 272 przycisk wysyłania, 276 tworzenie, 265 wartości domyślne, 268 weryfikacja powtórne wyświetlenie, 374 wyświetlanie, 247 FreeBSD, 177 FTP, 52 funkcja alert, 321 checkdate, 156 compact, 146 console.log, 321 copy, 159 count, 143 date, 76, 154 die, 157, 239 724 (cid:95) Skorowidz document.write, 321 each, 139, 147 end, 147 exec, 170 explode, 144, 146 extract, 145 fclose, 157 fgets, 157, 158 file_exists, 160 file_get_contents, 163 flock, 162 fopen, 157 obsługiwane tryby, 158 fread, 157, 159 fseek, 161 function_exists, 119 fwrite, 105, 157, 162 get_magic_quotes_gpc, 258 getElementById, 461 getnext, 92 getnext(), 92 hsl, 448 hsla, 449 htmlentities, 81, 261 htmlspecialchars, 169, 247, 290 indexOf, 354 ini_set, 303 intval, 107 is_array, 143 isset, 317 jQuery, 483 list, 139 zastosowanie, 140 longdate, 77 mktime, 153 parametry, 153 mysqli wariant proceduralny, 262 output, 354 password_hash, 292 password_verify, 293 phpinfo, 112 phpversion, 119 preg_match, 373 preg_match_all, 373 preg_replace, 373 print, 113 print_r, 136, 146 Poleć książkęKup książkę printf, 149 argumenty, 149 modyfikatory, 150 rename, 160 reset, 147 rgb, 449 rgba, 450 session_destroy, 299 session_start, 297 setcookie, 287 shuffle, 144 some, 353 sort, 143, 144 sprintf, 153 str_repeat, 113 strrev, 113 strtolower, 114 strtoupper, 113 toDataURL, 557 ucfirst, 114 validate, 361 validateAge, 364 validateEmail, 364 validateForename, 363 validatePassword, 364 validateSurname, 363 validateUsername, 363 funkcje, 76, 111, 143 argumenty, 112 daty i czasu, 153 definiowanie, 113, 124, 341 deklaracja, 76 jednokierunkowe, 291 konstruktory, 345 MySQL, 209 zwracanie wartości, 113 funkcji file_get_contents, 387 funkcji funkcja__construct, 125 G geolokacja, 551, 613, 615 georeplikacja, 32 Google, 38 fonty, 453 mapy, 381, 551 Street View, 614 GPS, 551, 613 grupowanie przy użyciu nawiasów, 367 grupowanie zapytań według kategorii, 206 H H.264, kodek wideo, 608 hasła przechowywanie, 291 password_hash, 292 password_verify, 293 solenie, 292 hermetyzacja, 120 hierarchia obiektów, 318 historia przeglądania zabezpieczenie, 320 HTML, 27 importowanie stylów CSS, 398 dopasowywanie znaczników, 368 HTML5, 36, 170 audio, 552 canvas, Patrz: canvas deklarowanie, 170 DOCTYPE, 397, 556 formularze, Patrz: formularze HTML5 geolokacja, 551, 613, 615 lokalny magazyn danych, 554 magazyn lokalny dostęp, 618 obsługiwane kodeki, 602 odtwarzanie filmów, 607 pliku muzycznego, 604 technologia przeciągnij i upuść, 622 video, 552 wątki robocze, web workers, 554, 620 zgodność, 170 I IDE, 54, 57, 62 identyfikatory alfanumeryczne, 135, 142 indeksy, 193 dodawanie, 193 przy tworzeniu tabel, 194 rodzaje, 193 tworzenie, 193 typu FULLTEXT, 182, 202 dodawanie, 197 Skorowidz (cid:95) 725 Poleć książkęKup książkę instancja klasy, 345 instrukcja ALTER, 190 BEGIN, 227 break, 98, 105, 337 case, 98, 334 COMMIT, 227 continue, 106, 338 CREATE INDEX, 194 define, 74 DESCRIBE, 183, 251 document.write, 306 echo, 71, 75, 102, 137, 141 else, 95, 332 elseif, 96 endswitch, 99 EXPLAIN, 228 GRANT, 181 parametry, 181 if, 90, 93, 327, 332 if … OR, 92 include, 118, 239 include_once, 118 mysqldump, 230 print, 75 przerwanie działania, 98 require, 119 require_once, 119 ROLLBACK, 228 SELECT, 204 switch, 97, 98, 333 alternatywna składnia, 99 with, 329 instrukcje, 85 SQL, 232 wielowierszowe, 71 Internet Explorer, 382 iOS, 549 J Java, 31, 549 JavaScript, 31, 34, 305, 660 błąd składni, 310 dekrementacja, 312 zmiennych, 314 document.write, 320 dodawanie, odejmowanie, mnożenie, dzielenie, 312 726 (cid:95) Skorowidz dołączenie plików, 308 elementy DOM dodawanie, 470 usuwanie, 471 formularz z weryfikacją danych, 360 funkcje, 316, 341 dołączanie do strony, 463 osobny plik, 364 służące do zmieniania typów, 339 hierarchia obiektów, 318 inkrementacja, 312, 314 klasy znaków, 367 literały, 324 typy, 324 łańcuchy znaków cudzysłowy, 311 konkatenacja, 314 łączenie zdarzeń i obiektów, 468 modulo, 312 obiektowy model dokumentu, 317 obiekty, 345 odczytywanie adresu URL łącza, 318 operatory, 312, 325 arytmetyczne, 312 dwuargumentowe, 325 jednoargumentowe, 325 logiczne, 314 porównania, 313 przypisania, 313 trzyargumentowy, 325 typy, 325 pętle, 335 przeglądarki, starsze wersje, 307 przerwanie setInterval, 474 setTimeout, 473 składnia komentarzy, 309 sprawdzenie wartości wyrażenia, 324 średniki, 310 tablice, 311, 350 wielowymiarowe, 311 tekst w HTML, 305 typowanie zmiennych, 315 umieszczanie tekstu w elementach HTML, 321 w kodzie HTML, 467 weryfikowanie danych, 359 Poleć książkęKup książkę wyrażenia, 323 if, 313 regularne, 373 wyświetlanie błędów, 309 zastosowanie komentarzy, 309 zdarzenia, 330, 469 zmienne, 310, 324 globalne, 316 lokalne, 316 numeryczne, 311 zasady nazewnictwa, 310 znakowe, 311 znaki modyfikujące, Patrz: modyfikatory zestawienie, 314 znaki
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

PHP, MySQL i JavaScript. Wprowadzenie. Wydanie V
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: