JS小功能代码片段（一）
JS小功能代码片段（二）
16、在窗口滚动时自动加载内容
var loading = false;
$(window).scroll(function(){
if((($(window).scrollTop() + $(window).height())+250) >= $(document).height()){
if(loading == false){
loading = true;
$('#loadingbar').css("display","block");
$.get("load.php?start = "+$('#loaded_max').val(), function(loaded){
$('body').append(loaded);
$('#loaded_max').val(parseInt($('#loaded_max').val()) + 50);
$('#loadingbar').css("display","none");
loading = false;
});
}
}
});
$(document).ready(function() {
$('#loaded_max').val(50);
});
17、为input表单增加自动提示功能
方法一：
浏览器引入了许多的HTML5 特性其中我最喜欢的一个就是为input元素引入了placeholder属性，placeholder属性显示引导性文字直到输入框获取输入焦点,当有了用户输入内容后引导性内容将会自动隐藏。
但是placeholder的样式如颜色，将根据不同浏览器显示不同效果，如下截图，密码input表单添加了改属性。左侧为chrome，右侧为ie10。
方法二：
在input中加入autotip属性，但是看了上面的方法一之后，我觉得还不如加上placeholder属性来得更好。当浏览器不支持placeholder时，再平稳过渡到下面方法二。
版本1：
1 |
<span style="font-size: 12px;">var Autotip = function(ele,valClass,blankClass,tip){<br> var tip = tip || ele.attr("autotip") || "";<br> var valClass = valClass || "valClass";<br> var blankClass = blankClass || "blankClass";<br> ele.val(tip).addClass("color-gray1");<br> ele.on("focus",function(){<br> if (ele.val() == tip){<br> ele.val("").removeClass(blankClass).addClass(valClass);<br> }<br> });<br> ele.on("blur",function(){<br> if (!ele.val() || !ele.val().trim()){<br> ele.val(tip).removeClass(valClass).addClass(blankClass);<br> }<br> });<br> };<br> var mobileAutoTip = new Autotip($(".mobile-input"),"color-gray2","color-gray1");<br></span> |
版本2：
1 |
<span style="font-size: 12px;">var autoTip = function(){<br> $(this).on("focus",function(){<br> $(this).addClass("focus");<br> if ($(this).val() == $(this).attr("autoTip") || !$(this).val() || $(this).val().trim()) {<br> $(this).val("");<br> }<br> });<br><br> $(this).on("blur",function(){<br> if (!$(this).val().trim()) {<br> $(this).val($(this).attr("autoTip"));<br> $(this).removeClass("focus");<br> }<br> });<br>}<br></span> |
最终版：
（1、当input有默认value值时，input失去焦点，修改后的value值为空或无效时，恢复默认value值）
（2、增加调用方式：1>可以直接用类方法调用；2>可以用new来调用）
18、为input表单提供email域名自动赋值提示
需求：html5 input里的新的list属性，当用户输入'@'后为用户提示域名信息。如图:
这个属性在safari中不支持，从而在App中也无法支持，估计只能在chrome中使用了。就当学习了。贴上代码，大致思路是监听用户输入'@'后，构造datalist，并关联到input上。依赖jquery。
代码示例：
1 |
<span style="font-size: 12px;">(function(){<br> var emails = [{domain: '@qq.com', label: 'qq邮箱'}, <br> {domain: '@163.com', label: '163邮箱'},<br> {domain: '@126.com', label: '126邮箱'},<br> {domain: '@hotmail.com', label: 'hotmail邮箱'},<br> {domain: '@sina.com', label:'sina邮箱'},<br> {domain: '@gmail.com ',label:'gmail邮箱'}, <br> {domain: '@139.com', label: '139邮箱'}, <br> {domain:'@yahoo.com.cn', label: 'yahoo中国邮箱'}];<br> <br> var addEmailHelp = function(id, otherAddress){<br> var inputObj = $('input#' + id);<br> if(inputObj.length == 0){<br> return;<br> }<br> <br> inputObj.keyup(function (ev) {<br> var val = $(inputObj).val();<br> var lastInputKey = val.charAt(val.length - 1);<br> <br> if (lastInputKey == '@') {<br> var indexOfAt = val.indexOf('@');<br> var username = val.substring(0, indexOfAt);<br><br> if ($('datalist#emailList').length > 0) {<br> $('datalist#emailList').remove();<br> }<br><br> $(inputObj).parent().append('<datalist id="emailList"></datalist>');<br> for (var i in emails) {<br> $('datalist#emailList').append('<option value="' + username + emails[i].domain + '" label="' + emails[i].label + '" />');<br> }<br> <br> if(otherAddress != null && typeof otherAddress != 'undefined'){<br> for (var i in otherAddress) {<br> $('datalist#emailList').append('<option value="' + username + otherAddress[i].domain + '" label="' + otherAddress[i].label + '" />');<br> }<br> }<br><br> $(inputObj).attr('list', 'emailList');<br> }<br> })<br> };<br> <br> window.addEmailHelp = addEmailHelp;<br>})();<br></span> |
1 |
<span style="font-size: 12px;"><html> <br><head><br> <script type="text/javascript" src="jquery-1.7.2.js"></script><br> <script type="text/javascript" src="test.js"></script> <br> <script type="text/javascript"> <br> $(document).ready(function(){ <br> addEmailHelp('test'); <br> }); <br> </script> <br> </head> <br> <body> <br> email : <input id="test" type="text" required/> <br> </body> <br></html><br></span> |
19、简单向上滚动幻灯
<div class="news_box">
<ul>
<li><a href="#">当季主题11111111111111111111111111111111111111111</a></li>
<li><a href="#">当季主题22222222222222222222222222222222222222222</a></li>
<li><a href="#">当季主题33333333333333333333333333333333333333333</a></li>
<li><a href="#">当季主题44444444444444444444444444444444444444444</a></li>
<li><a href="#">当季主题55555555555555555555555555555555555555555</a></li>
</ul>
</div>
var NewsSlide = {
InitNewsSlide : function(){
var that = this;
that.newsSlideData = {
liArr : [],
height : parseInt($(".news_box li").css("height")),
index : 1
};
$(".news_box ul li").each(function(){
that.newsSlideData.liArr.push("<li>" + $(this).html() + "</li>");
});
that.InitNewsSlideInterval();
$(".news_box ul li").live("mouseover",function(){
that.clearNewsSlideInterval();
});
$(".news_box ul li").live("mouseout",function(){
that.InitNewsSlideInterval();
});
},
InitNewsSlideInterval : function(){
var that = this;
var to = 2000;
that.newsSlideInterval = setInterval(function(){
that.slideNewsSlide();
},to);
},
clearNewsSlideInterval : function(){
var that = this;
if (that.newsSlideInterval){
clearInterval(that.newsSlideInterval);
that.newsSlideInterval = null;
}
},
slideNewsSlide : function(){
var speed = 600;
var top = this.newsSlideData.height * (-1);
$(".news_box ul").append(this.newsSlideData.liArr[this.newsSlideData.index - 1]);
this.newsSlideData.index += 1;
this.newsSlideData.index >= this.newsSlideData.liArr.length && (this.newsSlideData.index = 1);
//top == (this.newsSlideData.liArr.length - 1) * this.newsSlideData.height * (-1) && (top = 0);
$(".news_box li").eq(0).animate({"margin-top" : top + "px"},speed,function(){
$(this).remove();
});
}
}；
20、js点击复制文字和图片
1 |
<textarea name="inquiryContact1" id="inquiryContact1" rows="15" cols="60" readonly="readonly"></textarea> |
2 |
<div id="inquiryInfoDIV" style="display:none"> |
3 |
<s:property value="inquiryContact" escape="false"/> |
02 |
function copyContact(){ |
03 |
var contat = document.getElementById("inquiryContact1").value; |
04 |
window.clipboardData.setData('text', contat); |
05 |
if(window.clipboardData.getData('text')==''){ |
07 |
alert("复制失败，请手动Ctrl+C快捷键复制！"); |
01 |
var oPopup = window.createPopup(); |
02 |
function ButtonClick(div) |
04 |
//var div = document.getElementById('divId'); |
05 |
div.contentEditable = 'true'; |
07 |
if (document.body.createControlRange) { |
08 |
controlRange = document.body.createControlRange(); |
09 |
controlRange.addElement(div); |
10 |
controlRange.execCommand('Copy'); |
12 |
div.contentEditable = 'false'; |
2 |
<img src="F:/2012070518474964.jpg" onclick="ButtonClick(this)"> |
21、简单模板解析小插件
01 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
02 |
"http://www.w3.org/TR/html4/loose.dtd"> |
05 |
<meta charset="utf-8"> |
07 |
<script type="text/javascript"> |
08 |
var Template = function(tpl,data){ |
09 |
this.tpl = typeof tpl != "undefined" ? tpl : ''; |
10 |
this.data = typeof data != "undefined" ? data : null; |
15 |
this.create = function(tpl){ |
16 |
typeof tpl != "undefined" && (this.tpl = tpl); |
17 |
var _rgExp = /{(.*?)}/g; |
18 |
this.filds = this.tpl.match(_rgExp); |
19 |
for(var i=0; i < this.filds.length; i++){ |
20 |
this.filds[i] = this.filds[i]; |
25 |
this.append = function(data){ |
26 |
typeof data != "undefined" && (this.data = data); |
27 |
if(parseInt(this.data.length) > 0){ |
29 |
for(var i=0; i < this.data.length; i++){ |
30 |
this.str = this.filds[i] && this.str.replace(this.filds[i],this.data[i]); |
32 |
}else if(typeof this.data == "object"){ |
34 |
for(var i=0; i < this.filds.length; i++){ |
35 |
var _fild = this.filds[i].replace("{","").replace("}",""); |
36 |
this.str = this.data[_fild] && this.str.replace(this.filds[i],this.data[_fild]); |
42 |
this.tpl && this.create(); |
43 |
this.data && this.append(); |
47 |
var tpl = "hello,this is{字段1}and{字段2}!"; |
49 |
"字段1" : "---测试数据1---", |
52 |
var data2 = ["---测试数据2---","---测试数据2---"]; |
53 |
var data3 = ["---测试数据3---","---测试数据3---"]; |
54 |
var data4 = ["---测试数据4---","---测试数据4---"]; |
57 |
var template1 = new Template(tpl,data1); |
58 |
var template2 = new Template(tpl,data2); |
59 |
var template3 = new Template(); |
60 |
template3.create(tpl); |
61 |
template3.append(data3); |
62 |
var template4 = new Template(tpl); |
63 |
template4.append(data4); |
66 |
document.write("参数为json数据 : " + template1.str); |
67 |
document.write("<br> 参数为array数据 : " + template2.str); |
68 |
document.write("<br> 利用内置create 和 append方法生成字符串 : " + template3.str); |
69 |
document.write("<br> 利用内置append方法生成字符串 : " + template4.str); |
22、JS调用打印机
第一种方法：指定不打印区域
使用CSS，定义一个.noprint的class，将不打印的内容放入这个class内。
详细如下：
<style media=print type="text/css">
.noprint{visibility:hidden}
</style>
要打印的内容。哈哈！
<p class="noprint">将不打印的代码放在这里。</p>
<a href="javascrīpt:window.print()" target="_self">打印</a>
第二种方法：指定打印区域
把要打印的内容放入一个 span或div，然后通过一个函数打印。
<span id='div1'>把要打印的内容放这里</span>
<p>所有内容</p>
<div id="div2">div2的内容</div>
<a href="javascrīpt:printme()" target="_self">打印</a>
<scrīpt language="javascrīpt">
function printme()
{
document.body.innerHTML=document.getElementById('div1').innerHTML+'<br/>'+document.getElementById('div2').innerHTML;
window.print();
}
</scrīpt>
如果要打印的只是整个页面中的一小部分，就最好采用第二种方法。
第三种方法：如果要打印的页面排版和原web页面相差很大，采用此种方法。
点打印按钮弹出新窗口，把需要打印的内容显示到新窗口中，在新窗口中调用window.print()方法，然后自动关闭新窗口。
1、控制"纵打"、 横打”和“页面的边距。
（1）
<script defer>function SetPrintSettings() {// -- advanced featuresfactory.printing.SetMarginMeasure(2) // measure margins in inchesfactory.SetPageRange(false, 1, 3) // need pages from 1 to 3factory.printing.printer = "HP DeskJet 870C"factory.printing.copies = 2factory.printing.collate = truefactory.printing.paperSize = "A4"factory.printing.paperSource = "Manual feed"
// -- basic featuresfactory.printing.header = "This is MeadCo"factory.printing.footer = "Advanced Printing by ScriptX"factory.printing.portrait = falsefactory.printing.leftMargin = 1.0factory.printing.topMargin = 1.0factory.printing.rightMargin = 1.0factory.printing.bottomMargin = 1.0}</script>
（2）
<script language="javascript">function printsetup(){// 打印页面设置wb.execwb(8,1);}function printpreview(){// 打印页面预览wb.execwb(7,1);}
function printit(){if (confirm('确定打印吗？')) {wb.execwb(6,6)}}</script></head><body><OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height=0 id=wb name=wb width=0></OBJECT><input type=button name=button_print value="打印" onclick="javascript:printit()"><input type=button name=button_setup value="打印页面设置" onclick="javascript:printsetup();"><input type=button name=button_show value="打印预览" onclick="javascript:printpreview();"><input type=button name=button_fh value="关闭" onclick="javascript:window.close();">
------------------------------------------------
关于这个组件还有其他的用法，列举如下：
WebBrowser.ExecWB(1,1) 打开
Web.ExecWB(2,1) 关闭现在所有的IE窗口，并打开一个新窗口
Web.ExecWB(4,1) 保存网页
Web.ExecWB(6,1) 打印
Web.ExecWB(7,1) 打印预览
Web.ExecWB(8,1) 打印页面设置
Web.ExecWB(10,1) 查看页面属性
Web.ExecWB(15,1) 好像是撤销，有待确认
Web.ExecWB(17,1) 全选
Web.ExecWB(22,1) 刷新
Web.ExecWB(45,1) 关闭窗体无提示
2、分页打印
<HTML>
<HEAD>
<STYLE>
P {page-break-after: always}
</STYLE>
</HEAD>
<BODY>
<%while not rs.eof%>
<P><%=rs(0)%></P>
<%rs.movenext%>
<%wend%>
</BODY>
</HTML>
3、ASP页面打印时如何去掉页面底部的路径和顶端的页码编号
（1）ie的文件-〉页面设置-〉讲里面的页眉和页脚里面的东西都去掉，打印就不出来了。
（2）
<HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT="YC"><script language="VBScript">dim hkey_root,hkey_path,hkey_keyhkey_root="HKEY_CURRENT_USER"hkey_path="\Software\Microsoft\Internet Explorer\PageSetup"'//设置网页打印的页眉页脚为空function pagesetup_null()on error resume nextSet RegWsh = CreateObject("WScript.Shell")hkey_key="\header" RegWsh.RegWrite hkey_root+hkey_path+hkey_key,""hkey_key="\footer"RegWsh.RegWrite hkey_root+hkey_path+hkey_key,""end function'//设置网页打印的页眉页脚为默认值function pagesetup_default()on error resume nextSet RegWsh = CreateObject("WScript.Shell")hkey_key="\header" RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"&w&b页码，&p/&P"hkey_key="\footer"RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"&u&b&d"end function</script></HEAD>
<BODY><br/><br/><br/><br/><br/><br/><p align=center><input type="button" value="清空页码" onclick=pagesetup_null()> <input type="button" value="恢复页吗"
onclick=pagesetup_default()><br/></p></BODY></HTML>
4、浮动帧打印
<SCRIPT LANGUAGE=javascript>
function button1_onclick() {
var odoc=window.iframe1.document;
var r=odoc.body.createTextRange();
var stxt=r.htmlText;
alert(stxt)
var pwin=window.open("","print");
pwin.document.write(stxt);
pwin.print();
}
</SCRIPT>
5、用FileSystem组件实现WEB应用中的本地特定打印
<script Language=VBScript>
function print_onclick //打印函数
dim label
label=document.printinfo.label.value //获得HTML页面的数据
set objfs=CreateObject("Scripting.FileSystemObject") //创建FileSystem组件对象的实例
set objprinter=objfs.CreateTextFile ("LPT1:",true) //建立与打印机的连接
objprinter.Writeline("__________________________________") //输出打印的内容
objprinter.Writeline("| |")
objprinter.Writeline("| 您打印的数据是："&label& " |”)
objprinter.Writeline("| |")
objprinter.Writeline("|_________________________________|")
objprinter.close //断开与打印机的连接
set objprinter=nothing
set objfs=nothing // 关闭FileSystem组件对象
end function
</script>
服务器端脚本：
<%………
set conn=server.CreateObject ("adodb.connection")
conn.Open "DSN=name;UID=XXXX;PWD=XXXX;"
set rs=server.CreateObject("adodb.recordset")
rs.Open(“select ……”),conn,1,1
……….%> //与数据库进行交互
HTML页面编码：
<HTML>
………
<FORM ID=printinfo NAME="printinfo" >
<INPUT type="button" value="打印>>" id=print name=print > //调用打印函数
<INPUT type=hidden id=text1 name=label value=<%=………%>> //保存服务器端传来的数据
………
</HTML>
第四种方法：去除页眉页脚
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>PcyearSeo</title>
<head>
<!--关键代码部分-->
<script language="javascript" type="text/javascript">
function doPrint() {
bdhtml=window.document.body.innerHTML;
sprnstr="<!--startprint-->";
eprnstr="<!--endprint-->";
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
}
var hkey_root,hkey_path,hkey_key
hkey_root="HKEY_CURRENT_USER"
hkey_path="\Software\Microsoft\Internet Explorer\PageSetup\ "
function pagesetup_null(){
try{
var RegWsh=new ActiveXObject("WScript.Shell")
hkey_key="header"
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"")
hkey_key="footer"
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"")
}catch(e){}
}
</script>
<!--关键代码部分-->
</HEAD>
<BODY>
<DIV align=center>
<p>
<!--关键代码部分-->
<OBJECT id="WebBrowser" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0" width="0" VIEWASTEXT></OBJECT>
<!--关键代码部分-->
您打印内容开始：
</p>
<p>
<!--startprint-->
<div style="border:1px solid #999999; width:auto;"><img src="2010723115926746.jpg"/></div>
<!--endprint-->
</p>
<p>打印的内容结束</p>
<p class="noprint">
<!--class="noprint"的作用是标示不需要打印的地方，任何一个标签的class属性都可以设置，用于
去除
不需要打印的地方-->
<INPUT onclick=javascript:doPrint() type=button value=打印 name=button_print />
</p>
</DIV>
</body>
</html>
23、通过js发送HTTP请求的几种方法
003 |
function GethttpAdapterRequest() |
005 |
//httpAdapter = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new httpAdapterRequest(); |
006 |
return window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(); |
009 |
//以Get方式发送请求,默认Content-Type为"text/xml; charset=gb2312" |
010 |
this.GetData = function(url) |
012 |
httpAdapter = GethttpAdapterRequest(); |
013 |
httpAdapter.Open("GET",url, false); |
014 |
httpAdapter.SetRequestHeader ("Content-Type","text/xml; charset=gb2312"); |
015 |
// httpAdapter.SetRequestHeader ("SOAPAction","http://tempuri.org/getStr"); |
016 |
httpAdapter.Send(context); |
020 |
//以POST方式发送请求,默认Content-Type为"application/x-www-form-urlencoded" |
021 |
this.PostData = function (url,context) |
023 |
httpAdapter = GethttpAdapterRequest(); |
024 |
httpAdapter.Open("POST",url, false); |
025 |
httpAdapter.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); |
026 |
// httpAdapter.SetRequestHeader ("SOAPAction","http://tempuri.org/getStr"); |
027 |
httpAdapter.Send(context); |
032 |
this.GetDataInAsync = function (url,callbackMethod) |
034 |
httpAdapter = GethttpAdapterRequest(); |
035 |
httpAdapter.Open("GET",url, true); |
036 |
httpAdapter.SetRequestHeader ("Content-Type","text/xml; charset=gb2312"); |
037 |
// httpAdapter.SetRequestHeader ("SOAPAction","http://tempuri.org/getStr"); |
038 |
httpAdapter.Send(context); |
039 |
httpAdapter.onreadystatechange = callbackMethod; |
042 |
this.PostDataInAsync = function (url,context,callbackMethod) |
044 |
httpAdapter = GethttpAdapterRequest(); |
045 |
httpAdapter.Open("POST",url, true); |
046 |
httpAdapter.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); |
047 |
// httpAdapter.SetRequestHeader ("SOAPAction","http://tempuri.org/getStr"); |
048 |
httpAdapter.Send(context); |
049 |
httpAdapter.onreadystatechange = callbackMethod; |
053 |
this.GetHost = function(url) |
056 |
var ArryHost=new Array(); |
057 |
if(typeof url == "undefined"|| null == url) |
059 |
url = window.location.href; |
061 |
var regex = /.*\:\/\/([^\/]*).*/; |
062 |
var match = url.match(regex); |
063 |
if(typeof match != "undefined" && null != match) |
065 |
ArryHost = match[1].split(/:/); |
072 |
this.GetLocalHost=function() |
074 |
return GetHost(document.URL); |
078 |
以前每次写AJAX请求总要写好几个JS函数，包括创建XMLHttpRequest对象、发送请求、成功后的处理函数和失败后的处理函数，下面的JS是把这些东西重构之后参数化的形式，然后放到一个单独的net.js里，后续使用只需引入这个JS，然后新建相应的对象和处理函数即可，可以直接拿来使用 |
080 |
var net = new Object(); |
081 |
net.READY_STATE_UNINITIALIZED = 0; |
082 |
net.READY_STATE_LOADING = 1; |
083 |
net.READY_STATE_LOADED = 2; |
084 |
net.READY_STATE_INTERACTIVE = 3; |
085 |
net.READY_STATE_COMPLETE = 4; |
091 |
net.ContentLoader = function(url,onload,onerror,method,params,contentType) |
095 |
this.onload = onload; |
096 |
this.onerror = (onerror) ? onerror : this.defaultError; |
097 |
this.loadXMLDoc(url,method,params,contentType); |
102 |
net.ContentLoader.prototype = { |
106 |
onReadyState: function(){ |
109 |
var ready = req.readyState; |
110 |
if(ready == net.READY_STATE_COMPLETE) |
112 |
var httpStatus = req.status; |
113 |
if(httpStatus == 200 || httpStatus == 0) |
114 |
this.onload.call(this); |
116 |
this.onerror.call(this); |
120 |
defaultError: function(){ |
122 |
alert("error in fetching data!! readyState=="+this.req.readyState+"\n\nstatus="+this.req.status |
123 |
+" \n\nheaders"+this.req.getAllResponseHeaders()); |
133 |
net.ContentLoader.prototype.loadXMLDoc = function(url,method,params,contentType){ |
135 |
if(!method) //如果没有传入method 参数值，则默认为GET |
139 |
if (!contentType && method=="POST"){ |
140 |
contentType="application/x-www-form-urlencoded;"; |
143 |
if(window.XMLHttpRequest) |
145 |
this.req = new XMLHttpRequest(); |
147 |
else if(window.ActiveXObject) |
149 |
this.req = new ActiveXObject("Microsoft.XMLHTTP"); |
157 |
this.req.onreadystatechange = function(){ |
158 |
loader.onReadyState.call(loader); |
160 |
this.req.open(method,url,true); |
163 |
this.req.setRequestHeader("Content-Type", contentType); |
165 |
this.req.send(params); |
169 |
this.onerror.call(this); |
176 |
代码内容不在做过多解释，如果你对JS面向对象和prototype不太熟悉的话请查阅相关书籍，下面演示如何使用: |
178 |
1. 把上述内容单独放到一个文件net.js（名称可自己定义) |
180 |
2. 在要使用的JSP页面上引入这个net.js 即 <script src="net.js"> </script> |
184 |
new net.ContentLoader("http://localhost:8080/CfgWeb/AppLogin.do",getMessage); |
186 |
其中第一个参数是请求的后台程序地址，第二个参数是请求成功后的处理函数（自己定义） |
188 |
后面的参数可省略，也可自己添加第三个参数（请求不成功的处理函数） |
190 |
function getMessage() |
194 |
alert(this.req.responseText); //简单的输出返回结果的字符串形式 |
196 |
alert(this.req.responseXML); //XML形式，后面就根据你的需要解析这个XML了 |
202 |
new net.ContentLoader("http://localhost:8080/CfgWeb/AppLogin.do?formAction=autoComplete",getMessage,null,"POST","&userName=wangwei&password=123" ); |
204 |
function getMessage() |
208 |
alert(this.req.responseText); //简单的输出返回结果的字符串形式 |
210 |
alert(this.req.responseXML); //XML形式，后面就根据你的需要解析这个XML了 |
24、JS读取本地文件及目录的方法
Javascript是网页制作中离不开的脚本语言，依靠它，一个网页的内容才生动活泼、富有朝气。但也许你还没有发现并应用它的一些更高级
的功能吧？比如，对文件和文件夹进行读、写和删除，就象在VB、VC等高级语言中经常做的工作一样。怎么样，你是否需要了解这方面的知
识？那就请跟我来，本文将详细描述如何使用Javascript语言进行文件操作。
一、功能实现核心：FileSystemObject 对象
其实，要在Javascript中实现文件操作功能，主要就是依靠FileSystemobject对象。在详细介绍FileSystemobject对象的各个属性和方法的
使用细节前，先来看看这个对象包括哪些相关对象和集合：
二、FileSystemObject编程三部曲
使用FileSystemObject 对象进行编程很简单，一般要经过如下的步骤： 创建FileSystemObject对象、应用相关方法、访问对象相关属性 。
(一)创建FileSystemObject对象
创建FileSystemObject对象的代码只要1行：
var fso = new ActiveXObject("Scripting.FileSystemObject");
上述代码执行后，fso就成为一个FileSystemObject对象实例。
(二)应用相关方法
创建对象实例后，就可以使用对象的相关方法了。比如，使用CreateTextFile方法创建一个文本文件：
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f1 = fso.createtextfile("c:\\myjstest.txt",true");
(三)访问对象相关属性
要访问对象的相关属性，首先要建立指向对象的句柄，这就要通过get系列方法实现：GetDrive负责获取驱动器信息，GetFolder负责获取文
件夹信息，GetFile负责获取文件信息。比如，指向下面的代码后，f1就成为指向文件c:\test.txt的句柄：
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f1 = fso.GetFile("c:\\myjstest.txt");
然后，使用f1访问对象的相关属性。比如：
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f1 = fso.GetFile("c:\\myjstest.txt");
alert("File last modified: " + f1.DateLastModified);
执行上面最后一句后，将显示c:\myjstest.txt的最后修改日期属性值。
但有一点请注意：对于使用create方法建立的对象，就不必再使用get方法获取对象句柄了，这时直接使用create方法建立的句柄名称就可以
：
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f1 = fso.createtextfile("c:\\myjstest.txt",true");
alert("File last modified: " + f1.DateLastModified);
三、操作驱动器(Drives)
使用FileSystemObject对象来编程操作驱动器(Drives)和文件夹(Folders)很容易，这就象在Windows文件浏览器中对文件进行交互操作一样
，比如：拷贝、移动文件夹，获取文件夹的属性。
(一)Drives对象属性
Drive对象负责收集系统中的物理或逻辑驱动器资源内容，它具有如下属性：
l TotalSize：以字节(byte)为单位计算的驱动器大小。
l AvailableSpace或FreeSpace：以字节(byte)为单位计算的驱动器可用空间。
l DriveLetter：驱动器字母。
l DriveType：驱动器类型，取值为：removable(移动介质)、fixed(固定介质)、network(网络资源)、CD-ROM或者RAM盘。
l SerialNumber：驱动器的系列码。
l FileSystem：所在驱动器的文件系统类型，取值为FAT、FAT32和NTFS。
l IsReady：驱动器是否可用。
l ShareName：共享名称。
l VolumeName：卷标名称。
l Path和RootFolder：驱动器的路径或者根目录名称。
(二)Drive对象操作例程
下面的例程显示驱动器C的卷标、总容量和可用空间等信息：
var fso, drv, s ="";
fso = new ActiveXObject("Scripting.FileSystemObject");
drv = fso.GetDrive(fso.GetDriveName("c:\\"));
s += "Drive C:" + " - ";
s += drv.VolumeName + "\n";
s += "Total Space: " + drv.TotalSize / 1024;
s += " Kb" + "\n";
s += "Free Space: " + drv.FreeSpace / 1024;
s += " Kb" + "\n";
alert(s);
四、操作文件夹(Folders)
涉及到文件夹的操作包括创建、移动、删除以及获取相关属性。
(一)Folder对象的相关属性和方法列表
(二)Folder对象操作例程
下面的例程将练习获取父文件夹名称、创建文件夹、删除文件夹、判断是否为根目录等操作：
var fso, fldr, s = "";
// 创建FileSystemObject对象实例
fso = new ActiveXObject("Scripting.FileSystemObject");
// 获取Drive 对象
fldr = fso.GetFolder("c:\\");
// 显示父目录名称
alert("Parent folder name is: " + fldr + "\n");
// 显示所在drive名称
alert("Contained on drive " + fldr.Drive + "\n");
// 判断是否为根目录
if (fldr.IsRootFolder)
alert("This is the root folder.");
else
alert("This folder isn't a root folder.");
alert("\n\n");
// 创建新文件夹
fso.CreateFolder ("C:\\Bogus");
alert("Created folder C:\\Bogus" + "\n");
// 显示文件夹基础名称，不包含路径名
alert("Basename = " + fso.GetBaseName("c:\\bogus") + "\n");
// 删除创建的文件夹
fso.DeleteFolder ("C:\\Bogus");
alert("Deleted folder C:\\Bogus" + "\n");
五、操作文件(Files)
对文件进行的操作要比以上介绍的驱动器(Drive)和文件夹(Folder)操作复杂些，基本上分为以下两个类别：对文件的创建、拷贝、移动、删
除操作和对文件内容的创建、添加、删除和读取操作。下面分别详细介绍。
(一)创建文件
一共有3种方法可用于创建一个空文本文件，这种文件有时候也叫做文本流(text stream)。
第一种是使用CreateTextFile方法。代码如下：
var fso, f1;
fso = new ActiveXObject("Scripting.FileSystemObject");
f1 = fso.CreateTextFile("c:\\testfile.txt", true);
第二种是使用OpenTextFile方法，并添加上ForWriting属性，ForWriting的值为2。代码如下：
var fso, ts;
var ForWriting= 2;
fso = new ActiveXObject("Scripting.FileSystemObject");
ts = fso.OpenTextFile("c:\\test.txt", ForWriting, true);
第三种是使用OpenAsTextStream方法，同样要设置好ForWriting属性。代码如下：
var fso, f1, ts;
var ForWriting = 2;
fso = new ActiveXObject("Scripting.FileSystemObject");
fso.CreateTextFile ("c:\\test1.txt");
f1 = fso.GetFile("c:\\test1.txt");
ts = f1.OpenAsTextStream(ForWriting, true);
(二)添加数据到文件
当文件被创建后，一般要按照“打开文件－>填写数据－>关闭文件”的步骤实现添加数据到文件的目的。
打开文件可使用FileSystemObject对象的OpenTextFile方法，或者使用File对象的OpenAsTextStream方法。
填写数据要使用到TextStream对象的Write、WriteLine或者WriteBlankLines方法。在同是实现写入数据的功能下，这3者的区别在于：Write
方法不在写入数据末尾添加新换行符，WriteLine方法要在最后添加一个新换行符，而WriteBlankLines则增加一个或者多个空行。
关闭文件可使用TextStream对象的Close方法。
(三)创建文件及添加数据例程
下面的代码将创建文件、添加数据、关闭文件几个步骤结合起来进行应用：
var fso, tf;
fso = new ActiveXObject("Scripting.FileSystemObject");
// 创建新文件
tf = fso.CreateTextFile("c:\\testfile.txt", true);
// 填写数据，并增加换行符
tf.WriteLine("Testing 1, 2, 3.") ;
// 增加3个空行
tf.WriteBlankLines(3);
// 填写一行，不带换行符
tf.Write ("This is a test.");
// 关闭文件
tf.Close();
(四)读取文件内容
从文本文件中读取数据要使用TextStream对象的Read、ReadLine或ReadAll 方法。Read方法用于读取文件中指定数量的字符；ReadLine方法
读取一整行，但不包括换行符；ReadAll方法则读取文本文件的整个内容。读取的内容存放于字符串变量中，用于显示、分析。在使用Read或
ReadLine方法读取文件内容时，如果要跳过一些部分，就要用到Skip或SkipLine方法。
下面的代码演示打开文件、填写数据，然后读取数据：
var fso, f1, ts, s;
var ForReading = 1;
fso = new ActiveXObject("Scripting.FileSystemObject");
// 创建文件
f1 = fso.CreateTextFile("c:\\testfile.txt", true);
// 填写一行数据
f1.WriteLine("Hello World");
f1.WriteBlankLines(1);
// 关闭文件
f1.Close();
// 打开文件
ts = fso.OpenTextFile("c:\\testfile.txt", ForReading);
// 读取文件一行内容到字符串
s = ts.ReadLine();
// 显示字符串信息
alert("File contents = ‘" + s + "‘");
// 关闭文件
ts.Close();
(五)移动、拷贝和删除文件
对于以上三种文件操作，Javascript各有两种对应的方法：File.Move 或 FileSystemObject.MoveFile用于移动文件；File.Copy 或
FileSystemObject.CopyFile用于拷贝文件；File.Delete 或 FileSystemObject.DeleteFile用于删除文件。
下面的代码演示在驱动器C的根目录下创建一个文本文件，填写一些内容，然后将文件移动到\tmp目录下，再在目录\temp下面建立一个文件
拷贝，最后删除这两个目录的文件：
var fso, f1, f2, s;
fso = new ActiveXObject("Scripting.FileSystemObject");
f1 = fso.CreateTextFile("c:\\testfile.txt", true);
// 写一行
f1.Write("This is a test.");
// 关闭文件
f1.Close();
// 获取C:\根目录下的文件句柄
f2 = fso.GetFile("c:\\testfile.txt");
// 移动文件到\tmp目录下
f2.Move ("c:\\tmp\\testfile.txt");
// 拷贝文件到\temp目录下
f2.Copy ("c:\\temp\\testfile.txt");
// 获取文件句柄
f2 = fso.GetFile("c:\\tmp\\testfile.txt");
f3 = fso.GetFile("c:\\temp\\testfile.txt");
// 删除文件
f2.Delete();
f3.Delete();
六、结 语
通过以上对FileSystemObject的各种对象、属性和方法的介绍和示例，相信你已经对如何使用JavaScript语言在页面中操作驱动器、文件和
文件夹有了清晰的认识。但是上述提及的例程都非常简单，要全面、灵活地掌握JavaScript文件操作技术，还需要大量的实践练习。而且还
有一点提醒大家，由于涉及到在浏览器中进行文件读写这样的高级操作，对于默认的浏览器安全级别而言，在代码运行前都会有一个信息提示。
