Oct
09

Obtaining Stock Information: Utilizing AJAX, JSONP, and the YahooFinanceAPI library.

MDBitz - Matthew Denton Javascript, PHP Add you comment

This short tutorial shows how to access Stock Information 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
  • YahooFinanceAPI - PHP library that utilizes Yahoo Finance to return stock information from an underlying call to download.finance.yahoo.com/d/qutoes.csv – Please note that you can utilize this library to create your own web page that will return various stock information. For the purpose of the example we will be accessing a url on my server to showcase the cross domain capability.

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

  1. Create the document ready function so the JavaScript is not called until the page is loaded. 
    $(document).ready(function(){
});
  2. perform the AJAX call for JSONP data using the getJSON function of JQuery 
    $.getJSON(
  "http://mdbitz.com/testing/PHPYahooFinance/finance.php?symbol=DELL&amp;callback=?",
  function( data ) {
  }
);
  3. 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>
, , , ,
Oct
09

JSON and JSONP: An Introduction to Javascript Data Interchange

MDBitz - Matthew Denton Javascript Add you comment

JavaScript Object Notation or JSON for short is a data interchange format commonly used in AJAX Web Applications. The format is human readable and can represent simple data structures and Objects by use of associative arrays.

Syntax Formatting

The JSON format is lightweight in that the properties of the JSON Data Object are encoded by  curly braces. And the properties of the object are represented by key-value pairs delimited by the colon character and separated by a comma. In addition to an array value is defined by square brackets that can contain objects or values. Using these basic building blocks you are able to represent complex data.

Basic Examples

Example 1: Stock Information

{
    "symbol":"DELL",
    "open":"14.23",
    "lastTrade":"13:85"
}

Example 2: A Book Object with title, isbn, and author(s)

{
    "title": "First Lord's Fury",
    "isbn": "102304312",
    "authors": [
                 { "fullName": "Jim Butcher", 
                   "lastName":"Butcher", 
                   "firstName":"Jim" 
                 }
               ]
}

JSONP for cross Domain JSON Data

JavaScript Object Notation with Padding (JSONP) is a method that a server can implement for allowing other sites to access and utilized data from your server. Do to browser security it is not possible to access JSON data directly from a remove server. JSONP resolves this issue by allowing the caller to pass in a callback function that the JSON data gets wrapped in so that the data is executed by your defined function. The really nice element of this is that JQUERY and other JS libraries already contain AJAX support for you to easily create these calls.

JSONP server response format

For JSONP to function the server must except a parameter to be used as the callback function in addition to any data it needs to obtain the requested information.

http://www.example.com/?callback=XYZ

What the server needs to do is take the callback parameter and wrap the json data in a call to the callback function as:

XYZ( JSON-DATA )

That is all there is to it.

, , , ,