学习AJAX时,作了以下这个简单的AJAX例子,没用任何动态语言,完全HTML和JAVASCRIPT,至于服务器源也就小偷了一下www.cc168.com.cn(长城证券)的开放式基金每日净值查询页面。
用XMLHTTP对象获取到WEB页面HTTP内容后,采用Split的方式进行截取,取出自己需要的web部分,然后绑定到页面的div上。CSS样式表也就远程使用了cc168.com.cn的。
<html>
<head>
<link href="http://www.cc168.com.cn/css/index.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://www.cc168.com.cn/css/framework.css" type="text/css"/>
<script language="javascript">
window.onload = function()
{
CreateDateSelect();
}
var xmlHttp = false;
var e;
//创建XMLHTTP对象
function getXMLHTTPObj()
{
var C = null;
try
{
C = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
C = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(sc)
{
C = null;
}
}
if( !C && typeof XMLHttpRequest != "undefined" )
{
C = new XMLHttpRequest();
}
return C;
}
//调用远程方法
function callServer(e)
{
try
{
if( xmlHttp && xmlHttp .readyState != 0 )
{
xmlHttp.abort();
}
xmlHttp = getXMLHTTPObj();
if( xmlHttp )
{
document.getElementById("outgroup").style.display = "none";
//获取查询日期
var dateSele = e.options[e.selectedIndex].value;
document.getElementById("date").innerHTML = dateSele + " 开放式基金净值";
//构造查询连接字符串
var url = "http://www.cc168.com.cn/service/FundNetValue.jsp?newEndDate=" + dateSele;
//打开连接
xmlHttp.open("GET", url, true);
//设置回调函数
xmlHttp.onreadystatechange = updatePage;
//发送请求
xmlHttp.send(null);
}
else
{
document.getElementById("flag").innerHTML = "XMLHTTP对象创建失败";
}
}
catch (e)
{
document.getElementById("flag").innerHTML = "查询错误:" + e;
}
}
//回调处理函数
function updatePage()
{
try {
if (xmlHttp.readyState == 1)
{
document.getElementById("flag").innerHTML = "正在加载连接对象......";
}
if (xmlHttp.readyState == 2)
{
document.getElementById("flag").innerHTML = "连接对象加载完毕。";
}
if (xmlHttp.readyState == 3)
{
document.getElementById("flag").innerHTML = "数据获取中......";
}
if (xmlHttp.readyState == 4)
{
var response = xmlHttp.responseText;
var OpenValue = response.split("<td class=\"info-head\" width=\"400\" valign=\"top\">")[1];
var OpenValue = OpenValue.split("</td></tr>")[0];
document.getElementById("out").innerHTML = OpenValue;
document.getElementById("flag").innerHTML = "查询结束";
document.getElementById("outgroup").style.display = "block";
}
}
catch (e)
{
document.getElementById("flag").innerHTML = "回调处理错误:" + e;
}
}
//创建日期选择下拉框
function CreateDateSelect()
{
var html = [];
for(var iYear=2005; iYear<=2009; iYear ++)
{
for( var iMonth=1; iMonth<=12; iMonth ++ )
{
for( var iDay=1; iDay<=31; iDay ++ )
{
html[html.length] = "<option value=\"" + iYear + "\-" + iMonth + "\-" + iDay + "\">" + iYear + "年" + iMonth + "月" + iDay + "日" + "</option>";
}
}
}
document.getElementById("dateSele").innerHTML = "<select name=\"dateSele\" id=\"dateSele\" onchange=\"callServer(this);\">" + html.join("") + "</select>";
}
</script>
</head>
<body>
<form>
<div>请选择交易日期:</div>
<div>
<div id="dateSele" align=left>
</div>
<div id="flag" align=right></div>
</div>
<div id="date"></div>
<div id="outgroup" style="display:None">
<div id="out"></div>
</div>
</form>
</body>
</html>
如果使用的是firefox的话,在open之前加上下面的代码
if(window.XMLHttpRequest) // firefox
{
try
{ netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
}
catch (exception)
{
alert(exception);
}
}
不过日期的list是有点问题的,全部弄为1~31号了,本例只是说明了一个AJAX的应用而已。
分享到:
相关推荐
Ajax实例 超简单!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
实例21 超级链接计数 第3章 数据库、XML实例 实例22 mysql类库完成MySQL数据库的添加、删除和修改 实例23 mysqli类库完成MySQL数据库的添加、删除和查询 实例24 获取服务器和系统信息 实例25 分页显示信息 实例26 ...
实例21 超级链接计数 第3章 数据库、XML实例 实例22 mysql类库完成MySQL数据库的添加、删除和修改 实例23 mysqli类库完成MySQL数据库的添加、删除和查询 实例24 获取服务器和系统信息 实例25 分页显示信息 ...
PHP+AJAX+XML 最简单入门实例 超详细 适合入门选手
ajax基础超级简单的教程,一看就会哦...
学会struts+jq+ajax+json只要4步‵‵经过作者的总结超级简单 1. 导入struts2 及json包 asm-3.3.jar asm-commons-3.3.jar asm-tree-3.3.jar commons-fileupload-1.2.2.jar commons-io-2.0.1.jar commons-lang3-3.1....
个人收集的几个很好的AJAX,js实例: 如:用于文本编辑的widgEditor 超级链接水泡:BubbleTooltips 网站或者网页直接调用即可
php无刷新简便超实用的ajax类附带实例 代码简洁 调用简便
JUQERY的4种AJAX简短实例,超有用
很简单的一个ajax应用和jsp+servlet+javabean+ajax实现下拉菜单的二级联动和一个简单的ajax的实例应用,超简单
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单),需要的朋友可以参考一下
Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多的网络程序,这是最基础的部分。 递归遍历矩阵 1个目标文件,简单! 多人聊天室 3...
Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多的网络程序,这是最基础的部分。 递归遍历矩阵 1个目标文件,简单! 多人聊天室 3...
一个以dwr为基础的Ajax实例,超简单的构成
Ajax + PHP 简单图片相册源代码。里面附带有使用说明。个人感觉相当不错的入门实例。
Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多的网络程序,这是最基础的部分。 递归遍历矩阵 1个目标文件,简单! 多人聊天室 3...
java源码包实例源码JAVA开发源码50个合集: Ajax框架 ZK.rar Java图书馆管理系统源程序.rar Java图片倒影效果实例源码.rar Java图片翻折,将图像压扁.rar Java坦克大战网络对战版源代码.rar Java声音播放程序源代码....