Creating the Front End of a Headlines System with AJAX - Listing the full client side source code
(Page 5 of 5 )
Like I said before, here is the full client-side code that corresponds to the AJAX-based headlines application. I called the file "ajax_headline_viewer.htm" and its definition is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>AJAX-BASED NEWS SYSTEM</title>
<script language="javascript">
// initialize data arrays and index
var images=new Array();
var urls=new Array();
var texts=new Array();
var index=0;
// send http requests
function sendHttpRequest(url,callbackFunc,respXml){
var xmlobj=null;
try{
xmlobj=new XMLHttpRequest();
}
catch(e){
try{
xmlobj=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
alert('AJAX is not supported by your browser!');
return false;
}
}
xmlobj.onreadystatechange=function(){
if(xmlobj.readyState==4){
if(xmlobj.status==200){
respXml?eval
(callbackFunc+'(xmlobj.responseXML)'):eval
(callbackFunc+'(xmlobj.responseText)');
}
}
}
// open socket connection
xmlobj.open('GET',url,true);
// send http header
xmlobj.setRequestHeader('Content-Type','text/xml;
charset=UTF-8');
// send http request
xmlobj.send(null);
}
// store headlines
function storeHeadlines(headlines){
var headlines=headlines.getElementsByTagName
('headline');
// save headlines to data arrays
for(var i=0;i<headlines.length;i++){
images[i]=headlines
[i].getElementsByTagName('image')[0].
firstChild.nodeValue;
urls[i]=headlines[i].getElementsByTagName
('url')[0].firstChild.nodeValue;
texts[i]=headlines
[i].getElementsByTagName('text')[0].firstChild.nodeValue;
}
// display first headline
displayHeadline();
}
// display headline
function displayHeadline(){
var headcont=document.getElementById
('headlinescontainer');
if(!headcont){return};
// clean up headlines container
headcont.innerHTML='';
// create <img> element
var img=document.createElement('img');
img.setAttribute('src',images[index]);
// create <a> element
var a=document.createElement('a');
a.setAttribute('href',urls[index]);
a.setAttribute('title','Click here to read the full
article');
p=document.createElement('p');
a.appendChild(p);
p.appendChild(document.createTextNode(texts[index]));
// append elements to headlines container
headcont.appendChild(a);
headcont.appendChild(img);
}
// initialize navigation panel
function initializeNavigationPanel(){
// attach 'displayHeadline()' function to left
button
document.getElementsByTagName('img')[0].onclick=function(){
index--;
if(index<0){index=0};
displayHeadline();
}
document.getElementsByTagName('img')
[1].onclick=function(){
index++;
if(index>urls.length-1)
{index=urls.length-1};
displayHeadline();
}
}
window.onload=function(){
if(document.getElementById&&document.
getElementsByTagName&&document.createElement){
// initialize navigation panel
initializeNavigationPanel();
// load headlines
sendHttpRequest('headlines.xml','storeHeadlines',true);
}
}
</script>
<style type="text/css">
body{
margin: 0;
padding: 0;
background: #fff;
}
p{
text-align: center;
font: bold 24px Arial, Helvetica, sans-serif;
color: #000;
}
p{
font: bold 18px Arial, Helvetica, sans-serif;
color: #009;
text-decoration: none;
}
#headlinescontainer{
text-align: center;
width: 400px;
height: 300px;
margin-left: auto;
margin-right: auto;
background: #eee url(bg1.jpg) top center repeat-x;
border: 1px solid #000;
}
#headlinescontainer img{
border: 1px solid #666;
}
#controlpanel{
text-align: center;
width: 400px;
height: 30px;
padding: 5px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<p>AJAX-BASED NEWS SYSTEM</p>
<div id="headlinescontainer"></div>
<div id="controlpanel">
<img src="backbtn.gif" width="50" height="20" />
<img src="forwardbtn.gif" width="50" height="20" />
</div>
</body>
</html>
After studying the full client-side code of this AJAX-driven headlines application, you can download the ZIP file that I mentioned before (it's the same one that is linked to at the beginning of this article) to test the program and introduce your own changes. I hope you have a good time doing it!
To wrap up
Over the course of this first part of the series, I walked you through the development of a small application which uses AJAX as the workhorse for displaying dynamic headlines on a web page, previously fetched from a simple XML file.
Speaking of that, this file in question remains undefined as of yet. Therefore, in the second (and last) article, I'll teach you how to create it, in such a way that it can be used for storing the texts, links and images that correspond to each of the respective headlines. Sounds really interesting, right? You won't want to miss it!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
