načítání...
nákupní košík
Košík

je prázdný
a
b

kniha + DVD: Ajax -- Hotová řešení - Ľuboslav Lacko

Ajax -- Hotová řešení
-15%
sleva

kniha + DVD: Ajax -- Hotová řešení
Autor:

Neprogramujte to, co již jednou naprogramovali jiní. Na hotových řešeních běžných úloh se naučíte programovat s Ajaxem praktickou formou. Zkušený autor a programátor v knize na ... (celý popis)
Titul doručujeme za 4 pracovní dny
Médium: kniha + DVD
Vaše cena s DPH:  297 Kč 252
+
-
rozbalKdy zboží dostanu
8,4
bo za nákup
rozbalVýhodné poštovné: 39Kč
rozbalOsobní odběr zdarma

hodnoceni - 0%hodnoceni - 0%hodnoceni - 0%hodnoceni - 0%hodnoceni - 0%   celkové hodnocení
0 hodnocení + 0 recenzí

Specifikace
Nakladatelství: » Computer press
Médium: kniha + DVD
Rok vydání: 2008-05-23
Počet stran: 272
Rozměr: 167 x 225 mm
Úprava: 269 stran : ilustrace
Vydání: Vyd. 1.
Spolupracovali: překlad Michal Brůha
Vazba: brožovaná lepená
ISBN: 9788025121085
EAN: 9788025121085
Ukázka: » zobrazit ukázku
Popis

Neprogramujte to, co již jednou naprogramovali jiní. Na hotových řešeních běžných úloh se naučíte programovat s Ajaxem praktickou formou. Zkušený autor a programátor v knize na konkrétních příkladech a řešených úlohách demonstruje, jak Ajax funguje a jak ho prakticky využít ve vlastních aplikacích. Naučíte se tak vylepšovat interaktivu a funkcionalitu svých webových aplikací, ať už je píšete v PHP nebo v ASP.NET. Zároveň využijete běžně dostupné ladicí nástroje a frameworky určené pro vývoj ajaxových aplikací. Kniha se mimo jiné věnuje následujícím tématům: - Jak Ajax v praxi funguje a kompatibilita prohlížečů - Zobrazení údajů z tabulky bez opětovného načítání stránky - Automatické doplňování údajů a kontrola údajů ve formuláři - Stránka s několika samostatně se aktualizujícími oblastmi - Ajaxové aplikace využívající vyhledávač Google či Google Maps - Lokální vyhledávací služba využívající Windows Live Search - Zobrazování údajů z informačních kanálů RSS - Tvorba online chatu založeného na Ajaxu - Využití doplňku ASP.NET AJAX Extensions ve vlastních aplikacích - Ladění a optimalizace výkonu ajaxových aplikací DVD obsahuje zdrojové kódy řešení z knihy, produkty Visual Studio 2008 Express Edition a 60denní denní trial verzi Expression Studio 2, dále PHP, MySQL a ASP.NET AJAX, užitečné nástroje – např. Google Web Toolkit, Prototype Framework či Echo 2, a nakonec příručky a videoprezentace k ASP.NET AJAX, Visual Studiu, Expression Webu, Silverlightu a dalším produktům. O autorovi: Luboslav Lacko je předním slovenským odborníkem na databázové technologie a webové programování s více než patnáctiletou praxí. Pracuje ve Vojenském technickém ústavu v Liptovském Mikuláši a působí jako školitel a konzultant. Publikuje články a seriály v odborných časopisech a je autorem desítky knih a příruček. (hotová řešení)

Předmětná hesla
Zařazeno v kategoriích
Recenze a komentáře k titulu
Zatím žádné recenze.


Ukázka / obsah
Přepis ukázky

Kap itola 7

Prototypy praktických

řešení pomocí Ajaxu

Masivní rozmach Ajaxu a zejména stále širší povědomí a zájem o tyto technologie nastal nikoliv

po Garretově článku, ve kterém byl pojem Ajax poprvé použit a byly popsány jeho základní

principy, ale až potom, co se na webu objevily zajímavé a užitečné aplikace, které tyto principy využívaly. Uživatelé si tak mohli v praxi vyzkoušet, jaké interaktivity a uživatelského komfortu je

možné u webových aplikací dosáhnout, a logicky začali tuto funkcionalitu požadovat i u jiných

webových aplikací.

Využití internetových služeb Googlu

Začněme možností využití funkcionality populárních služeb společnosti Google, především

vyhledávače a Google Maps.

Ajaxová aplikace využívající vyhledávač Google

Funkcionalitu populárního vyhledávače Google je možné zabudovat i do vlastní aplikace Ajax.

Pro implementování vyhledávání využijeme aplikační rozhraní Google Ajax Search API (http://

code.google.com/apis/ajaxsearch/ ).

Když chceme vytvořit aplikaci Ajax na základě tohoto rozhraní, nejdříve musíme zavést modul

Google Ajax Search API.

<script src=“http://www.google.com/uds/api?file=uds.js&amp;v=1.0“

type=“text/javascript“>

</script> Moduly se zavádějí pomocí funkce API: google.load(moduleName, moduleVersion, optionalSettings) V naší aplikaci chceme využívat interaktivní vyhledávání. Proto zavedeme modul:

<script type=“text/javascript“>

google.load(„search“, „1“);

</script>


Pro vyhledávání využijeme funkce API:

var searchControl = new google.search.SearchControl();

searchControl.addSearcher(new google.search.WebSearch());

searchControl.draw(document.getElementById(„searchcontrol“)); Kompletní kód vyhledávací aplikace Ajax bude:

<html>

<head>

<meta http-equiv=“content-type“ content=“text/html;

charset=windows-1250“>

<script src=“http://www.google.com/jsapi?key=ABCDEFG“

type=“text/javascript“></script>

<script type=“text/javascript“>

google.load(„search“, „1“);

function initialize()

{

var searchControl = new google.search.SearchControl();

searchControl.addSearcher(new google.search.WebSearch());

searchControl.draw(document.getElementById(„searchcontrol“));

}

google.setOnLoadCallback(initialize);

</script>

<body>

<h2> AJAX aplikace využívající službu Google Search

<div id=“searchcontrol“>

</body>

</html> Obrázek 7.1: Nejjednodušší stránka Ajax využívající službu Google Search Zatím vyhledáváme jen na webu. Do aplikace můžeme přidat další funkce pro lokální vyhledávání a vyhledávání videozáznamů, obrázků a vyhledávání na blog-stránkách, v novinkách a v knihách.

..

searchControl.addSearcher(new GlocalSearch());

searchControl.addSearcher(new GvideoSearch());

searchControl.addSearcher(new GblogSearch());

searchControl.addSearcher(new GnewsSearch());

searchControl.addSearcher(new GimageSearch());

searchControl.addSearcher(new GbookSearch());

..

07/

search1

.html

202 Využití internetových služeb Googlu


Kompletní kód aplikace pro vyhledávání pomocí více typů vyhledávačů bude:

<html>

<head>

<meta http-equiv=“content-type“ content=“text/html;

charset=windows-1250“>

<title>Příklad pro Google AJAX Search API

<link href=“http://www.google.com/uds/css/gsearch.css“

type=“text/css“ rel=“stylesheet“/>

<script src=“http://www.google.com/uds/api?file=uds.js&amp;v=1.0“

type=“text/javascript“>

</script>

<script language=“Javascript“ type=“text/javascript“>

//<![CDATA[

function OnLoad()

{

var searchControl = new GSearchControl();

var localSearch = new GlocalSearch();

searchControl.addSearcher(localSearch);

searchControl.addSearcher(new GwebSearch());

searchControl.addSearcher(new GvideoSearch());

searchControl.addSearcher(new GblogSearch());

searchControl.addSearcher(new GnewsSearch());

searchControl.addSearcher(new GimageSearch());

searchControl.addSearcher(new GbookSearch());

// Bod pro localSerch

localSearch.setCenterPoint(„Praha“);

searchControl.draw(document.getElementById(„searchcontrol“));

// Heslo pro vyhledávání

searchControl.execute(„ajax“); }

GSearch.setOnLoadCallback(OnLoad);

//]]>

</script>

<body>

<h2>AJAX aplikace využívající službu Google Search

<div id=“searchcontrol“>Načítá se

</body>

</html>

07/

search

.html

203Kapitola 7 – Prototypy praktických řešení pomocí Ajaxu

Prototypyprak

tických řešení pomocí Ajaxu

7


Obrázek 7.2: Stránka Ajax využívající službu Google Search

Ajaxová aplikace využívající Google Maps

Google maps je bezplatná, online mapová služba společnosti Google. Nabízí posouvatelné mapy

a satelitní snímky celého světa a plánovač cest s vyhledáváním a lokalizováním fi rem.Označení „satelitní snímky“ není přesné, protože část záběrů s největším rozlišením je z leteckého snímkování. „Pravé“ satelitní snímky pocházejí převážně z komerčního satelitu QuickBird

s maximálním rozlišením 60 cm na pixel. Služba Google Maps obsahuje výsledky vyhledávání

(například výpisy podniků, obrázky a související informace), které jsou poskytovány odnezávislých dodavatelů.

Službu je možné využívat jen v souladu se smluvními podmínkami. Pro jednotlivce je služba

Google Maps (včetně místních výsledků vyhledávání, map a fotografi ckého obrazového obsahu)

poskytována jen pro osobní a nekomerční použití. Pokud je uživatelem podnik, služba Google

Maps může být používána jen uvnitř podniku a nemůže být komerčně poskytována. Službu

můžeme volat z vlastní stránky HTML. Musíme si však vygenerovat klíč. Klíč pro používání

API je možné po souhlasu s licenčními podmínkami vygenerovat na adrese:

http://code.google.com/apis/ajaxsearch/signup.html

V příkladu jsme použili zeměpisné souřadnice Prahy:

<html>

<head>

<meta http-equiv=“content-type“ content=“text/html;

charset=windows-1250“>

</head>

<body>

<h2>HTML aplikace využívající službu Google Maps

<img src=“http://maps.google.com/staticmap?center=50.09193,

14.41935&zoom=12&size=512x512&key=MAPS_API_KEY“>

</body>

</html>

07/

mapa

.html

204 Využití internetových služeb Googlu


Nejjednodušším způsobem, jak využít službu Google Maps ve vlastní stránce Ajax, je využití

aplikačního rozhraní Maps. Toto rozhraní se přilinkuje do aplikace:

<script type=“text/javascript“

src=“http://www.google.com/jsapi?key=ABCDEFG“>

</script> Moduly se zavádějí pomocí funkce API: google.load(moduleName, moduleVersion, optionalSettings) V naší aplikaci chceme využívat interaktivně zobrazení mapy a vyhledávání. Proto zavedeme moduly:

<script type=“text/javascript“>

google.load(„maps“, „2“);

google.load(„search“, „1“);

</script> Nejdříve nastavíme bod v zeměpisných souřadnicích, který bude ve středu zobrazené mapy, její měřítko a typ. setCenter(center, zoom?, type?) Zoom se nastavuje v rozmezí hodnot 0 (celá zeměkoule) až 19, což je nejvyšší rozlišení.

map.setCenter(new google.maps.LatLng(50.09193, 14.41935), 10); Kompletní kód aplikace bude:

<html>

<head>

<meta http-equiv=“content-type“ content=“text/html;

charset=windows-1250“></head>

<script type=“text/javascript“

src=“http://www.google.com/jsapi?key=ABCDEFG“></script>

<script type=“text/javascript“>

google.load(„maps“, „2“);

// Funkce se volá při načítání stránky

function initialize()

{

var map = new google.maps.Map2(document.getElementById(„map“));

map.setCenter(new google.maps.LatLng(50.09193, 14.41935), 10);

}

google.setOnLoadCallback(initialize);

</script>

</head>

<body>

<h2>AJAX aplikace využívající službu Google Maps

<div id=“map“ style=“width: 600px; height: 400px“>

<div id=“searchcontrol“>

</body>

</html>

07/

maps

.html

205Kapitola 7 – Prototypy praktických řešení pomocí Ajaxu

Prototypypraktických řešení pomocí Ajaxu

7


Obrázek 7.3: Nejjednodušší stránka Ajax využívající službu Google Maps

Google Suggest

Populární vyhledávač Google se neustále vyvíjí a v době psaní této publikace byla v testovacím

provozu funkce „Suggest“. Funkce během zadávání vyhledávací fráze doplňuje nejčastějizadá

vané výrazy, přičemž ke každému nabízenému výrazu se zobrazuje i počet výsledkůvyhledá

vání. Propracovaný algoritmus tedy během psaní nabídne ta slova, které se mezi populárními

nejvíce podobají vašemu zadávanému slovu. Není těžké uhádnout záměr tvůrců – chtějínabíd

nout uživateli komfort a inspirovat ho textovými řetězci tak, aby strávil při používání služeb

vyhledávače více času, takže se uživateli zobrazí více sponzorovaných odkazů, což naplňuje

rozpočet provozovatele.

Provázání tvorby vyhledávacího dotazu se statistikami a strategickými záměry Google vypadá

na první pohled velmi zajímavě. Když se záměry provozovatele soustředí výhradně napodsou

vání textových řetězců, pomocí nichž dosáhli uživatelé nejlepší výsledky, vše je v absolutním

pořádku. Když však začnou podsouvané texty navigovat uživatele k reklamním nabídkám, bude

to špatné.

Samotná funkce Google Suggest pracuje na stejném principu jako funkce „Did you mean“ (měli

jste na mysli), když se vám podaří udělat překlep ve vaší vyhledávací frázi anebo když nějaká

jiná fráze obsahuje více výsledků. Na rozdíl od „Did you mean“, které funguje klasicky, znovu

načte obsah stránky, služba „Suggest“ využívá funkcionalitu Ajax a doplňuje vyhledávanéfrá

ze interaktivně bez nového načtení stránky. Testovací provoz běží na adrese http://labs.google.

com/suggest.

206 Využití internetových služeb Googlu


Obrázek 7.4: Služba Google Suggest

Volání služby Google Suggest

Doplňování funguje tak, že při každém stisknutí je na pozadí stránky HTML volán požadavek

na server s adresou http://www.google.com/complete/search?hl=en&js=true&qu=cast_vyhlada-

vaci_ fraze. Jako parametr qu slouží už napsaná část vaší vyhledávací fráze. Vrácený výsledek je

javascriptové pole, jehož obsah se zobrazuje pod vyhledávacím.

Když například zadáme jako část vyhledávací fráze slovo „java“, bude adresa URL ve tvaru:

http://www.google.com/complete/search?hl=en&js=true&qu=ajax

Na stránce se zobrazí výsledek v podobě obsahu javascriptových polí. Konkrétně pro zadaný

výraz „ajax“ budou vrácena pole s tímto obsahem:

sendRPCDone(frameElement, „ajax“,

new Array(„ajax“, „ajax tutorial“, „ajax examples“, „ajax tutorials“,

„ajax

toolkit“, „ajax framework“, „ajax asp.net“, „ajax control

toolkit“,

„ajax php“, „ajax example“),

new Array(„67,800,000 results“, „30,000,000 results“, „4,680,000 results“,

„45,800,000 results“, „1,610,000 results“, „44,400,000 results“,

„9,780,000 results“, „1,210,000 results“, „89,300,000 results“,

„19,600,000 results“),

new Array(„“)

); Když si pozorněji prohlédnete vrácený text, jedná se vlastně o javascriptový kód, konkrétně o volání funkce: sendRPCDone(nepouzite, vyhledavany_vyraz, pole_vyrazu, pole_poctu_vyskyty, nepouzite_pole) Proto napíšeme tuto funkci tak, abychom využili její automatické volání pro výpis serverem poskytnutých údajů. Nejjednodušší bude využít pro jejich výpis tabulku.

207Kapitola 7 – Prototypy praktických řešení pomocí Ajaxu

Prototypypraktických řešení pomocí Ajaxu

7


function sendRPCDone(nic, vyraz, polePojmu, poleVysledku, nicPole)

{

var tabulka = „<table>“;

if (poleVysledku.length != 0)

{

for (var nC = 0; nC < poleVysledku.length; nC++)

{

tabulka += „<tr>“ + polePojmu[nC] +

‘</td>‘ + poleVysledku[nC] + „“;

}

}

text += „</table>“;

var napovedaDiv = document.getElementById(„napovedaDiv“);

napovedaDiv.innerHTML = text;

} Funkce vypíše výsledky pro zadaný výraz (například ajax) ve tvaru:

ajax 67,800,000 results

ajax tutorial 30,000,000 results

ajax examples 4,680,000 results

ajax tutorials 45,800,000 results

ajax toolkit 1,610,000 results

ajax framework 44,400,000 results

ajax asp.net 9,780,000 results

ajax control toolkit 1,210,000 results

ajax php 89,300,000 results

ajax example 19,600,000 results Funkci můžeme vylepšit tak, že do prvního sloupce tabulky umístíme místo prostého textu hledaného výrazu odkaz na klasický vyhledávač Google. Doplňování funguje tak, že při každém stisknutí je na pozadí stránky HTML volán požadavek na server s adresou http://www.google.com/search?q = vyhledávaný výraz.

function sendRPCDone(nic, vyraz, polePojmu, poleVysledku, nicPole)

{

var text = „<table>“;

if (poleVysledku.length != 0)

{

for (var nC = 0; nC < poleVysledku.length; nC++)

{

text += „<tr>“ +

„<a href=‘http://www.google.com/search?q=“ +

polePojmu[nC] + „‘>“ + polePojmu[nC] +

‘</a>‘ + poleVysledku[nC] + „“;

}

}

text += „</table>“;

var napovedaDiv = document.getElementById(„napovedaDiv“);

208 Využití internetových služeb Googlu


napovedaDiv.innerHTML = text;

} Obrázek 7.5: Výpis údajů ve formě tabulky spolu s odkazem na každý nalezený termín Obrázek 7.6: Klepnutím na doporučený výraz se zobrazí výsledky vyhledávání Trochu jsme předběhli a na obrázcích ukázali výsledek, tedy způsob, jakým se budou zobrazovat výrazy interaktivní nápovědy. Vraťme se k budování stránky HTML využívající funkcionality Google Suggest. V těle stránky zobrazíme jen nadpis a textové pole pro zadávaní vyhledávaného výrazu.

<body>

<h1>Google SUGGEST

Hledej <input id = „vyraz“ type = „text“

name = „vyraz“ onkeyup = „Napoveda(event)“>

<div id = „napovedaDiv“>

</body>

209Kapitola 7 – Prototypy praktických řešení pomocí Ajaxu

Prototypypraktických řešení pomocí Ajaxu

7


Jako reakce na událost onkeyup v poli pro zadávání textového řetězce se volá funkce Napoveda.

V jejím těle musíme detekovat text dosud napsaný do textového pole. Kvůli kompatibilitěprohlížečů musíme v některých případech místo události odeslané jako parametr využít událost

window.event. Aby byl kód co nejjednodušší, využijeme podmínku typu:

proměnná = (podmínka) ? prirazeni_true: prirazeni_false; Konkrétně v našem případě:

udalost = (udalost) ? udalost: window.event; Dosud napsaný text přiřadíme do proměnné také pomocí podmínky zohledňujícínekompatibilitu prohlížečů:

txt = (udalost.target) ? udalost.target : udalost.srcElement;

function Napoveda(udalost)

{

udalost = (udalost) ? udalost: window.event;

txt = (udalost.target) ? udalost.target : udalost.srcElement;

if (udalost.type == „keyup“)

{

if (txt.value) {getData(„suggest.php?qu=“ + txt.value);}

else

{

var napovedaDiv = document.getElementById(„napovedaDiv“);

napovedaDiv.innerHTML = „<div>

“;

}

}

} Z bezpečnostního hlediska není povoleno posílat dotaz na stránky z domén třetích stran. Když adresa URL absolutní cesty k přenášenému dokumentu směřuje do jiné domény volání metody open, vyvolá výjimku. Proto vytvoříme ve vlastní doméně skript PHP, který zprostředkujevolání adresy URL v jiné doméně. suggest.php

<?php

$stream = fopen(„http://www.google.com/complete/search?hl=en&js=true&qu=

“ . $_GET[„qu“], „r“);

while (!feof($stream))

{

$text = fgets($stream);

echo $text;

}

fclose($stream);

?> Kód můžeme vyzkoušet například pomocí parametru ajax v adrese URL http://localhost/04/ suggest.php?qu=ajax.

210 Využití internetových služeb Googlu


Kompletní kód stránky HTML pro volání služby Google Suggest na pozadí a pro interaktivní

zobrazování výsledků bez znovunačtení stránky bude vypadat následovně:

suggest.html

<html>

<head>

<meta http-equiv=“content-type“ content=“text/html;

charset=windows-1250“>

<title>Google SUGGEST

<script language = „javascript“>

var xHttp= false;

function ZiskejData(zdrojDat)

{

xHttp = VytvorXMLHttp();

xHttp.open(„GET“, zdrojDat);

xHttp.onreadystatechange = function()

{

if (xHttp.readyState == 4 && xHttp.status == 200)

{ eval(xHttp.responseText);}

}

xHttp.send(null);

}

function Napoveda(udalost)

{

udalost = (udalost) ? udalost: window.event;

txt = (udalost.target) ? udalost.target : udalost.srcElement;

if (udalost.type == „keyup“)

{

if (txt.value) {ZiskejData („suggest.php?qu=“ + txt.value);}

else

{

var napovedaDiv = document.getElementById(„napovedaDiv“);

napovedaDiv.innerHTML = „<div>

“;

}

}

}

function sendRPCDone(nic, vyraz, polePojmu, poleVysledku, nicPole)

{

var tabulka = „<table>“;

if (poleVysledku.length != 0)

{

for (var nC = 0; nC < poleVysledku.length; nC++)

{

tabulka += „<tr>“ +

„<a href=‘http://www.google.com/search?q=“ +

polePojmu[nC] + „‘>“ + polePojmu[nC] +

‘</a>‘ + poleVysledku[nC] + „“;

}

07/

Suggest.

html

211Kapitola 7 – Prototypy praktických řešení pomocí Ajaxu

Prototypypraktických řešení pomocí Ajaxu

7


}

tabulka += „</table>“;

var napovedaDiv = document.getElementById(„napovedaDiv“);

napovedaDiv.innerHTML = tabulka;

}

function VytvorXMLHttp()

{

var xmlHttp= false;

if (window.ActiveXObject)

{xmlHttp = new ActiveXObject(„Microsoft.XMLHTTP“);}

else if (window.XMLHttpRequest)

{xmlHttp = new XMLHttpRequest();}

return xmlHttp

}

</script>

</head>

<body>

<h1>Google SUGGEST

Hledej <input id = „vyraz“ type = „text“

name = „vyraz“ onkeyup = „Napoveda(event)“>

<div id = „napovedaDiv“>

</body>

</html>

Po d le do s t upnýc h i n for m a c í bud e n á z e v t é to f u n k c e br z o z mě ne n n a w i ndow. go o g le . a c . Su g ge s t _

apply.

Jiná bude i struktura vrácených polí.

window.google.ac.Suggest_apply(frameElement, „ajax“,

new Array(2, „ajax“, „66,400,000 results“, „ajax tutorial“,

„765,000 results“, „ajax

toolkit“, „306,000 results“, „ajax control toolkit“,

„476,000 results“,

„ajax tutorials“, „1,530,000 results“, „ajax examples“, „258,000

results“,

„ajax fc“, „389,000 results“, „ajax amsterdam“,

„1,440,000 results“, „ajax

asp.net“, „1,780,000 results“, „ajax framework“,

„1,610,000 results“), new Array(„“));

212 Využití internetových služeb Googlu




       
Knihkupectví Knihy.ABZ.cz - online prodej | ABZ Knihy, a.s.