PDA

View Full Version : JavaScript: How to load external text database to webpage at regular interval?


alex298
July 24th, 2008, 11:52 PM
Hello,

I have a webpage (tips.htm) that will show "tips to-day". There are basically three pages:
---------------------------
1. tips.html
2. tip.php
3. tip_database.txt (has both Chinese and English Characters)
-----------------------

How it works:
The tips that show in tips.html are loaded from tip_database.txt

What I wish?
I wish the tips showing in tips.html refresh every 10 seconds. Therefore my visitors can see a new tip loading from tip_database.txt in every 10 seconds.

How can I do that?

Here's the contents of the three files. Actually I obtained the Javascript on the Internet long time ago.

MAIN FILE: tips.html



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Tips Today</title>
<script type="text/javascript">
<!--
var index = 0;
var text_list = [];
var file_name = "tip.php?lang=chi";
function init()
{
if (!xmlHttp)return;
xmlHttp.open("POST",file_name,true);
xmlHttp.onreadystatechange=loadFile;
xmlHttp.send("");
}
function loadFile()
{
if (xmlHttp.readyState == 4) {
text_list = xmlHttp.responseText.split(
/(?:[\r\s]*\n[\r\s]*){2,}/g ), len = text_list.length;
index = Math.floor(Math.random() * len);
xmlHttp = null;
showMessage();
}
}
function showMessage()
{
var content = document.getElementById("content");
if (!content) {
window.setTimeout(showMessage, 100);
} else {
content.innerHTML = encodeHTML(text_list[index]);
}
}
function encodeHTML(str)
{
return new String(str).replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/&/g, '&amp;').replace(/\n/g, '<br />');
}
//-->
</script>
<script type="text/javascript">
<!--
xmlHttp=XMLHttp();
function XMLHttp()
{
try {
if (window.XMLHttpRequest) {
var req = new XMLHttpRequest();
if (req.readyState == null) {
req.readyState = 1;
req.addEventListener("load", function () {
req.readyState = 4;
if (typeof req.onreadystatechange == "function") req.onreadystatechange();
}, false);
}
return req;
} else if (window.ActiveXObject) {
return new ActiveXObject(getControlPrefix()+".XmlHttp")
}
} catch ( ex ) {}
}
function getControlPrefix()
{
if (getControlPrefix.prefix) return getControlPrefix.prefix;
var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"], o, o2;
for (var i = 0; i < prefixes.length; i++) {
try {
o = new ActiveXObject(prefixes[i] + ".XmlHttp");
o2 = new ActiveXObject(prefixes[i] + ".XmlDom");
return getControlPrefix.prefix = prefixes[i];
} catch (ex) {};
}
throw new Error("Could not find an installed XML parser");
}
init();
//-->
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0" class="td01 style1">
<tr>
<td valign="top">
<div align="center" class="content" id="content" style="font-style:normal; font-variant:normal; font-weight:normal; font-size:14px; font-family:Arial, Helvetica, sans-serif; width:382; height:59">
<b>text Appear Here</b>
</div>
</td>

</tr>

</table>
</body>
</html>




FILE: tip.php



<?
header('Content-Type: text/html; charset=utf-8');
include('tip_database.txt');
?>



FILE: tip_database.txt



Tips 1: xxxxxxxxxxxxxxxxxxxxxxx

Tips 2: xxxxxxxxxxxxxxxxxxxxxxxx

........ More tips here ..............




Please help.

Thanks and best regards

Alex
jwilliam
July 25th, 2008, 08:59 AM
It looks like you're almost there. I didn't test your code, but it looks like you need to modify your PHP script a little and then get your Javascript code executing once every few seconds.

In your PHP, you probably don't want to include the entire 'tip_database.txt' file every time because you'll just display all of your tips every time it is called... Did you want the tip displayed on the page to be random? If so, you could do something like this:



$lines = file('tip_database.txt');
$line = rand(0, count($lines) - 1);
echo $lines[$line];


This assumes that you have 1 tip per line in your text file. Your Javascript will try to load a tip every time you call init(), so you should set it up so that init() is being called every so often like so:



window.onload = function()
{
var link = setInterval(init, 10000);
}


This will make init() run every ten seconds (the number 10000 is the number of miliseconds between function calls). Of course, I made some assumptions about what you're looking for, so let me know if I'm wrong about your intentions.