knihy
abz.cz
sleva
kniha + DVD:
Ajax -- Hotová řešení
Autor:
Ľuboslav Lacko
doručujeme do Vánoc
Kdy zboží dostanu
ukázka
| Nakladatelství: | » Computer press |
| Médium: | kniha + DVD |
| Rok vydání: | 2008 |
| Počet stran: | 272 |
| Rozměr: | 167 x 225 mm |
| Úprava: | ilustrace |
| Vydání: | Vyd. 1. |
| Spolupracovali: | překlad Michal Brůha |
| Vazba: | brožovaná lepená |
| Datum vydání: | 23. 5. 2008 |
| Nakladatelské údaje: | Brno, Computer Press, 2008 |
| ISBN: | 9788025121085 |
| EAN: | 9788025121085 |
| Ukázka: | » zobrazit ukázku |
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í)
Naučná literatura > Počítače a Internet > WWW design
Ostatní > DVD > DVD film > DVD v plastovem obalu
Katalog předmětový > A > AJAX technologie
Katalog předmětový > P > Programování WWW stránek
Katalog vybraných autorů > L > Lacko - Ľuboslav Lacko
Katalog nakladatelství > C > Computer press
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 v yuží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&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&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
Prototypy prak
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 od nezá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
Prototypy prak
tický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ěji zadá
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ě na podsou
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
Prototypy prak
tický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>
‘</td>
}
}
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>
}
}
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“>
