Si pentru ca tot am vorbit de pagini web interactive contruite cu AJAX, DOM si Javascript sa vedem si o aplicatie practica la aceste tehnologii. Ca exemplu o sa folosesc tema de casa 3, care consta dintr-un calendar care afiseaza colorat fiecare zi in care a fost postat un aricol pe acest blog. Un click pe acea data va va trimitie chiar la pagina cu articolul respectiv. Pentru a putea rula aceste scripturi este nevoie de un server web care sa ruleze php, si de Yahoo User Interface Librari (YUI) care poate fi downloadat de aici

calendar.html:

<>
<>
< equiv="Content-Type" content="text/html; charset=ISO-8859-1">
< type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
< /style>
< rel="stylesheet" type="text/css" href="build/fonts/fonts-min.css">
< type="text/css" rel="stylesheet" href="build/calendar/assets/skins/sam/calendar.css">
< type="text/javascript" src="build/yahoo-dom-event/yahoo-dom-event.js">< /script>
< type="text/javascript" src="build/calendar/calendar.js">< /script>
< type="text/javascript" src="getDates.js">< /script>
< /head>
< class="yui-skin-sam" onload="getDates()">

< id="cal1Container">< /div>

< /body>
< /html>

getDates.js:

var dates;
var xmlHttp;
var calendar;


function createXMLHttp()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
return xmlHttp;
}

function getDates()
{
xmlHttp = createXMLHttp();
if (xmlHttp.readyState==4 xmlHttp.readyState==0)
{

var connString="http://localhost/getDates.php";
xmlHttp.onreadystatechange=readDates;

xmlHttp.open("GET",connString,true);

xmlHttp.send(null);

}
}

function readDates()
{
if (xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
var response = xmlHttp.responseXML;
//alert("avem raspuns!zzz");
dates = response.getElementsByTagName("Date");
var i;
/*
for(i = 0; i < calendar =" new" i =" 0;" selected =" args[0];" i =" 0;" nodevalue ="=" xmlhttp =" createXMLHttp();" readystate="=" readystate="=" connstring="http://localhost/getUrl.php?date=" onreadystatechange="openDocument;" readystate ="=" status ="=" response =" xmlHttp.responseXML;" url =" response.getElementsByTagName(" i =" 0;" dom="new">load('http://interfeteevoluate.blogspot.com/feeds/posts/default',LIBXML_DTDLOAD);
$entries = $dom->getElementsByTagName('entry');

createLinkDocument($entries);


function createLinkDocument($entries)
{
$db = new DOMDocument('1.0', 'iso-8859-1');
$root = $db->createElement('root');
$db->appendChild($root);


foreach($entries as $entry)
{
$date = date_parse($entry->getElementsByTagName('published')->item(0)->nodeValue);
#print $date->item(0)->nodeValue . "\n";
#print_r(date_parse($date->item(0)->nodeValue));
$links = $entry->getElementsByTagName('link');
foreach($links as $link)
{
if(strcmp($link->getAttribute('rel'), 'alternate') == 0)
{
$url = $link->getAttribute('href');
#print $url . "\n";
}
}

$dbEntry = $db->createElement('entry');
$root->appendChild($dbEntry);
$dbEntryDate = $db->createElement('Date', $date['month'].'/'.$date['day'].'/'.$date['year']);
$dbEntry->appendChild($dbEntryDate);
$dbEntryURL = $db->createElement('URL', $url);
$dbEntry->appendChild($dbEntryURL);
}

$db->save("db.xml");
}

?>

getDates.php, folosit la incarcarea paginii pentru a determina zilele in care s-au postat articole:

< ?php $dom=new DOMDocument(); $dom->load('db.xml',LIBXML_DTDLOAD);
$entries = $dom->getElementsByTagName('entry');
$result = createDateDocument($entries);

header('Content-Type: text/xml');
echo $result->saveXML();

function createDateDocument($entries)
{
$db = new DOMDocument('1.0', 'iso-8859-1');
$root = $db->createElement('root');
$db->appendChild($root);
$lastDate = '';

foreach($entries as $entry)
{
$date = $entry->getElementsByTagName('Date')->item(0)->nodeValue;
if(strcmp($date, $lastDate) != 0)
{
$dbEntryDate = $db->createElement('Date', $date);
$root->appendChild($dbEntryDate);
$lastDate = $date;
}
}

return $db;
}
?>

getUrl.php, folosit pentru a afla link-ul catre ultimul articol postat in ziua selectata:

< ?php $dom=new DOMDocument(); $dom->load('db.xml',LIBXML_DTDLOAD);
$entries = $dom->getElementsByTagName('entry');
$date = $_GET['date'];
#$date='12/9/2007';
$result = createDateDocument($entries, $date);

header('Content-Type: text/xml');
echo $result->saveXML();

function createDateDocument($entries, $searchDate)
{
$db = new DOMDocument('1.0', 'iso-8859-1');
$root = $db->createElement('root');
$db->appendChild($root);

foreach($entries as $entry)
{
$date = $entry->getElementsByTagName('Date')->item(0)->nodeValue;
$url = $entry->getElementsByTagName('URL')->item(0)->nodeValue;
if(strcmp($date, $searchDate) == 0)
{
$dbEntryDate = $db->createElement('URL', $url);
$root->appendChild($dbEntryDate);
$lastDate = $date;
}
}

return $db;
}
?>