js实现静态页面的include功能
姑且不说为什么会有这样的需求，就谈谈怎么实现吧，当这个需求出来的时候我就想到的是js,一种方式就是fileStream的方式把文件内容读出来在标签里把内容显示出来，再一种方式就是xmlHttpRequest创建对象对远程文件读取，这种更像web方式，前一种应该说是文件操作方式。在后一种方式的考虑阅览器的兼容性，基于这个问题我故意装了IE7.0和firefox，一直用的都是IE6.0。把这两种方式实现的代码贴下，希望能对你有说帮助，更多的是自己一个笔记。
FileStream方式：
FileStream方式：
1
<html xmlns="http://www.w3.org/1999/xhtml">
2<head>
3<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
4<title>html include实例</title>
5
<SCRIPT language=JavaScript>
6
<!--
7
function ReadFile(id,src){ //传入的参数是标签id及文件所在路径
8var forReading=1;
9var fso = new ActiveXObject("Scripting.FileSystemObject");
10var file = fso.OpenTextFile(src,forReading);
11var text = file.ReadAll(); //ReadAll读取的是所有内容，ReadLine()则读一行
12file.Close();
13id.innerHTML=text;
14
}
15
//-->
16</SCRIPT>
17</head>
18
19<body onload=ReadFile(xxx,"E:\\htmltest\\top.htm");ReadFile(yy,"E:\\htmltest\\foot.htm");>
20<span id="top"></span>
21<span id="foot"></span>
22</body>
23</html>
xmlHttpRequest方式<html xmlns="http://www.w3.org/1999/xhtml">2
<head>3
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />4
<title>html include实例</title>5
<SCRIPT language=JavaScript> 
6
<!-- 7
function ReadFile(id,src){ //传入的参数是标签id及文件所在路径 
8
var forReading=1;9
var fso = new ActiveXObject("Scripting.FileSystemObject"); 10
var file = fso.OpenTextFile(src,forReading); 11
var text = file.ReadAll(); //ReadAll读取的是所有内容，ReadLine()则读一行12
file.Close(); 13
id.innerHTML=text; 14
} 15
//--> 16
</SCRIPT> 17
</head>18
19
<body onload=ReadFile(xxx,"E:\\htmltest\\top.htm");ReadFile(yy,"E:\\htmltest\\foot.htm");>20
<span id="top"></span> 21
<span id="foot"></span>22
</body>23
</html> 1<html xmlns="http://www.w3.org/1999/xhtml">
2<head>
3<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
4<title>读取html实例</title>
5
6<script>
7 var xmlHttp;
8 var rs;
9 var isie = false;
10 function startRequest(url,divs)
11 {
12 if(window.ActiveXObject) //是IE，下面就要根据版本创建对象
13 {
14 try
15 {
16 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
17 }
18 catch(e)
19 {
20 try
21 {
22 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
23 }
24 catch(e)
25 {
26 try
27 {
28 xmlHttp=new ActiveXObject("MSXML2.ServerXMLHTTP");
29
30 }
31 catch (e)
32 {
33
34 }
35 }
36 }
37
38 isie = true;
39 }
40 else //不是IE,可能是firefox或者其他阅览器
41 {
42 xmlHttp= new XMLHttpRequest();
43 }
44 try{
45 if(isie == false ){
46 xmlHttp.open("GET", url, false);
47 xmlHttp.overrideMimeType("text/html;charset=gb2312");
48 xmlHttp.send(null);
49 document.getElementById(divs).innerHTML=xmlHttp.responseText;
50 }else{
51 xmlHttp.open("GET", url, false);
52 xmlHttp.send(null);
53 if(xmlHttp.readyState == 4){
54 if (xmlHttp.status == 200 || xmlHttp.status == 0){
55 document.getElementById(divs).innerHTML=bytes2BSTR(xmlHttp.responseBody);
56 }
57 }
58 }
59 }catch(exception){
60 document.write('exception:'+exception.message);
61 }
62 }
63 </script>
64//处理乱码问题，还有一种方式是这样的：
65//<script language=javascript>
66//function Recenspace(Html){
67// rs=new ActiveXObject("ADODB.RecordSet");
68// rs.fields.append("a",201,1);
69// rs.open();
70// rs.addNew();
71// rs(0).appendChunk(Html);
72// rs.update();
73// return rs(0).value;
74// rs.close();
75// }
76//</script>
77//这种方式需要操作客户端adodb.recordset对象，有可能客户端会不支持
78<script language="VBScript">
79 function bytes2BSTR(vIn)
80 dim strReturn,i,ThisCharCode,innerCode,Hight8,Low8,NextCharCode
81 strReturn=""
82 for i=1 to LenB(vIn)
83 ThisCharCode=AscB(MidB(vIn,i,1))
84 if ThisCharCode<&H80 Then
85 strReturn=strReturn & Chr(ThisCharCode)
86 else
87 NextCharCode=AscB(MidB(vIn,i+1,1))
88 strReturn=strReturn&Chr(CLng(ThisCharCode)*&H100+CInt(NextCharCode))
89 i=i+1
90 end if
91 next
92 bytes2BSTR=strReturn
93 end function
94 </script>
95</head>
96
97<body onload=startRequest('cp.htm','top');startRequest('contact.htm','foot');>
98<span id="top"></span>
99<span id="foot"></span>
100</body>
101</html>
代码就这样了，进公司快两个星期了，工作跟想象中的不一样。生活就工作吧！有句话叫：坏事它未必就是坏事！生活会让每个人越来越丰富的！<html xmlns="http://www.w3.org/1999/xhtml">2
<head>3
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />4
<title>读取html实例</title>5
6
<script> 7
var xmlHttp; 8
var rs; 9
var isie = false; 10
function startRequest(url,divs)11
{ 12
if(window.ActiveXObject) //是IE，下面就要根据版本创建对象13
{ 14
try15
{16
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");17
}18
catch(e)19
{20
try21
{22
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");23
}24
catch(e) 25
{26
try27
{28
xmlHttp=new ActiveXObject("MSXML2.ServerXMLHTTP");29
30
}31
catch (e)32
{ 33
34
}35
}36
} 37
38
isie = true; 39
} 40
else //不是IE,可能是firefox或者其他阅览器41
{42
xmlHttp= new XMLHttpRequest(); 43
} 44
try{ 45
if(isie == false ){ 46
xmlHttp.open("GET", url, false); 47
xmlHttp.overrideMimeType("text/html;charset=gb2312"); 48
xmlHttp.send(null); 49
document.getElementById(divs).innerHTML=xmlHttp.responseText; 50
}else{ 51
xmlHttp.open("GET", url, false); 52
xmlHttp.send(null); 53
if(xmlHttp.readyState == 4){ 54
if (xmlHttp.status == 200 || xmlHttp.status == 0){ 55
document.getElementById(divs).innerHTML=bytes2BSTR(xmlHttp.responseBody); 56
} 57
} 58
} 59
}catch(exception){ 60
document.write('exception:'+exception.message); 61
} 62
} 63
</script> 64
//处理乱码问题，还有一种方式是这样的：65
//<script language=javascript> 66
//function Recenspace(Html){ 67
// rs=new ActiveXObject("ADODB.RecordSet"); 68
// rs.fields.append("a",201,1); 69
// rs.open(); 70
// rs.addNew(); 71
// rs(0).appendChunk(Html); 72
// rs.update(); 73
// return rs(0).value; 74
// rs.close(); 75
// } 76
//</script>77
//这种方式需要操作客户端adodb.recordset对象，有可能客户端会不支持78
<script language="VBScript"> 79
function bytes2BSTR(vIn) 80
dim strReturn,i,ThisCharCode,innerCode,Hight8,Low8,NextCharCode 81
strReturn="" 82
for i=1 to LenB(vIn) 83
ThisCharCode=AscB(MidB(vIn,i,1)) 84
if ThisCharCode<&H80 Then 85
strReturn=strReturn & Chr(ThisCharCode) 86
else 87
NextCharCode=AscB(MidB(vIn,i+1,1)) 88
strReturn=strReturn&Chr(CLng(ThisCharCode)*&H100+CInt(NextCharCode)) 89
i=i+1 90
end if 91
next 92
bytes2BSTR=strReturn 93
end function 94
</script> 95
</head>96
97
<body onload=startRequest('cp.htm','top');startRequest('contact.htm','foot');>98
<span id="top"></span>99
<span id="foot"></span>100
</body>101
</html>
