O programování a všem okolo

Archiv rubriky „AJAX“

AJAX - automatické dokončování 4

V tomto posledním díle o naší aplikaci na automatické dokončování vše zdárně dokončíme. Poslední co je potřeba pro vykonání kódu je, že naprogramujeme soubor zpracuj.php. Zajišťuje spojení s databází, a v případě nálezu pošle AJAXovému kódu nalezený výsledek.

Dejme se tedy do práce, vytvoříme následný kód, vysvětlení funkce kódu je uvedeno v komentářích kódu:

<?php
//jestliže existuje hodnota dotazu jménem mesto
if($_REQUEST["mesto"]){
//napojíme se na databázový server
@$napoj_db=mysql_connect(”localhost”,”pokus”,”pokus”);
//vybereme si databázi
@$vyber_db=mysql_select_db(”mesta”,$napoj_db);
//————
//jestliže došlo ke správnému napojení
if($napoj_db && $vyber_db){
//pro snažší práci uložíme proměnou mesto do proměné prom
$prom=$_REQUEST["mesto"];
//dotážeme se na databázi jestli obsahuje výraz, který začíná na písmeno z proměnné prom
$dotaz=mysql_query(”SELECT * FROM vyber_mest WHERE mesto LIKE ‘$prom%’”,$napoj_db);
//jestliže nebyl dotaz vykonán tak PHP vypíše chybovou zprávu
if(!$dotaz){echo “nejde dotaz”.mysql_error();}
else{
//pokud byl vykonán dotaz a existuje alespoň jedna shoda
$pocet=mysql_num_rows($dotaz);
if($pocet>0){
//jestliže je nalezena nějaká hodnota v databázi tak vypíšeme HTML objekt select
//stanovíme mu při změně zavolání funkce zobraz_volbu(). vysvětlení této funkce se
//dozvíte v třetím díle, a při kliknutí zavoláte funkci handler_odpoved(), její
//vysvětlení je opět ve třetím díle
echo “<select name=’mesta’ size=’”.$pocet.”‘ id=’vypis’ onClick=’handler_odpoved()’ onChange=’zobraz_volbu()’>”;
//projdeme všechny výskyty v databázi a do tagu option elementu select vypíšeme jejich hodnotu
for($i=0;$i<$pocet;$i++){
$vyp=mysql_fetch_object($dotaz);
echo “<option value=’”.$vyp->cislo.”‘>”.$vyp->mesto.”</option>”;}
echo “</select>”;
}
//Jestliže není nic nalezeno, tak vypíšeme do AJAXu slovo nenalezeno
else if($pocet==0){echo “nenalezeno”;}
}
}
}
?>

Nyní máte dokončenu aplikaci pro automatické dokončování. Pokud jste dělali vše správně tak by vžsledek mohl být podobný jako u Google vyhledávače, jediné co chybí, je že nejsou uvedeny počty výskytů a dotazů jako u Google.

Samozřejmě tak jako ostatní programátorské kousky, šly by i tyto vylepšit, ale to už nechám na Vaší fantazii.

19. 7. 2009 | gisat_cz | 0

AJAX - automatické dokončování 3

V minulém díle jsme si ukázali vytvoření AJAXu a hlavního souboru pro naše dokončování a nyní vytvoříme funkce, které umožňují interakci s uživatelem. Napřed si vytvoříme funkci, který bude zachycovat chování uživatele:

Jelikož přístup prohlížečů k javascriptu není vždy shodný musíme dělat různá rozhodnutí pro různý prohlížeč:
function zjisti_kod_akce(e){
if(e){
return e.charCode ? e.charCode : e.keyCode;}
else{return window.event.charCode ? window.event.charCode : window.event.keyCode; }}

Další funkce, kterou budeme programovat nám zajistí danou interakci. Určitě jste se setkali v Googlu s tám, že když Vám dokončovací systém najde Vaši volbu tak zmáčknete šipku dolů, přejdete na danou volbu a ona se zobrazí v textovém poli a to přesně dělají naše funkce:

function posun_volby(e){
var unicode=zjisti_kod_akce(e);
var naseptavac=document.getElementById(”vypis”);
//Jestliže stisknu šípku dolů přejdu na danou volbu
if(unicode==40){
naseptavac.options.selectedIndex =
naseptavac.options.selectedIndex >= 0 &&
naseptavac.options.selectedIndex < naseptavac.options.length-1 ?
naseptavac.options.selectedIndex+1 : 0;

//a zobrazím ji v textovém políčku
zobraz_volbu();
return;
}
else if(unicode==38){
//Jestliže stisknu šípku nahoru přejdu na danou volbu
naseptavac.options.selectedIndex =
naseptavac.options.selectedIndex > 0 ?
naseptavac.options.selectedIndex-1 : naseptavac.options.length-1;

//a zobrazím ji v textovém políčku
zobraz_volbu();
return;
}
else if(unicode==13){
//jestliže zmáčknu enter
lastSelected = document.getElementById(”textik”).value;
// na enter ve textovém poli nechceme odesílat volbu
if (window.event)
e.returnValue = false;
else
e.preventDefault();
document.getElementById(”vysl_hledani”).style.visibility = “hidden”;
}}

Tato funkce způsobí zobrazení vybrané volby v textovém políčku, výsledný výběr je zobrazen na základě regulárního výrazu

function zobraz_volbu(){
var selekt=document.getElementById(”vypis”);
var nazev=selekt.options[selekt.selectedIndex].innerHTML;
document.getElementById(”textik”).value=nazev.replace(/\&/g,”&”);
}

Následující funkce zajistí zobrazení vobly v textovém okně a zneviditelní div s volbou, je volána v PHP skriptu:

function handler_odpoved(){
zobraz_volbu();
document.getElementById(”vysl_hledani”).style.visibility=”hidden”;}

V posledním čtvrtém díle naši miniaplikaci pro automatické dokončování dokončíme.

19. 7. 2009 | gisat_cz | 0

AJAX - automatické dokončování 2

Tak jsem tu opět s jednou miniaplikací. Přibylo totiž trochu víc práce, tak nebyl čas napsat druhý díl o automatickém dokončování v AJAXu. Problematiku automatického dokončování jsem se kvůli obsahové rozsáhlosti rozhodl napsat do více dílů.

Tentokrát si v tomto díle vytvoříme hlavní soubor a ajaxový soubor.

Tedy dejme se do toho:

TVORBA HLAVNÍHO SOUBORU:

Do tagu head uvedeme napojení na stylový a javascriptový soubor:

Poté do tagu body napíšeme skript pro hlavní prvky automatického dokončování:

<span class=”nazev”>Název města</span>
<input type=”text” id=”textik” onkeyup=”Ajax()” autocomplete=”off” onkeydown=”posun_volby(event)”/>
<div id=”vysl_hledani”></div>

Část triku automatického dokončování spočívá v aplikaci události onkeyup, při této události se při každém zadání písmenka do políčka zavolá funkce Ajax(), která je jádrem dokončování, detaily o této funkci si povíme později, funkce posun_volby(event) má specifické vlastnosti, o krerých si povíme později, je volána tehdy, když uživatel klikne na šipku dolů.

Dále je nutné u textového políčka nastavit vlastnost autocomplete na off.

VYTVOŘÍME AJAXOVÝ SOUBOR ajax.js:

Výše uvedený soubor sice umožní výpis informací, ale neumožní například toto chování: pokud kliknete na nalezené město tak se vám v textovém políčku neobjeví jeho název a stejně tak pokud budete mačkat šipku dolů tak se nepřesunete na panel s výpisem měst. Toto musíme napravit a uděláme speciální javascriptové funkce, se kterými této interakce dosáhneme.

//Interakce s uživatelem:________________________________
Toto je funkce, pomocí níž umožníte javascriptu zachytit část uživatelova chování, tedy pokud klikne myší, nebo zmáčkne jakoukoli klávasu tak se toto chování v této funkci uloží a my ho potom budeme moci použít.

V dalším díle si ukážeme skripty pro zpracování chování uživatele a dokončíme povídání o automatickém dokončování.

19. 7. 2009 | gisat_cz | 0

Vytváříme anketu

S anketou se na internetu setkáte prakticky na každém kroku. Umožňuje dozvědět se mínění čtenářů na různá palčivá témata.

Jak takovou anketu vytvoříme? Existuje opět mnoho způsobů a technik, asi tou nejjednodušší je využít služeb některých opensource projektů, jedním z nich je například projekt Blueboard. Velkou nevýhodou využívání takových onlinových produktů je zejména to, že nejste stoprocentním pánem nad ovládáním takového ankety.

My si zde ukážeme jakým způsobem bychom si mohli takovou anketu vytvořit sami, a to od samých základů. Co je k tomu potřeba: no zejména základní znalosti CSS, PHP, SQL, AJAXu a HTML kódování. Vypadá to složitější než to ve skutečnosti je.

Ještě bych dodal, že pro objemnost kódu jsem neošetřil například databázové chyby při volání. Snad Vám popis tvorby ankety bude srozumitelný, opravdu na ní není nic těžkého. Dejme se tedy do díla:

VYTVOŘÍME OBRÁZKOVÝ PODKLAD NAŠEHO ANKETNÍHO GRAFU:

V některém z grafických editorů, postačí klidně freewarový GIMP či windowsovský program Malování, si vytvoříme jednobarevný proužek o šířce 1 pixel a výšce 10 pixelů:

VYTVOŘÍME DATABÁZI:

Vytvoříme si databázi, například v phpmyadmin. Databáze se bude jmenovat anketa a tabulka také anketa, vytvoříme tam jeden řádek kteřý se bude jmenovat velikost a bude formátu varchar o velikosti 220

VYTVOŘÍME SI HLAVNÍ STRÁNKU, NA KTERÉ BUDE ANKETA:

naskriptování této stránky skutečně není nic těžkého. Bude se skládat ze samého HTML kódu:

Do tagu head napíšeme napojení na javascriptový soubor a php soubor a případný stylový předpis:

<head>

<script src=”anketa.js”</script>

<?php include_once “anketka.php” ?>

</head>

Do tagu body napíšeme tělo naší ankety, bude velmi jednoduché:

<h1>ANKETA</h1>
<span id=”dotaz1″ name=”dotaz1″ onclick=”nacist_data(); return false;”>Používáte službu Twitter?</span>
<div id=”obr”><img src=”prouzek.png” id=”graf1″ name=”graf1″ width=”<?php aktual()?>” height=”10″/></div>

Jak sami vidíte kód stránky je jednoduchý, skládá se z nadpisu, věty na kterou můžeme klikat a tím pádem hlasovat a malého obrázku představující primitivní verzi grafu.

VYTVOŘÍME ONEN JAVASCRIPTOVÝ SOUBOR anketa.js:

Tento soubor tvoří pomyslné jádro naší ankety. Myšlenka je velmi jednoduchá, jestliže uživatel zařne hlasovat, tak tak se metodou post pomocí AJAXu pošle dokumentu php, respektive souboru anketka.php proměná s názvem velikost a hodnotou deset.

Tato hodnota se bude následně v souboru anketka.php přičítat ke stavu v databázi. Blíže vysvětlovat strukturu AJAXového kódu zde nebudu, protože popis vytváření AJAXu jsem uvedl v některém z minulých článků.

Podívejme se tedy na AJAXový kód:

VYTVOŘÍME SOUBOR anketka.php:

Kód je vysvětlen uvnitř v komenářích(šedivý text):

<?php
//napojíme se na soubor s databázovou konfigurací
include_once ‘db.php’;
//jestliže došlo k předání proměné velikost
if($_REQUEST["velikost"]){
//vytvoříme objekt k přístupu do databáze
$napoj_db=new databaze();
//tento krok je možná zbytečný
$hod=$_REQUEST["velikost"];
//jestliže došlo k napojení do databáze
if($napoj_db->napojeni()==1){
//vytvoří se nová proměná a předanou hodnotu zvýší o 10
$nova_vel=$hod+10;
//údaje zapíše do tabulky, tedy přepíše předchozí údaje
$dotaz=mysql_query(”UPDATE anketa SET velikost=’$nova_vel’”);
}
//jestliže byly údaje přepsány
if($dotaz){
$dotaz2=mysql_query(”SELECT * FROM anketa “);
$stav=mysql_num_rows($dotaz2);
//i když máme pouze jeden výskyt tak provedeme iteraci nalezených prvků
for($i=0;$i<$stav;$i++){
//výsledek uložíme do proměnné $vysledek
$vysledek=mysql_fetch_array($dotaz2);
//vypíšeme obrázek s danou šířkou uvedenou v databázi
echo “<img src=’prouzek.png’id=’graf1′name=’graf1′width=”.$vysledek[0].” height=’10′/>”;
}
}}

Tvorba souboru db.php:

Dále vytvoříme funkci pro zadání úvodní šířky do doby než začne uživatel hlasovat:

Dále mi ještě zbývá dovysvětlit soubor db.php:

Uživatel databáze nemá heslo , takže také do přihlášení není uvedeno.

<?php
//Vytvoříme třídu
class databaze{
private $jmeno; //jméno uživatele
private $pocitac; //druh počítače, tedy adresa počítače
private $db; //název databáze
public $napoj; //proměnná pomocí níž se napojíme na databázový stroj
//konstruktor třídy, ve kterém uložíme hodnoty do proměnných
public function __construct() {
$this->jmeno=”blog”;
$this->pocitac=”localhost”;
$this->db=”anketa”;}
//————————————————-
//veřejná funkce, pomocí níž se napojíme na databázový stroj a databázi
public function napojeni() {
//napojíme se na databázový stroj
@$this->napoj=mysql_connect($this->pocitac, $this->jmeno);
//napojíme se na databázi
@$this->oznac_db=mysql_select_db($this->db,$this->napoj);
//jestliže nedošlo k napojení na databází a databázový stroj, je vrácena hodnota nula
if(!$this->napoj && !$this->oznac_db){
return 0;
}
//jestliže došlo k napojení na databází a databázový stroj, je vrácena hodnota jedna
else{return 1;}
}}
?>

19. 7. 2009 | gisat_cz | 1

AJAX - jednoduchá kontrola jména ve formuláři

Opět jsem tu s AJAXem. Velmi často jsem v internetových diskusích vídával dotaz jak jednoduše zkontrolovat existenci či neexistenci jména v databázi aníž by se musel celý formulář znovu uplaudovat. Řešení je přitom velmi jednoduché. Stačí k tomu vytvořit tři soubory, základní znalost AJAXu, PHP a v případě stylování také CSS.

My si vše podrobně ukážeme a po přečtení celého tohoto článku nebudete již mít problém s kontrolou jména a hesla bez uplaudu formuláře.

Začněme tedy s tím hlavním, a to s tvorbou příslušného formuláře:

Do tagu <head> uvedeme napřed napojení na náš AJAXový dokument a také stylový rozpis:

<style type=”text/css”>
<!–

#cilovyDiv {
position: absolute;
left: 225px;
top: 70px;
width: 184px;
height: 23px;
}

–>
</style>

Do tagu <body> uvedeme samotný formulář:

<h1>Registrace uživatele</h1><br/>
<label for=”jmeno”>Jméno:</label>
<input type=”text” id=”jmeno” value=”" onkeyup=”ziskejjmeno()” />
<br/>
<br/>
<div id=”cilovyDiv”></div>

Jak vidíte vytvoření formuláře bylo skutečně jednoduchou prací. Samozřejmě jako vše, dal by se i tento formulář vylepšovat, někteří z vás mohou namítnout, že chybí vytvoření tagu form a method=”post”, to ale nyní není potřeba, skript funguje i bez něj. Patřičný ajax totiž bude proveden metodou post, tudíž post metoda bude skutečně zachována.

Proč jsme jsme reakci na ajax vyvolali metodou onkeyup? Metoda onkeyup způsobí, že při každém stisku klávesy v patřičném políčku dojde k vyvolání ajaxové funkce.

Následně naprogramujeme AJAX v souboru ajax.js:

function ziskejjmeno() {

var XMLHttpRequestObjekt = false;if (window.XMLHttpRequest) {
XMLHttpRequestObjekt = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObjekt = new ActiveXObject(”Microsoft.XMLHTTP”);
}

//————————————————

var input=document.getElementById(”jmeno”);
var cilovyDiv = document.getElementById(”cilovyDiv”);
if(XMLHttpRequestObjekt) {
XMLHttpRequestObjekt.open(”POST”,”zpracuj.php”, true);
XMLHttpRequestObjekt.setRequestHeader(’Content-Type’,
‘application/x-www-form-urlencoded’);

XMLHttpRequestObjekt.onreadystatechange = function()
{
if (XMLHttpRequestObjekt.readyState == 4 && XMLHttpRequestObjekt.status == 200) {
var obsah=XMLHttpRequestObjekt.responseText;if(obsah.responseText == “ne”){
cilovyDiv.innerHTML = “<div>ZMENTE JMÉNO.</div>”;}
if(obsah.responseText == “ano”){
cilovyDiv.innerHTML = “<div>VOLNÉ.</div>”;}}}
XMLHttpRequestObjekt.send(”jmeno=”+input.value);}}

Popis jednotlivých částí ajaxového dotazu metodou post je shodný s metodou get, která je popsána v článku: Popis ajaxu s metodou Get .

Akorát v metodě Post je navíc XMLHttpRequestObjekt.setRequestHeader(’Content-Type’,
‘application/x-www-form-urlencoded’); - tedy uvádíme jaká data chceme v hlavičce posílat. A metoda send obsahuje věci, které chceme posílat.

Vytvoříme soubor zpracuj.php, který je další součástí jádra naší aplikace:

<?php

if($_REQUEST["jmeno"]){

@$napoj_db=mysql_connect(”localhost”,”pokus”,”pokus”);

@$vyber_db=mysql_select_db(”jmena”,$napoj_db);

//————

if($napoj_db && $vyber_db){

$prom=$_REQUEST["jmeno"]; $dotaz=mysql_query(”SELECT * FROM jmena WHERE jmeno=’$prom’”,$napoj_db); $pocet=mysql_num_rows($dotaz);

if($pocet>0){echo “ne”;}
elseif($pocet==0){echo “ano”;}

}

Popis činnosti PHP skriptu zpracuj.php je následující při každém stisknutí klávesy dojde ke spojení s databází, tam dojde k vyhledání jména podle zadaného jména do textového políčka a podle počtu výskytů v databázové tabulce se vypíše ne, pokud jméno je obsaženo v databázové tabulce a ano pokud je tomu naopak.

Tímto posledním souborem zpracuj.php jsme dovršili naše snažení. Nyní by náš skript měl fungovat. Co se týče souboru zpracuj.php, tak má samozřejmě některé nedostatky, a to zejména není nějak bezpečnostně podchycena záležitost Requestu jmeno, napojení a vůbec celé řešení se mohlo vést objektovou cestou a výhodné by bylo celý skript vložit do nějaké funkce, nejsou zde také ošetřené některé možné chybové stavy. Toto vše jsem neudělal proto, aby byl php skript co nejvíce pochopitelný i bez objektového programování v PHP a jednoduchý. Šlo mi o to ukázat hlavně princip jednoho z možných způsobů řešení problému kontroly jména ve formuláři bez odesílání.

12. 7. 2009 | gisat_cz | 3

AJAX - automatické dokončování 1

AJAX je staronovou technologií nabízející doposud nevídané možnosti. Jednou z nich je funkce automatického dokončování. Co to vlastně automatické dokončování je?

Představte si, že budete chtít vyhledat nějaké město, zadáte pouze část názvu města a vyskočí vám tabulka s názvy všech měst začínajících na vámi napsaný text. Vy se pak jen přemístníte kurzorem myši nad název Vašeho města a volba je hotova. Jak jednoduché že? Bez možnosti asynchronního volání, které AJAX dovoluje by se takováto web aplikace dala jen stěží naprogramovat. S automatickým dokončováním jste jistě v každodenním styku.

Pokud budete například vyhledávat jakékoli informace pomocí vyhledávače GOOGLE, pokaždé když napíšete Váš dotaz, vyletí pod dotazem tabulka s možnostmi a počtem výskytů v googlovské databázi. Přesně takovéto dokončování může být provedeno pomocí AJAXu.

POPIS PROJEKTU:

Naším úkolem bude naprogramovat miniweb aplikaci umožňující automatické dokončování při hledání názvů měst. Co k tomuto projektu budeme potřebovat:

databázi MySQL
základní znalosti PHP, HTML, Javascriptu a MySQL
základní znalosti techniky AJAXu

Pokud používáte operační systém Windows tal si můžete stáhnout produkt XAMPP SERVER, ve kterém máte již v základu uveden Apache server, PHP a MySQL - můřete si jej stáhnout zde:

První s čím začneme je založení příslušné databáze a její naplnění jmény měst.

ZALOŽENÍ DATABÁZE A JEJÍ NAPLNĚNÍ DATY

Zapneme si databázi MySQL, phpMyAdmin a zároveň také server Apache. Zde budu také předpokládat základní znalosti práce s phpMyAdmin. Vývoj této miniaplikace jsem prováděl na PHP 5.2.9, Apache 2.2.11,MySQL 5.1.33,phpMyAdmin 3.1.3.1.

Přejdeme do PHPMyAdminu a tam si vytvoříme databázi, která se bude jmenovat Mesta. Popřípadě v MySQL můžete po úspěšném přihlášení zadat toto:

CREATE DATABASE “Mesta” DEFAULT CHARACTER SET utf8 COLLATE utf8_bin;

Vytvoříme tabulku s názvem mesta:

CREATE TABLE “mesta”.”vyber_mest” (”cislo” INT( 255 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,“mesto” VARCHAR( 255 ) NOT NULL ) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_bin;

Naplníme tabulku daty:

INSERT INTO “vyber_mest“ (“cislo“, “mesto“) VALUES
(1, “Benešov nad Ploučnicí“),
(2, “Bílina“),
(3, “Česká Kamenice“),
(4, “Děčín“),
(5, “Duchcov“),
(6, “Chomutov“),
(7, “Jirkov“),
(8, “Kadaň“),
(9, “Klášterec nad Ohří“),
(10, “Krupka“),
(11, “Libochovice“),
(12, “Libouchec“),
(13, “Litoměřice“),
(14, “Litvínov“),
(15, “Louny“),
(16, “Lovosice“),
(17, “Lovosice“),
(18, “Most“),
(19, “Podbořany“),
(20, “Postoloprty“),
(21, “Posetice“),
(22, “Šluknov“),
(23, “Štětí“),
(24, “Ústí nad Labem“),
(25, “Cvikov“),
(26, “Cvikonice“);

Tímto jsme si vytvořili databázový podklad naší miniaplikace.

VYTVOŘENÍ SOUBORŮ

Nyní si vytvoříme potřebné soubory nutné pro chod.

Vytvoříme celkem 3 soubory:

hlavni.php - zde bude hlavní formulář, ve kterém bude doplňování
Javascript.js - zde bude javascriptový a ajaxový kód
zpracuj.php - zde je kód, který vytvoří podklady pro AJAX

Protože je téma automatického dokončování trošku rozsáhlejší, je rozfšleno na několik částí. Pokračovat tak budeme o něco později.

10. 7. 2009 | gisat_cz | 1

Vytvoření jednoduché aplikace v AJAXu

Jelikož je Ajax v současné době velmi kvitovaným tématem. Rozhodl jsem se nastínit problematiku vytvoření jednoduché webové aplikace v ajaxu.

První co musíme udělat pro náš demonstrativní příklad je vytovřit si stránku ve formátu HTML či XHTML v nějakém editoru. Těch je celá řada, od placených po programy úplně zdarma, viz. PSPAD a další.

Dále je třeba vytovřit textový soubor, který se bude jmenovat například data.txt, a umístíme ho pro naše pohodlí do stejné složky jako naši internetovou stránku, kterou můžeme nazvat priklad.html. V souboru data.txt napíšeme např. tuto větu: TOTO VYTVOŘIL AJAX.

Úkol naší “miniaplikace ” bude velmi jednoduchý. Po stisku tlačítka dojde ke zobrazení textu ze souboru aniž by došlo ke znovunačtení stránky.

Pomocí Ajaxu můžeme vkládat informace do jakéhokoli místa na webové stránce. Toto můžeme učinit například tak, že použijeme některou z vestavěných funkcí javascriptu.

Jsou to například tyto konstrukce:

getElementByiD()

getElementsByTagName()

a dále v kódu stránky uvedeme do místa kam chceme vložit výsledný objekt buď id nebo položku name:

např:

<p id=”moje_id”>tag p</p>
<p name=”jmeno”>tag p</p>

Nejčastěji se používají tagy div a tagy span.

—————————————————————-

Stránka “priklad.html” bude obsahovat tyto prvky:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Příklad ajaxu</title>
<script language=”javascript”>

function zobrazZpravu(zdroj,cil){

}
</script>
</head>
<body>
<H1>PRVNÍ PŘÍKLAD JAVASCRIPTU</H1>
<form>
<input type=”button” value=”ZOBRAZ TEXT”/>
</form>
<div id=”cilovydiv”><p>TADY SE ZOBRAZÍ TEXT</p></div>
</body>
</html>

————————————————————————-

Výše uvedený kód ukazuje vytvořenou stránku, do které postupně budeme vkládat náš kód pro ajax. Stránka ,jak vidíte, obsahuje jednoduché tlačítko a kontejnerový prvek div s předem stanoveným id. Pokud nejste zcela zběhlí ve vytváření webových stránek můžete navštívit internetové zdroje např. na: INFORMACE O HTML.

Postupně budeme doplňovat kód na stránce hlavně kód v položce <script>.

Začínáme programovat AJAX v tagu <script></script>:

Měli bychom nejprve vytvořit proměnnou na které budeme zjišťovat existenci objektu XMLHttpRequst, o kterém si povíme dále. Prvotně proměnnou nastavíme na hodnotu false:

var objekt=false

Zjistíme zda je možné vytvořit základní pilířový prvek AJAXU, a když ano tak vytvoříme objekt:

pro prohlížeče Mozzilu, netscape a další vytvoříme toto:

if(window.XMLHttpRequest){objekt=new XMLHttpRequest();}

pro prohlížeč Internet explorer vytvoříme toto:

else if(window.ActiveXObject){

try{objekt=new ActiveXObject(”Msxml2.XMLHTTP”);}

catch(error){objekt=newActiveXObject(”Microsoft.XMLHTTP”);}

Zjistíme zda proměnná “objekt” obsahuje námi vytvořený objekt či je prázdný, jestliže obsahuje objekt tak sáhneme k načtení potřebného dokumentu a poté voláme vlastnost onreadystatechange, která nám vytvoří jakousi callback funkci, tedy funkci která nám zajistí ten asynchronní průběh(průběh na pozadí). Načítání dokumentu můžeme použít nám známé prvky buď GET nebo POST, my použijeme GET:

objekt.open(”GET”,zdroj); objekt.onreadystatechange=function{ }

Do těla anonymní funkce vložíme toto:

if(objekt.readyState==4 && objektstatus==200){

document.getElementById(cil).innerHTML=objekt.responseText;}

Ihned za anonymní funkcí function(), pošleme požadavek, a jelikož jsme použili ve vlastnosti open metodu GET tak do metody send vložíme hodnotu null, protože veškeré proměnné se předávají v metodě GET v URL :

objekt.send(null);

A daný skript je hotový a plně funkční.

Ještě bych chtěl upozornit na metody readyState. Je to metoda která specifikuje stav požadavku, má následující hodnoty:

0 neinicializováno
1 načítá se
2 načteno
3 interaktivní
4 hotovo

Metoda status obsahuje stavový kód HTTP požadavku:

200 OK
201 VYTVÁŘÍ SE
400 ŠPATNÝ DOTAZ
404 NENALEZENO
500 INTERNÍ CHYBA

Takže výraz if(objekt.readyState==4 && objektstatus==200) znamená jestliže je dotaz hotov a průběh HTTP požadavku proběhl v pořádku, něco dělej…….

Kód document.getElementById(cil).innerHTML=objekt.responseText načte do objektu nalezený text. Pokud výsledkem hledání je text tak do objektu “objekt” vkládáme text pomocí responseText, kdybychom do dokumentu vkládali XML dokument psali bychom responseXML .

Výsledný kód stránky bude vypadat takto:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>PRVNÍ PŘÍKLAD JAVASCRIPTU</title>
<script language=”javascript”>
function zobrazZpravu(zdroj,cil){
var objekt=false;
if(window.XMLHttpRequest){objekt=new XMLHttpRequest();}
else if (window.ActiveXObject) {
try {
objekt = new ActiveXObject(”Msxml2.XMLHTTP”);
} catch (eror) {
objekt = new ActiveXObject(”Microsoft.XMLHTTP”);}}
if(objekt){
objekt.open(”GET”,zdroj);
objekt.onreadystatechange=function(){
if(objekt.readyState==4 && objekt.status==200){
document.getElementById(cil).innerHTML=objekt.responseText;}}
objekt.send(null);}}
</script>
</head>

<body>
<H1>PRVNÍ PŘÍKLAD JAVASCRIPTU</H1>
<form>
<input type=”button” onclick=”zobrazZpravu(’data.txt’,'cilovydiv’)” value=”ZOBRAZ TEXT”/>
</form>
<div id=”cilovydiv” class=”pop”><p>TADY SE ZOBRAZÍ TEXT</p></div>
</body>
</html>
————————————————————-

9. 7. 2009 | gisat_cz | 0

O programování a všem okolo

Archiv rubriky „AJAX“

AJAX - automatické dokončování 4

AJAX - automatické dokončování 3

AJAX - automatické dokončování 2

TVORBA HLAVNÍHO SOUBORU:

VYTVOŘÍME AJAXOVÝ SOUBOR ajax.js:

Vytváříme anketu

VYTVOŘÍME OBRÁZKOVÝ PODKLAD NAŠEHO ANKETNÍHO GRAFU:

VYTVOŘÍME DATABÁZI:

VYTVOŘÍME SI HLAVNÍ STRÁNKU, NA KTERÉ BUDE ANKETA:

VYTVOŘÍME ONEN JAVASCRIPTOVÝ SOUBOR anketa.js:

VYTVOŘÍME SOUBOR anketka.php:

Tvorba souboru db.php:

AJAX - jednoduchá kontrola jména ve formuláři

Začněme tedy s tím hlavním, a to s tvorbou příslušného formuláře:

Následně naprogramujeme AJAX v souboru ajax.js:

Vytvoříme soubor zpracuj.php, který je další součástí jádra naší aplikace:

AJAX - automatické dokončování 1

POPIS PROJEKTU:

ZALOŽENÍ DATABÁZE A JEJÍ NAPLNĚNÍ DATY

VYTVOŘENÍ SOUBORŮ

Vytvoření jednoduché aplikace v AJAXu

Aktuální články a bleskovky

Archivy

Rubriky

Spřátelené blogy

Twitter

Administrace

Časopis Computer

Video Živě