-
您的位置:首页 → 网页设计 → HTML/CSS → HTML网页数据访问技术漫谈
HTML网页数据访问技术漫谈
时间:2004/11/7 2:42:00来源:本站整理作者:蓝点我要评论(0)
-
---- 由于受到传统的标准HTML语言限制,网页本身并不具备与服务器交互的能力,但是DHTML(动态HTML)的出现使得网页访问外部数据源成为了可能。用户可以开发交互式动态网页或者基于浏览器/服务器架构的应用程序,外部数据通过服务器端(例如ASP、CGI)动态生成,即可实现网页内容的实时更新。本文则主要针对IE浏览器来谈谈如何在网页中通过DHTML访问外部数据源(文件),以及在不对页面进行刷新的情况下实现网页内容依数据源数据的变化而动态更新的具体方法。
一、使用脚本文件技术
---- 我们知道,在网页中可以通过< script >标签的src属性引入脚本文件,并且平等地看待外部脚本和网页内部脚本。因此我们可以将数据内容存储在脚本文件的变量中,然后动态加载该脚本文件,加载成功后即可在网页中直接读取这些数据变量,从而实现网页访问外部数据源目的。示例如下。
---- < input type=button value="加载脚本文件" onclick=getData("data.js") >
---- < script id="scriptID" >< /script >
---- < script language="JavaScript" >
---- function getData (url){
---- scriptID.src=url;
---- }
---- < /script >
二、应用框架技术
---- DHTML可以实现各个框架页面之间的通信,因此可以利用这一特性,间接实现网页访问外部数据源。具体的做法是,将数据内容存储在另一网页文件中,然后动态载入到主页面的内联框架中(通过< iframe >标签进行创建),加载成功后即可通过动态HTML读取内联框架页面中所包含的数据,我们通常所见的聊天室中聊天内容的动态刷新就是通过这种方法来实现的。示例如下。
---- < iframe id="iframeID" style='display:none;' >< /iframe >
---- < input type=button value="加载网页文件" onclick=getData("data.htm") >
---- < script language="JavaScript" >
---- function getData (url){
---- document.all.iframeID.src = url;
---- }
---- < /script >
三、使用IE内置行为技术
---- 对于行为技术的应用本刊在以前做过多次介绍,相信大家并不陌生。在IE内置的默认行为中有一个download行为可以实现在网页中下载文本文件,因此可以将数据内容按一定格式存储在文本文件(如CSV列表文件)中,然后再通过该行为动态加载,加载成功后即可对该文本文件内容进行解析,进而读取相关数据。示例如下。
---- < script language="JavaScript" >
---- function onDownloadDone(data) {
---- alert(data);
---- }
---- < /script >
---- < input type="button" id="behaviorID" style="behavior:url(#default#download)" value="加载文本文件" onclick=this.startDownload("data.txt",onDownloadDone) >
四、使用新兴的XML技术
---- XML作为一种跨平台的通用结构化数据描述语言,非常适合存储和交换数据的应用。更为重要的是,XML文档易于通过标准XML DOM直接进行访问,而不必编写程序进行文档内容的解析。因此我们可以将数据存储为XML格式文档,然后在网页中加载该XML文档,加载成功后即可在网页中使用XML DOM来读取这些XML数据。在网页中可以通过3种不同的方法实现XML文档动态加载,具体如下。
---- 第一种方法
---- 此方法是直接在网页中插入< xml >标签,定义XML数据岛(island),然后使用脚本动态装入XML文档。由于XML不是标准HTML元素,在使用这种方法时要特别注意浏览器的兼容性。示例如下。
---- < xml id=xmlID >< /xml >
---- < input type=button value="加载XML文档" onclick=alert(getData("data.xml").xml) >
---- < script language="JavaScript" >
---- function getData(url){
---- xmlID.async = false;//设置为同步下载
---- xmlID.load(url);//加载XML文档
---- return xmlID;
---- }
---- < /script >
---- 第二种方法
---- 此方法是在网页中使用脚本代码动态创建XML文档对象,然后使用load的方法加载XML文档。这种方法要求浏览器允许运行ActiveX控件,示例如下。
---- < input type=button value="加载XML文档" onclick=alert(getData("data.xml").xml) >
---- < script language="JavaScript" >
---- function getData(url){
---- var xmldoc = new ActiveXObject("Microsoft.XMLDOM");//创建XML文档对象
---- xmldoc.async = false;
---- xmldoc.load(url);
---- return xmldoc;
---- }
---- < /script >
---- 第三种方法
---- 此方法是通过XMLHTTP对象从服务器获取XML文档,示例如下。
---- < input type=button value="加载XML文档onclick=alert(getData("data.xml").xml) >
---- < script language="JavaScript" >
---- function getDatal(url){
---- var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//创建XMLHTTPRequest对象
---- xmlhttp.open("GET",url,false,"","");//使用HTTP GET初始化HTTP请求
---- xmlhttp.send("");//发送HTTP请求并获取HTTP响应
---- return xmlhttp.responseXML;//获取XML文档
---- }
---- < /script >
相关阅读
Windows错误代码大全 Windows错误代码查询激活windows有什么用Mac QQ和Windows QQ聊天记录怎么合并 Mac QQ和Windows QQ聊天记录Windows 10自动更新怎么关闭 如何关闭Windows 10自动更新windows 10 rs4快速预览版17017下载错误问题Win10秋季创意者更新16291更新了什么 win10 16291更新内容windows10秋季创意者更新时间 windows10秋季创意者更新内容kb3150513补丁更新了什么 Windows 10补丁kb3150513是什么
-
热门文章
没有查询到任何记录。
最新文章
页面进入效果表单
XHTML校验需要注意的6个细节CSS样式表创建美妙绝伦的网站了解XHTML DHTML SHTML之间的区别HTML小技巧的一些小技巧
人气排行
容易被误解的overflow:hiddenCSS中dashed和dotted的区别CSS水平和垂直居中的几种实现方法DIV+CSS自适应高度兼容IE6,ie7,ie8和FF的解css优先级问题如何用CSS实现图片圆角化处理超链接target=_blank的使用方法Ctrl+H键的用法
查看所有0条评论>>