Using Ajax to get Stock Quotes

This short tutorial shows how to access Stock Quotes from Yahoo Finance through an AJAX call utilizing JSONP. For the tutorial the following information is required.

JQuery – Javascript library with built in AJAX and JSONP functions

Step 1: Create a sample html page that includes the JQuery library

<!DOCTYPE HTML PUBLIC
   "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"/>
  </head>
  <body>
    <div id="quote">

    </div>
  </body>
</html>

Step 2: Create the table that will hold the stock information returned by the AJAX call

<table cellspacing="0" cellpadding="3" border="1">
  <tr>
    <th>Symbol</th>
    <th>Last Trade</th>
    <th>Last Trade Time</th>
    <th>Change</th>
    <th>Open</th>
    <th>Previous Close</th>
    <th>Day's Low</th>
    <th>Day's High</th>
    <th>Volume</th>
  </tr>
  <tr>
    <td id="symbol"></td>
    <td id="lastTrade"></td>
    <td id="lastTradeTime"></td>
    <td id="change"></td>
    <td id="open"></td>
    <td id="previousClose"></td>
    <td id="daysLow"></td>
    <td id="daysHigh"></td>
    <td id="volume"></td>
  </tr>
</table>

Step 3: Define the JQuery JavaScript code that will call make an AJAX call for the specified stock information

Create the document ready function so the JavaScript is not called until the page is loaded.
```
$(document).ready(function(){
});
```

perform the AJAX call for JSONP data using the getJSON function of JQuery

$.getJSON(
  "http://mdbitz.com/testing/PHPYahooFinance/finance.php?symbol=DELL&callback=?",
  function( data ) {
  }
);

Output the returned data to the appropriate cells of the Table.

$("#symbol").text( data.symbol );
$("#previousClose" ).text( data.previousClose );
$("#open" ).text( data.open );
$("#lastTrade").text( data.lastTrade );
$("#lastTradeTime").text( data.lastTradeTime );
$("#change").text( data.change );
$("#daysLow").text( data.daysLow );
$("#daysHigh").text( data.daysHigh );
$("#volume").text( data.volume);

Step 4: View your sample page

Symbol	Last Trade	Last Trade Time	Change	Open	Previous Close	Day’s Low	Day’s High	Volume
DELL	16.13	10.19AM	+0.31	15.77	15.82	15.75	16.20	7162443

Full Sample HTML Source

<!DOCTYPE HTML PUBLIC
  "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
      $(document).ready(function(){
        $.getJSON("http://mdbitz.com/testing/PHPYahooFinance/finance.php?symbol=DELL&callback=?",
          function(data){
            $("#symbol").text( data.symbol );
            $("#previousClose" ).text( data.previousClose );
            $("#open" ).text( data.open );
            $("#lastTrade").text( data.lastTrade );
            $("#lastTradeTime").text( data.lastTradeTime );
            $("#change").text( data.change );
            $("#daysLow").text( data.daysLow );
            $("#daysHigh").text( data.daysHigh );
            $("#volume").text( data.volume);
          }
        );
     });
     </script>
  </head>
  <body>
    <div id="quote">
      <table cellspacing="0" cellpadding="3" border="1">
        <tr>
          <th>Symbol</th>
          <th>Last Trade</th>
          <th>Last Trade Time</th>
          <th>Change</th>
          <th>Open</th>
          <th>Previous Close</th>
          <th>Day's Low</th>
          <th>Day's High</th>
          <th>Volume</th>
        </tr>
        <tr>
          <td id="symbol"></td>
          <td id="lastTrade"></td>
          <td id="lastTradeTime"></td>
          <td id="change"></td>
          <td id="open"></td>
          <td id="previousClose"></td>
          <td id="daysLow"></td>
          <td id="daysHigh"></td>
          <td id="volume"></td>
        </tr>
      </table>
    </div>
  </body>
</html>

Comments & Questions

Anith // February 28, 2012

Can I include all the data thats shown on yahoo finance page?if yes where can I do it?Thanks in advance

{ REPLY }
FR // July 2, 2011

You said yahoo finance but I see mdbitz.com. Is it possible to get data from yahoo finance with this script?
1. Matthew Denton // July 2, 2011
  
  The stock quotes are being pulled from Amazon. If you look at the other pages you will notice that the YFaPi PHP library is setup at the url http://mdbitz.com/testing/PHPYahooFinance/finance.php. This is an example of how to use Ajax to get the latest stock quotes on page load from a similar setup that you can do on your own server.
  1. FR // July 3, 2011
    
    Ohh I see. Thank you for explaining. 🙂
{ REPLY }
Tony // December 4, 2010

Great example.

How could I pass a value from a user to get results from other stocks besides DELL?

Sorry for the silly question.

{ REPLY }
raafatrola // October 7, 2010

that’s wonderful, but could you suggest related to google finance ?
1. Matthew Denton // October 17, 2010
  
  Sorry, I have not had any experience with Google Financy, however you may want to look into the Google finance data api.
{ REPLY }

Your Move.