我的网页能实时显示股票行情
技术与开发
我是一个爱好炒股的网民，时常会在网上看股票行情（上班时间不能用炒股软件），我比较好奇，这些股票行情图是怎么被嵌入网页中的？我想在自己的网站上添加这个功能，方便自己看盘以及可以吸引部分访客流连忘返。
其实这个功能并不难实现，只需要借助JSP、Javascript语言及Web Service，这样就可以在自己的网页中嵌入股票的行情信息图，然后再更改页面代码得到自己想要的相关股票信息，最后在页面上引入AJAX技术实现实时更新。AJAX技术的核心作用就是让页面无刷新地显示一些动态的元素，可以用来显示Flash、股票行情等信息。
小知识：什么是Web Service？
Web Service 是一个能够实现远程数据交互的一个技术和协议，通过HTML进行通讯。能实现不同平台，不同开发语言和开发技术软件之间的通讯。只要满足了Web Service 的协议都可以进行自由的数据信息交换。现在很多Web Service都是免费的。
第一步：打开MyEclipse（下载地址：http://www.cpcw.com/bzsoft），在“File”菜单上选择“New Web Project”，然后在弹出界面中的“Project name”处填写“MyStock”,然后单击“Finish”按钮即可。
第二步：在MyStock项目上单击鼠标右键，然后选择“New”→“Other”项，在弹出界面中选择“Web Service Client”项。然后单击“Next”按钮。 ，在弹出对话框的URL文本框内，键入http://www.wopos.com/webservice/Stock.asmx?WSDL，再单击“Finish”按钮（图1）。
第三步：在MyStock项目的子目录WebRoot上单击鼠标右键，然后选择“New”→“JSP”项，在弹出界面中选择“File name”项设置名称为test.jsp，然后单击“Finish”按钮完成页面的创建。打开新建的test.jsp页面，替换全部代码（替换的代码请到http://www.cpcw.com/bzsoft下载）。
第四步：发布程序，单击工具栏上的“Deploy MyExclipse…”按钮，将工程发布在相关的应用服务器中（本例是发布在Tomcat中），启动Tomcat应用服务器，在浏览器输入http://localhost:8090/MyStock/test.jsp，便可得到如图2所示的效果图。
以上完成了对Web Service的调用，接下来修改test.jsp中替换后的代码，利用AJAX技术使页面数据实现实时更新的效果。
第五步：将test.jsp中的代码做如下修改。
在＜head＞＜/head＞之间加入下述代码：
＜script language="javascript"＞
var XMLHttpReq;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e){
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
function sendRequest2() {
sendRequest(document.getElementById('code').value);
}
//发送请求函数
function sendRequest(id) {
createXMLHttpRequest();
var url = "result?code="+id;
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.send(null); // 发送请求
} // 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
DisplayHot();
setTimeout("sendRequest()", 3000);
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 显示更新数据信息的函数
function DisplayHot() {
//alert(XMLHttpReq.responseText);
//var result =
XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.nodeValue;
var result =XMLHttpReq.responseText;
document.getElementById("imgs").innerHTML = "＜img src='"+result+"'＞";
}
＜/script＞
为body添加onload属性，如＜body onload= sendRequest2 ()＞
在原来显示图片的位置将代码更改为：
＜td width="415"＞
＜div id="imgs"＞＜/div＞
＜/td＞
第六步：在程序中新建一个Servlet，添加相关代码（代码下载地址：http://www.cpcw.com/bzsoft）。
最后，只需要在输入股票代码项处输入要查寻的股票代码即可。
总结
在本例中，股票显示功能并不是自己提供，我们只是利用了免费的Web Service。根据本例的实现思想，请广大读者朋友自行扩展，可以很轻松地实现电子地图或天气预报等效果。