This is a new source code section so we thought what could we have as a useful first example using Ajax, PHP and a bit of JavaScript. A stock ticker example. Lets go
Part 1 : Is the form itself.
<html>
<head>
<script type=”text/javascript” src=”getstock.js”></script>
</head>
<body>
<form>
Enter your stock ticker symbol:
<input type=”text” id=”txt1″ size=”30″ onkeyup=”showQuote(this.value)”>
</form><p>
<div id=”stockOutput”>
<b>
</b>
</div>
</p>
</body>
</html>
Part 2 : This is the all important Javascript, in this example it is calles getstock.js
var xmlHttp;
function showQuote(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert (”Browser does not support HTTP Request”);
return;
}
var url=”getstock.php”;
url=url+”?q=”+str;
url=url+”&sid=”+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open(”GET”,url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState==”complete”)
{
document.getElementById(”stockOutput”)
.innerHTML=xmlHttp.responseText;
}
}function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(”Msxml2.XMLHTTP”);
}
catch (e)
{
xmlHttp=new ActiveXObject(”Microsoft.XMLHTTP”);
}
}
return xmlHttp;
}
Part 3 : The bit were interested in, the PHP code again this is called getstock.php
<?php
//get the q parameter from URL
$q=$_GET["q"];//find out which feed was selected
$fp = fopen (”http://finance.yahoo.com/d/quotes.csv?s=$q&f=sl1d1t1c1ohgv&e=.csv”,”r“);
$data = fgetcsv ($fp, 1000, “,”)
?>
<!– this is our table which displays the stock info –>
<!– we access the individual items by using $data[0]–>
<html>
<head>
</head>
<body>
<table>
<tr><td>description</td><td>latest figure</td><tr>
<tr><td>symbol</td><td><?php echo $data[0] ?></td></tr>
<tr><td>last price</td><td><?php echo $data[1] ?></td></tr>
<tr><td>date</td><td><?php echo $data[2] ?></td></tr>
<tr><td>time</td><td><?php echo $data[3] ?></td></tr>
<tr><td>change</td><td><?php echo $data[4] ?></td></tr>
<tr><td>open</td><td><?php echo $data[5] ?></td></tr>
<tr><td>high</td><td><?php echo $data[6] ?></td></tr>
<tr><td>low</td><td><?php echo $data[7] ?></td></tr>
<tr><td>volume</td><td><?php echo $data[8] ?></td></tr>
</table>
<?php
//close the filehandle $fp
fclose ($fp);
?>
Want to see what it looks like, visit the link and start typing a ticker symbol (MSFT, GOOG are a 2 examples)
http://www.getphp.net/ajaxexamples/stock/stockform.php
Note if you use this add in a credit to Yahoo for kindly supplying the data.
P.S
We’ll discuss how this all works at a later date
