AJAX: How to user Yahoo! Stock Quote CVS service

If you are trying to use AJAX skills to build your stock quote tool and are looking for some stock price feeds, then this article could help you a lot. :) The sample Yahoo! Stock Quote HTTP string looks like this:

http://download.finance.yahoo.com/d/quotes.csv?s=YHOO&f=l1c1v

If you type in the HTTP address above to your browser address bar, it will return you a string like

20.745,-0.385,2590659

If you want the full information about the symbol, you can use **f=sl1d1t1c1ohgvj1pp2wern** instead.

http://download.finance.yahoo.com/d/quotes.csv?s=YHOO&f=sl1d1t1c1ohgvj1pp2wern

Don’t sweat, here comes the explanation for each letter (or letter-digit pair)

* s: the symbol name
* l: last value (or current price). If you use l alone, you will get back a string similar to Mar 22 - 31.26
* l1: (letter l and the number 1) to just get the last value of the symbol
* d: d alone will give you 0, while d1 will return the current date (e.g. 3/22/2007)
* t: t by itself will request the yahoo-generated chart. However, you will get back the chart image with a whole bunch of other HTML garbage, e.g. src=http://chart.yahoo.com/c//y/yhoo.gif" alt="Chart">
* t1: the time of last update, for example 4:00pm.
* c: the change amount. Can either be used as c or c1.
* o: opening value
* h: high value
* g: low value
* v: volume
* j: 52-week low.
* j1: the market cap. This is string like "42.405B" for $42 billion. Man… that can buy **a lot** of hamburger
* p: after hour price (?)
* p1: (?)
* p2: change percentage e.g. "-0.10%"
* w: 52-week range
* e: EPS (Earning per share)
* r: P/E (Prince/Earning) ratio
* n: Company name

How to build a popular 3 column HTML laytou

There is a very famous and very popular 2 or 3 columns html framework layout which used by IBM, Sony etc etc, and which is very easy to build and maintain. Below is the screen shot of the layout. The key skills are used in this structure are CSS float style and clear styles. The float style sets or retrieves on which side of the object the text will flow. The clear style sets or retrieves whether the object allows floating objects on its left side, right side, or both, so that the next text displays past the floating objects.

From the screen shot you can see to build the 3 columns we usually set the first two div columns' float style to left and the last one to right. By the way the 3 div areas will be listed horizontally and properly. Then we have to set the followed/next div (in the screen shot, DIV D) clear style to left or both.

The reason to use clear style
As you all know, the div element is a block element. But by set the float to left or right will change the div element to a inline object. In this case the DIV A, DIV B and DIV C are actually inline objects and DIV D is a block object. If don't set the DIV D's clear style to left or both the DIV D will be located at very top/left area inside the DIV MAIN and will be overlapped with DIV A, B and C.

If you don't like the clear style at all, there is a alternative way to set up this html layout, which is put the DIV A, B and C in a table element and you can get the same effect because the table will always auto reset its size to suit for all the element inside it and it is a block element too.

Stupid syntax difference between IE and Firefox

When you are doing javascript/AJAX development you probably will add a very useful function trim() into build-in String object to return a copy of a string without both leading and trailing spaces. To do so you just need simply add one sentence in front of your js file. Below is the coding I used in my js framework.

function String.prototype.trim() {return this.replace(/(^\s*)|(\s*$)/g,"");};

Unfortunately this sentence only works on IE browser. It caused an error on Firefox which cost me one hour this afternoon to figure it out. after I changed the sentence to the syntax shown below a peaceful world came back again.

String.prototype.trim = function() {return this.replace(/(^\s*)|(\s*$)/g,"");};

It is painful to find out these tiny differences and it always lets me down. :(  But from the positive side, it makes you always use the standard syntax rule to build your project.

My AJAX framework v1.0

Nothing special. Create a new object wjAjax inside there is a XMLHttpRequest object named xmlhttp. And then you can call the function getData (method, url, params, async, func) which attached in wjAjax class. If you call the getData function by asynchronized way, the function will return true or false. But if you call the getData function by synchronized way it will directly return the XMLHttpRequest object for further using.

function wjAjax ()
{
  try
  {
    if (window.XMLHttpRequest)
    {
      this.xmlhttp = new window.XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
      this.xmlhttp = new window.ActiveXObject("MSXML2.XMLHTTP.3.0");
      if (!this.xmlhttp)
        this.xmlhttp = new new window.ActiveXObject("MICROSOFT.XMLHTTP");
    }
  }
  catch (e) {return null;}
  this.isRunning = false;
  return this;
}

wjAjax.prototype.getData = getData;

function getData(method, url, params, async, func)
{
  if (this.isRunning) {return false;}
  if (!url) {return false;}
  if (async && !func) {return false;}
  var me = this; //alias of wjAjax object, for reference using in onreadystatechange method.
  method = method || "get";
  params = params || "";
  try
  {
    if (method.toLowerCase() == "get")
    {
      this.xmlhttp.open("get", url+"?"+params, async);
      params = null;
    }
    else if (method.toLowerCase() == "post")
    {
      this.xmlhttp.open("post", url, async);
      this.xmlhttp.setRequestHeader("Method", "POST "+url+" HTTP/1.1");
      this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    }
    if (async)
    {
      this.xmlhttp.onreadystatechange = function()
      {
        if (this.readyState == 4)
        {
          me.isRunning = false;
          if (this.status == 200) {func(this);}
          else {alert ("HTTP server error. The HTTP server response status code is " + this.status);}
        }
      }
    }
    this.isRunning = true;
    this.xmlhttp.send(params);
    if (!async)
      this.isRunning = false;
  }
  catch (e) {alert("Run time error: "+e.message); return false;}
  if (async)
    return true;
  else
    return this.xmlhttp;
}