6.1.4 客户端代码—实现函数处理
left.html中包含一个按钮，当单击该按钮时，将调用Display()函数。在Display()函数中创建XMLHttpRequest对象req并且向服务器发送请求。
回调函数为callback()，函数中对req的状态进行判断，分为等于4和不等于4两种情况。当状态值等于4时，说明服务器端的数据已返回，响应已经成功地到达客户端，这时可调用parseMessage()函数来对响应结果进行进一步处理。当状态值不等于4的时候，说明还没有得到服务器的响应，用户还需要等待，这时则改变框架右侧default.html中<span id='code'></span>标记中的代码，在这个标记中显示一个等待的图片。相关代码如下：
var content = parent.right.document.getElementById('code');
content.innerHTML = "<img src='images/load.gif' width='97' height='46'>";
代码中parent代表主框架，right代表框架中定义的name="right"的子窗口，即右侧部分的default.html。这样变量content则代表default.html中id为“code”的标记。
当状态值等于4时，则调用parseMessage()函数。在parseMessage()函数中再次使用变量来获得default.html中的<span id='code'></span>标记，这时在<span>标记中显示“页面加载成功”的文字，在实际应用当中，即可以将服务器返回的具体数据显示给用户。left.html代码如代码6.2所示。
代码6.2 left.html文件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>
left
</title>
<script type="text/javascript">
function Display()
{
var url = "frame"; //指定请求发送的url
if (window.XMLHttpRequest) {
req = new XMLHttpRequest(); //创建XMLHttpRequest对象
}else if (window.ActiveXObject) { //对浏览器的版本进行判断
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if(req){
req.open("GET", url, true); //建立请求
req.onreadystatechange = callback; //指定回调函数为callback()
req.send(null); //发送请求
}
}
function callback() {
if (req.readyState == 4) { //判断请求的状态值，当值为4的时候表示请求得到了响应
if (req.status == 200) { //判断HTTP状态
parseMessage(); //解析XML文档
// update the HTML DOM based on whether or not message is valid
}else{
alert ("Not able to retrieve description" + req.statusText);
}
}
else
{
var content = parent.right.document.getElementById('code');
//获得default.html中id为'code'的<span>标记
content.innerHTML = "<img src='images/load.gif' width='97' height='46'>"; //当数据没有加载完毕的时候，在<span> 标记中显示一幅图
}
}
function parseMessage()
{
var content = parent.right.document.getElementById('code');
//获得default.html中的<span>标记
content.innerHTML="页面加载成功!"; //在标记中显示“加载成功”
}
</script>
</head>
<body>
<br>
<div align="center">
<table width="70％" border="1">
<tr>
<td align="center">
<input type="submit" name="Submit" value="提交" onClick=
"Display()"> <!—提交按钮-->
</td>
</tr>
</table>
</div>
</body>
</html>
| 回书目 上一节 下一节 |
|
· 系统分析师自测获奖名.. · Linux结课考试自测获奖.. · 上周Linux系统命令的使.. · 上周真题冲刺测试获奖.. · 全国计算机等考四级模.. · 08年3月各大网上书店及.. |
· 网络工程师模拟测试获.. · 全国计算机软考考试指.. · 3月24日WCF聊天活动 积.. · 全国计算机等级考试四.. · 软件项目估计：第2版 · 系统分析师基础知识自.. |
|
|||
| 名称：SQL Server数据库管理精品黄皮书 简介：书中文章经过精挑细选，便于用户能根据自己的实际工作和学习，快速在本书寻找到相关资料。内容涵盖了SQL Server的安装与升级、语句查询、数据备份和恢复、自动化任务、数据同步、数据字典、安全和预防、性能和优化、集群等各方面应用信息，以及DBA管理人员在数据库管理工作中 |
|||
| 名称：2007路由技术大全 简介：《2007路由技术大全》由51CTO.com网站特别策划制作，该书包括路由器技术、路由器产品、路由器配置、安全设置、路由器故障处理、路由器密码恢复，以及广大网友在实践使用中的心得经验和技巧文章，内容注重实用性，适用于初学者入门，也适合多年从业者提高，是一本实践和理论完 |
|||
| 名称：网络安全精品应用黄皮书 简介：《2007精品网络安全黄皮书》包括了9个大类24个小类， 800余篇文章，内容包含了熊猫烧香病毒、DDOS攻击、ARP病等热点问题的介绍及解决方案。从病毒查杀、防范、系统、数据等各方面的安全设置到黑客技术的了解、防范，涉及到了安全应用的全部领域, 由浅至深内容全面。 |
|
||||
| · SQL Server 2008/2005.. · SOA 面向服务架构 · SQL Server 2008/2005.. · iSCSI应用与发展 · RAID——磁盘阵列基础 · Apache技术专题 · 中间件应用技术专题 · 三层交换技术专题 |
· SQL Server入门到精通 · Apache技术专题 · 国际文档格式标准开战 · 路由器设置与口令恢复 · 打造安全服务器 · PHP开发应用手册 · SOA 面向服务架构 · 企业数据恢复指南 |
|||
|
||||
| · iSCSI应用与发展 · 中间件应用技术专题 · SQL Server入门到精通 · SQL Server 2008/2005.. · SOA 面向服务架构 · Apache技术专题 · iSCSI应用与发展 · 三层交换技术专题 |
· Apache技术专题 · 企业数据恢复指南 · RAID——磁盘阵列基础 · 路由器设置与口令恢复 · SOA 面向服务架构 · ADSL应用面面俱到 · ADSL应用面面俱到 · 反垃圾邮件技术应用 |
|||
