HTML网页数据访问技术漫谈
时间：2007-02-17 来源：PHP爱好者
---- 由于受到传统的标准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 >
php爱好者站 http://www.phpfans.net PHP|MySQL|javascript|ajax|html.
一、使用脚本文件技术
---- 我们知道，在网页中可以通过<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 >
php爱好者站 http://www.phpfans.net PHP|MySQL|javascript|ajax|html.
相关阅读 更多 +
