使用ajax技术无刷新动态调用股票信息

新浪的财金频道一直感觉做得很好。但由于最近网速慢的缘故，查看股票信息时网页老是打不开。这几天一直在研究ajax，于是用jquery自己做了一个自动读取新浪股票实时数据的页面。

< html >
< head >
     < title > ajax test </ title >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8"   />
     < script  type ="text/javascript"  src ="jquery.js" ></ script >
     < script  type ="text/javascript" > ...
    function ajaxRequest()...{
        $.ajax(...{
            url: 'http://hq.sinajs.cn/list=sh000001,sh601939,sh600016,sh600528,sh600667,sh601390,sh601398,sh601857,sh600028',
            type: 'GET',
            dataType: 'html',
            timeout: 2000,
            success: function(response)...{
                var stocks = response.split(';');
                for(var i=0; i<stocks.length-1; i++)...{
                    var content = stocks[i];
                    var temp1 = content.split('=')[0];
                    var temp2 = content.split('=')[1];
                    var code = temp1.substr(temp1.length - 6, 6);
                    var temp3 = temp2.replace('"', '');
                    var name = temp3.split(',')[0];
                    var tday_f = temp3.split(',')[1];
                    var yest_f = temp3.split(',')[2];
                    var curr_f = temp3.split(',')[3];
                    var temp_f = curr_f - yest_f;
        
                    $('#a'+i).html(code);
                    $('#b'+i).html(name);
                    if(curr_f > yest_f) ...{
                        $('#c'+i).html("<font color='red'>" + curr_f + "</font>");
                    } else if(curr_f < yest_f) ...{
                        $('#c'+i).html("<font color='green'>" + curr_f + "</font>");
                    } else ...{
                        $('#c'+i).html(curr_f);
                    }
                    $('#d'+i).html(tday_f);
                    $('#e'+i).html(yest_f);
                    if(temp_f > 0) ...{
                        $('#f'+i).html("<font color='red'>" + temp_f.toFixed(2) + "</font>");
                        $('#g'+i).html("<font color='red'>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> % ");
                    } else if(temp_f < 0) ...{
                        $('#f'+i).html("<font color='green'>" + temp_f.toFixed(2) + "</font>");
                        $('#g'+i).html("<font color='green'>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> % ");
                    } else ...{
                        $('#f'+i).html(temp_f.toFixed(2));
                        $('#g'+i).html(((temp_f / yest_f) * 100).toFixed(2) + " % ");
                    }
                    $('#h'+i).html(temp3.split(',')[4]);
                    $('#i'+i).html(temp3.split(',')[5]);
                }
            }
        });
    }

    function pageInit() ...{
        window.setInterval("ajaxRequest()",3000); 
    }
     </ script >
     < style > ...
    .tr_cls {...}{
        height:30px;
        font-size:16px;
        font-family:"Times New Roman", Times, serif;
        background-color:#FFFFCC
    }
     </ style >
</ head >
< body  onLoad ="pageInit();" >
     < form >
         < table  width ="800"  border ="1"  align ="center"  cellpadding ="0"  cellspacing ="0"  bordercolor ="#000000" >
              < tr  bgcolor ="#3399FF"  height ="30px" >
                 < th  scope ="col" > 股票代号 </ th >
                 < th  scope ="col" > 股票名称 </ th >
                 < th  scope ="col" > 当前价格 </ th >
                 < th  scope ="col" > 今日开盘 </ th >
                 < th  scope ="col" > 昨日收盘 </ th >
                 < th  scope ="col" > 当前差价 </ th >
                 < th  scope ="col" > 涨跌幅度 </ th >
                 < th  scope ="col" > 最高价格 </ th >
                 < th  scope ="col" > 最低价格 </ th >
             </ tr >
             < tr  class ="tr_cls" >
                 < td  align ="center" >< span  id ="a0" ></ span ></ td >
                 < td  align ="center" >< span  id ="b0" ></ span ></ td >
                 < td  align ="center" >< span  id ="c0" ></ span ></ td >
                 < td  align ="center" >< span  id ="d0" ></ span ></ td >
                 < td  align ="center" >< span  id ="e0" ></ span ></ td >
                 < td  align ="center" >< span  id ="f0" ></ span ></ td >
                 < td  align ="center" >< span  id ="g0" ></ span ></ td >
                 < td  align ="center" >< span  id ="h0" ></ span ></ td >
                 < td  align ="center" >< span  id ="i0" ></ span ></ td >
             </ tr >
             < tr  class ="tr_cls" >
                 < td  align ="center" >< span  id ="a1" ></ span ></ td >
                 < td  align ="center" >< span  id ="b1" ></ span ></ td >
                 < td  align ="center" >< span  id ="c1" ></ span ></ td >
                 < td  align ="center" >< span  id ="d1" ></ span ></ td >
                 < td  align ="center" >< span  id ="e1" ></ span ></ td >
                 < td  align ="center" >< span  id ="f1" ></ span ></ td >
                 < td  align ="center" >< span  id ="g1" ></ span ></ td >
                 < td  align ="center" >< span  id ="h1" ></ span ></ td >
                 < td  align ="center" >< span  id ="i1" ></ span ></ td >
             </ tr >
             < tr  class ="tr_cls" >
                 < td  align ="center" >< span  id ="a2" ></ span ></ td >
                 < td  align ="center" >< span  id ="b2" ></ span ></ td >
                 < td  align ="center" >< span  id ="c2" ></ span ></ td >
                 < td  align ="center" >< span  id ="d2" ></ span ></ td >
                 < td  align ="center" >< span  id ="e2" ></ span ></ td >
                 < td  align ="center" >< span  id ="f2" ></ span ></ td >
                 < td  align ="center" >< span  id ="g2" ></ span ></ td >
                 < td  align ="center" >< span  id ="h2" ></ span ></ td >
                 < td  align ="center" >< span  id ="i2" ></ span ></ td >
             </ tr >
             < tr  class ="tr_cls" >
                 < td  align ="center" >< span  id ="a3" ></ span ></ td >
                 < td  align ="center" >< span  id ="b3" ></ span ></ td >
                 < td  align ="center" >< span  id ="c3" ></ span ></ td >
                 < td  align ="center" >< span  id ="d3" ></ span ></ td >
                 < td  align ="center" >< span  id ="e3" ></ span ></ td >
                 < td  align ="center" >< span  id ="f3" ></ span ></ td >
                 < td  align ="center" >< span  id ="g3" ></ span ></ td >
                 < td  align ="center" >< span  id ="h3" ></ span ></ td >
                 < td  align ="center" >< span  id ="i3" ></ span ></ td >
             </ tr >
             < tr  class ="tr_cls" >
                 < td  align ="center" >< span  id ="a4" ></ span ></ td >
                 < td  align ="center" >< span  id ="b4" ></ span ></ td >
                 < td  align ="center" >< span  id ="c4" ></ span ></ td >
                 < td  align ="center" >< span  id ="d4" ></ span ></ td >
                 < td  align ="center" >< span  id ="e4" ></ span ></ td >
                 < td  align ="center" >< span  id ="f4" ></ span ></ td >
                 < td  align ="center" >< span  id ="g4" ></ span ></ td >
                 < td  align ="center" >< span  id ="h4" ></ span ></ td >
                 < td  align ="center" >< span  id ="i4" ></ span ></ td >
             </ tr >
             < tr  class ="tr_cls" >
                 < td  align ="center" >< span  id ="a5" ></ span ></ td >
                 < td  align ="center" >< span  id ="b5" ></ span ></ td >
                 < td  align ="center" >< span  id ="c5" ></ span ></ td >
                 < td  align ="center" >< span  id ="d5" ></ span ></ td >
                 < td  align ="center" >< span  id ="e5" ></ span ></ td >
                 < td  align ="center" >< span  id ="f5" ></ span ></ td >
                 < td  align ="center" >< span  id ="g5" ></ span ></ td >
                 < td  align ="center" >< span  id ="h5" ></ span ></ td >
                 < td  align ="center" >< span  id ="i5" ></ span ></ td >
             </ tr >
             < tr  class ="tr_cls" >
                 < td  align ="center" >< span  id ="a6" ></ span ></ td >
                 < td  align ="center" >< span  id ="b6" ></ span ></ td >
                 < td  align ="center" >< span  id ="c6" ></ span ></ td >
                 < td  align ="center" >< span  id ="d6" ></ span ></ td >
                 < td  align ="center" >< span  id ="e6" ></ span ></ td >
                 < td  align ="center" >< span  id ="f6" ></ span ></ td >
                 < td  align ="center" >< span  id ="g6" ></ span ></ td >
                 < td  align ="center" >< span  id ="h6" ></ span ></ td >
                 < td  align ="center" >< span  id ="i6" ></ span ></ td >
             </ tr >
             < tr  class ="tr_cls" >
                 < td  align ="center" >< span  id ="a7" ></ span ></ td >
                 < td  align ="center" >< span  id ="b7" ></ span ></ td >
                 < td  align ="center" >< span  id ="c7" ></ span ></ td >
                 < td  align ="center" >< span  id ="d7" ></ span ></ td >
                 < td  align ="center" >< span  id ="e7" ></ span ></ td >
                 < td  align ="center" >< span  id ="f7" ></ span ></ td >
                 < td  align ="center" >< span  id ="g7" ></ span ></ td >
                 < td  align ="center" >< span  id ="h7" ></ span ></ td >
                 < td  align ="center" >< span  id ="i7" ></ span ></ td >
             </ tr >
             < tr  class ="tr_cls" >
                 < td  align ="center" >< span  id ="a8" ></ span ></ td >
                 < td  align ="center" >< span  id ="b8" ></ span ></ td >
                 < td  align ="center" >< span  id ="c8" ></ span ></ td >
                 < td  align ="center" >< span  id ="d8" ></ span ></ td >
                 < td  align ="center" >< span  id ="e8" ></ span ></ td >
                 < td  align ="center" >< span  id ="f8" ></ span ></ td >
                 < td  align ="center" >< span  id ="g8" ></ span ></ td >
                 < td  align ="center" >< span  id ="h8" ></ span ></ td >
                 < td  align ="center" >< span  id ="i8" ></ span ></ td >
             </ tr >
         </ table >
     </ form >
</ body >
</ html >

习惯用prototype的，把脚本部分的代码替换一下即可。

< script  type ="text/javascript"  src ="prototype.js" ></ script >
     < script  type ="text/javascript" > ...
    function ajaxRequest()...{
        var myAjax = new Ajax.Request(
            'http://hq.sinajs.cn/list=sh000001,sh601939,sh600016,sh600528,sh600667,sh601390,sh601398,sh601857,sh600028',
            ...{
                method: 'get',
                onComplete: setData
            }
        );
    }

    function setData(response) ...{
        var contents = response.responseText;
        var stocks = contents.split(';');
        for(var i=0; i<stocks.length-1; i++)...{
            var content = stocks[i];
            var temp1 = content.split('=')[0];
            var temp2 = content.split('=')[1];
            var code = temp1.substr(temp1.length - 6, 6);
            var temp3 = temp2.replace('"', '');
            var name = temp3.split(',')[0];
            var tday_f = temp3.split(',')[1];
            var yest_f = temp3.split(',')[2];
            var curr_f = temp3.split(',')[3];
            var temp_f = curr_f - yest_f;

            $('a'+i).innerHTML = code;
            $('b'+i).innerHTML = name;
            $('c'+i).innerHTML = curr_f;
            if(curr_f > yest_f) ...{
                $('c'+i).innerHTML = "<font color='red'>" + curr_f + "</font>";
            } else if(curr_f < yest_f) ...{
                $('c'+i).innerHTML = "<font color='green'>" + curr_f + "</font>";
            } else ...{
                $('c'+i).innerHTML = curr_f;
            }
            $('d'+i).innerHTML = tday_f;
            $('e'+i).innerHTML = yest_f;
            if(temp_f > 0) ...{
                $('f'+i).innerHTML = "<font color='red'>" + temp_f.toFixed(2) + "</font>";
                $('g'+i).innerHTML = "<font color='red'>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> %";
            } else if(temp_f < 0) ...{
                $('f'+i).innerHTML = "<font color='green'>" + temp_f.toFixed(2) + "</font>";
                $('g'+i).innerHTML = "<font color='green'>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> %";
            } else ...{
                $('f'+i).innerHTML = temp_f.toFixed(2);
                $('g'+i).innerHTML = ((temp_f / yest_f) * 100).toFixed(2) + " % ";
            }
            $('h'+i).innerHTML = temp3.split(',')[4];
            $('i'+i).innerHTML = temp3.split(',')[5];
        }
    }

    function pageInit() ...{
        window.setInterval("ajaxRequest()",3000); 
    }
     </ script >

当然页面部分完全可以由脚本自动生成，以及页面动态增减股票信息等功能，就等日后修改吧。