Hlavní menu
Kategorie
Přihlásit
Anketa
Podporujeme
Přispějte na provoz
Jedná se o využití XMLHttpRequest javascriptového objectu a PHP – AJAXe (Asynchronous JavaScript and XML). V praxi jej můžete vyzkoušet např. na stránkách Baťa . Všimněte si, že při vkládání bot do košíku se vám neaktualizuje celá stránka, ale pouze se vám zobrazí košík s animací a v něm zvolenou položkou. Zde je právě použitý tento způsob, a to pomocí XMLHttpRequestu. My se však nebudeme zabývat až tak složitými věcmi, protože by na ně jistě jeden tutoriál nestačil. Konkrétně vám ukáži aktualizování určitého obsahu na stránce. Vytvoříme hlavní soubor index.php, který bude celou stránku generovat. Já zvolil Tutorialy.com:
HTML
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<meta name="author"
content="Marek
Čapla - marek.capla@centrum.cz">
<meta name="keywords" content="tutoriály,
photoshop, tvorba webu, php, html, java script, css, ps, ps cs, ps cs2, corel,
corel draw, corel rawe, tut, tuty, české, české tutoriály, tutorialy,
tutorialy.com, com, download, brushe, paterny, rendery, příručka, návod,
výuka, image ready, sig, speciální efekty, textové efekty, tvorba sigů,
úprava fotek, webdesign, design, web, základy, programování, pagerank,
google pagerank, validátor, rss, články, 3D Studio Max, Adobe Illustrator,
Flash, adobe, adobe pohotoshop, Sony Vegas, video, zpracování videa, seo, seo
optimaliztace, minitutorialy, diskuzní fórum, ISSN 0322-9289">
<meta name="description" content="Tutorialy.com - Portál s tutoriály Adobe Photoshop,
tvorby webu, 3D a 2D grafiky a hudby v Sony Vegas.">
<meta name="DC.Identifier" content="(SCHEME=ISSN) 0322-9289">
<meta http-equiv="Content-language" content="cs">
<meta name="robots"
content="all">
<link rel="shortcut
icon" href="http://tutorialy.com/templates/ikonky/favicon.gif">
<link rel="stylesheet" type="text/css" href="http://tutorialy.com/templates/rating.css">
<title>Tutorialy.com
| internetový časopis o grafice a tvorbě webu</title>
<link rel="stylesheet" href="http://tutorialy.com/templates/style.css">
</head>
<body>
<iframe src="http://www.eclan.cz/lista/lista.php?from=Tutorialy.com&style=tutorialy.css"
name="lista" width="100%"
height="18" scrolling="no"
frameborder="0"></iframe>
<div align="center">
<div id="line">
<div id="header">
<h1>Tutorialy.com
- internetový časopis o grafice a tvorbě webu</h1>
<div id="logo">
<a href="http://www.tutorialy.com/"> </a>
</div>
</div>
</div>
<div id="main">
<div id="obsah">
<div class="blok">
<div class="lista2">
Nové tutoriály
</div>
<div class="text"
id="my_content"> <!-- Zde bude náš měnící se
obsah stránky -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Všimněte si
<div class="text"
id="my_content">
Tento tag začíná náš měnící obsah. Jako identifikátor je my_content, takže pomocí javascriptu k něm budeme přistupovat pomocí objektu document, metody getElementById(‚my_content‘).
Nyní je tento div my_content prázdný… Jeho naplnění obsahem má na starost PHP. V dnešní době je PHP a MySQL společně samozřejmostí, proto si vytvoříme tabulku new_tuts, a to tímto SQL příkazem:
SQL
CREATE TABLE `new_tuts` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(255) collate utf8_czech_ci NOT NULL,
`desc` text collate utf8_czech_ci NOT NULL,
`thumb` varchar(255) collate utf8_czech_ci NOT NULL,
`time` varchar(50) collate utf8_czech_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8
COLLATE=utf8_czech_ci;
Přidáme do prázdné tabulky new_tuts nějaké tutoriály dalšímy SQL příkazy:
INSERT INTO new_tuts (`id`, `title`, `desc`,
`thumb`, `time`) VALUES (1, 'Hvězdičkové hodnocení', 'Ukázka javascriptové nabídky pro hodnocení článků,
fotek, či čehokoliv jiného', 'http://data.tutorialy.com/nahledy/js.gif', '1212087740');
INSERT INTO new_tuts (`id`, `title`, `desc`,
`thumb`, `time`) VALUES (2, 'Hover menu', 'Tvorba
vertikálního hover menu pomocí css.', 'http://data.tutorialy.com/nahledy/css.gif', '1210712296');
INSERT INTO new_tuts (`id`, `title`, `desc`,
`thumb`, `time`) VALUES (3, 'Tip na SEO <title>', 'Něco málo ze sklenky SEO', 'http://data.tutorialy.com/nahledy/seo.gif', '1210882444');
INSERT INTO new_tuts (`id`, `title`, `desc`,
`thumb`, `time`) VALUES (4, 'Úvod do CSS', 'Vznik
CSS', 'http://data.tutorialy.com/nahledy/css.gif', '1210505217');
INSERT INTO new_tuts (`id`, `title`, `desc`,
`thumb`, `time`) VALUES (5, 'Počítadlo na webu, třetí díl', 'Aneb jak naházet hodnoty z počítadla do grafu',
'http://data.tutorialy.com/nahledy/php.gif',
'1210955326');
INSERT INTO new_tuts (`id`, `title`, `desc`,
`thumb`, `time`) VALUES (6, 'Počítadlo na webu, druhý díl', 'Tentokráte s databází a elegantněji', 'http://data.tutorialy.com/nahledy/php.gif', '1208626458');
INSERT INTO new_tuts (`id`, `title`, `desc`,
`thumb`, `time`) VALUES (7, 'Jak instalovat pluginy do photoshopu', 'Tento tutoriál je určen spíše pro začátečníky,
cht...', 'http://data.tutorialy.com/nahledy/plugin.gif',
'1208115362');
INSERT INTO new_tuts (`id`, `title`, `desc`,
`thumb`, `time`) VALUES (8, 'Nahráváme na server', 'Jak nahrát obrázek na server přes formulář a
vloži...', 'http://data.tutorialy.com/nahledy/php.gif', '1208024246');
INSERT INTO new_tuts (`id`, `title`, `desc`,
`thumb`, `time`) VALUES (9, 'Vodoznak ve fotce', 'Chraňte si fotky před zloději!', 'http://data.tutorialy.com/nahledy/php.gif', '1207316967');
INSERT INTO new_tuts (`id`, `title`, `desc`,
`thumb`, `time`) VALUES (10, 'Počítadlo na webu, první díl', 'První díl miniseriálu o počítadlech na webu,
tento...', 'http://data.tutorialy.com/nahledy/php.gif', '1207166671');
PHP
Vytvoříme nový soubor s názvem functions.php a vytvoříme dvě funkce mysqlConnect() a getNewTuts(). Na začátku scriptu ihned zavoláme funkci mysqlConnect:
<?php
mysqlConnect();
function
mysqlConnect()
{
mysql_connect("HOST", "USER", "PASS");
mysql_select_db("DB");
mysql_query("SET NAMES
UTF8");
}
function getNewTuts()
{
$q = mysql_query("SELECT * FROM
new_tuts ORDER BY RAND() LIMIT 4");
while($res = mysql_fetch_assoc($q))
{
echo '
<div class="cla-nahled">
<img src="'.$res['thumb'].'" border="0" alt="'.$res['title'].'" align="left" class="nahled">
<h2><strong>'.$res['title'].'</strong></h2>
'.$res['desc'].'<br>
<div class="cla-info">
<span class="datum">'.date("d.m.y", $res['time']).'</span>
</div>
</div>
';
}
}
?>
Do souboru index.php na začátek přidáme volání funkce require_once a jako parametr předáme „functions.php“:
<?php
require_once "functions.php";
?>
A do našeho divu my_content přidáme volání funkce getNewTuts():
....
<div class="text"
id="my_content"> <!-- Zde bude náš měnící se
obsah stránky -->
<?php
getNewTuts();
?>
</div>
.....
Nyní můžeme ozkoušet náš script. Vidíme, že se při aktualizování celé stránky změní obsah divu (díky SQL dotazu, který vybírá nahodné tutorialy z tabulky new_tuts). Nedocílili jsme však našeho původního plánu. Chceme dosáhnout změny obsahu našeho divu pomocí vyvolání určité události a bez načtení celé stránky. Takto vlastně ušetříme SQL dotazy na náš MySQL server a vlastně i provedení hlavního PHP scriptu.
Vytvoříme odkaz na text Nové tutoriály. Atribut href bude obsahovat hodnotu „javascript:reloadNewTuts()“ (volání funkce reloadNewTuts() ):
<a href="javascript:reloadNewTuts()">Nové
tutoriály</a>
Javascript
Vytvoříme soubor xmlhttpreq.js. Vytvoříme do něj dvě funkce reloadNewTuts() a sendRequest(…):
var xmlHttpReq;
if(typeof XMLHttpRequest != 'undefined')
{
try
{
xmlHttpReq = new
XMLHttpRequest();
}
catch(e)
{
try {
xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlHttpReq = false;
}
}
}
}
else
{
try {
xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlHttpReq = false;
}
}
}
var data =
sendRequest("POST", "URL k
functions.php", "sender=sendRequest&type=new_tuts");
function
reloadNewTuts()
{
document.all['my_content'].innerHTML =
data;
data = sendRequest("POST", "URL k
functions.php", "sender=sendRequest&type=new_tuts");
}
function
sendRequest(getOrPost, page, params)
{
var strResult;
if(getOrPost.toUpperCase() == "POST")
{
xmlHttpReq.open("POST", page,
false);
xmlHttpReq.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
xmlHttpReq.send(params);
}
else
{
xmlHttpReq.open("GET", page +
"?" + params, false);
xmlHttpReq.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
xmlHttpReq.send(null);
}
strResult = xmlHttpReq.responseText;
return strResult;
}
V prvním řádku kódu vytvoříme proměnnou xmlHttpReq. Musíme pamatovat na to, že Internet Explorer 4 a nižší (a některé jiné prohlížeče) nemají implementovaný XMLHttpRequest objekt, a proto musíme použít alternativní objekty. V další části scriptu deklarujeme proměnnou data a zároveň jí přiřadíme hodnotu vrácenou funkcí sendRequest, kde předáme parametry: první je „POST“ (předáme proměnné pomocí POST – takže použijeme $_POST), druhý je url stránky, a třetí jsou hodnoty proměnných, které předáváme pomocí POST. Funkce sendRequest vrátí výpis stránky. My jsme zvolili stránku functions.php. Po kliknutí na Nové tutoriály vyvoláme událost, která spustí funkci reloadNewTuts a tato funkce aktualizuje obsah v našem divu a opět přiřadí proměnné data novou hodnotu. Možná vás zaskočilo, že tu mluvím o tom, jak se vše aktualizuje, ale odkud se získají ta data k aktualizování? Přece z našeho PHP scriptu functions.php. Přidáme do functions.php nějaké podmínky. „URL k functions.php“ přepište na URL k vašemu functions.php scriptu.
Připojíme náš javascript k html kódu:
<head>
.....
<script type="text/javascript" src="xmlhttpreq.js"></script>
.....
</head>
A nakonec přidáme podmínky do scriptu functions.php:
<?php
mysqlConnect();
if($_POST['sender'] ==
"sendRequest")
{
if($_POST['type'] == "new_tuts")
getNewTuts();
}
function
mysqlConnect()
{
mysql_connect("HOST", "USER", "PASS");
mysql_select_db("DB");
mysql_query("SET NAMES
UTF8");
}
function getNewTuts()
{
$q = mysql_query("SELECT * FROM
new_tuts ORDER BY RAND() LIMIT 4");
while($res = mysql_fetch_assoc($q))
{
echo '
<div class="cla-nahled">
<img src="'.$res['thumb'].'" border="0" alt="'.$res['title'].'" align="left" class="nahled">
<h2><strong>'.$res['title'].'</strong></h2>
'.$res['desc'].'<br>
<div class="cla-info">
<span class="datum">'.date("d.m.y", $res['time']).'</span>
</div>
</div>
';
}
}
?>
A máme hotovo.
Tyto scripty lze využívat také ke stránkování obsahu stránky, při hlasování v anketě. Je mnoho možností, jak tento systém využívat.
Zdrojový kód k dispozici ZDE Testovací stránka k dispozici ZDE
Dotazy prosím v komentářích.
<a href="http://localhost/" onclick="reloadNewTuts(); return false;">Nové tutoriály</a>
A omlouvam se za chybu ve zdrojovych kodech ke stazeni. Opravim ihned jak bude mozno. (soubor xmlhttpreq.js obsahuje stejny text jako functions.php)