Ajax -- Hotová řešení

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

Titul doručujeme za 4 pracovní dny

Médium: kniha + DVD

Vaše cena s DPH: 297 Kč 252 Kč

8,4

bodíků za nákup

ukázka

	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

WWW design
AJAX technologie
Programování WWW stránek

Zařazeno v kategoriích

Naučná literatura > Počítače a Internet > WWW design

Katalog předmětový > A > AJAX technologie

Katalog předmětový > P > Programování WWW stránek

Ostatní > DVD > DVD film > DVD v plastovem obalu

Katalog vybraných autorů > L > Lacko - Ľuboslav Lacko

Katalog nakladatelství > C > Computer press

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.

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:

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>

charset=windows-1250“>

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

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

</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>

charset=windows-1250“>

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

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

type=“text/javascript“>

</script>

//<![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/

.html

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

Prototypyprak

tických řešení pomocí Ajaxu

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>

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:

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:

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>

charset=windows-1250“></head>

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

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

</body>

</html>

07/

maps

.html

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

Prototypypraktických řešení pomocí Ajaxu

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

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)“>

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

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

Naučná literatura > Počítače a Internet > WWW design

Katalog předmětový > A > AJAX technologie

Katalog předmětový > P > Programování WWW stránek

Ostatní > DVD > DVD film > DVD v plastovem obalu

Katalog vybraných autorů > L > Lacko - Ľuboslav Lacko

Katalog nakladatelství > C > Computer press

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