AJAX demo——操作文本文件 [转载]
读取并更新文本文件
<script language="javascript">
//创建AJAX
function initxmlhttp()
{
var xmlhttp
try {
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp=false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp=false;
}
}
if (!xmlhttp && window.createRequest) {
try {
xmlhttp = window.createRequest();
} catch (e) {
xmlhttp=false;
}
}
return xmlhttp;
}
//从文本文件中读取文件并且显示
function readText()
{
var readButton=document.getElementById('read');
var showcontent=document.getElementById('content');
readButton.disabled="disabled";
showcontent.innerHTml='正在读取,Loading
..';
var xmlhttp=initxmlhttp();
var url="operation.php?action=read";
xmlhttp.open("GET",url,true);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
showcontent.innerHTML=xmlhttp.responseText;
readButton.disabled="";
document.getElementById('edit').disabled="";
}
}
xmlhttp.send(null);
}
//转换到编辑模式
function edit()
{
document.getElementById('edit').disabled="disabled";
var str='';
str+='<textarea name="textContent" cols="50" rows="8" id="textContent">';
str+='</textarea>';
document.getElementById('content').innerHTML=str;
document.getElementById('update').disabled="";
}
//更新数据到文本文件
function update()
{
var xmlhttp=initxmlhttp();
var url="operation.php?action=write";
var data="content="+document.all.textContent.value;
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send(data);
xmlhttp.onreadyStatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('content').innerHTML=xmlhttp.responseText;
document.getElementById('update').disabled="disabled";
}
}
}
</script>
<body>
<div class="main-box">
<div class="head-dark-box">AJAX demo——操作文本文件</div>
<div class="body-box">
<div class="tip-msg">一个简单的AJAX演示。主要功能有 ：<br />
1、读取文本文件并显示。<br />
2、更新文本文件。
</div>
<div class="alt-table" ><br />
<input id="read" name="read" type="button" class="button" value="读取" onclick="readText()" />
<input id="edit" disabled="disabled" name="edit" type="button" class="button" value="编辑" onclick="edit()" />
<input id="update" disabled="disabled" name="update" type="button" class="button" value="更新" onclick="update()" />
<div id="content" class="textbox-title"></div>
</div>
</div>
<div id="copyright" class="foot-sql">Copyright @ 2006 <a href="http://www.phpobject.net">www.phpobject.net</a>!</div>
</div>
</body>
<script language="javascript"> //创建AJAX function initxmlhttp() { 
var xmlhttp try { 
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp=false; } } if (!xmlhttp && typeof XMLHttpRequest!='undefined') { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp=false; } } if (!xmlhttp && window.createRequest) { try { xmlhttp = window.createRequest(); } catch (e) { xmlhttp=false; } } return xmlhttp; } //从文本文件中读取文件并且显示 function readText() { var readButton=document.getElementById('read'); var showcontent=document.getElementById('content'); readButton.disabled="disabled"; showcontent.innerHTml='正在读取,Loading..'; var xmlhttp=initxmlhttp(); var url="operation.php?action=read"; xmlhttp.open("GET",url,true); xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200) { showcontent.innerHTML=xmlhttp.responseText; readButton.disabled=""; document.getElementById('edit').disabled=""; } } xmlhttp.send(null); } //转换到编辑模式 function edit() { document.getElementById('edit').disabled="disabled"; var str=''; str+='<textarea name="textContent" cols="50" rows="8" id="textContent">'; str+='</textarea>'; document.getElementById('content').innerHTML=str; document.getElementById('update').disabled=""; } //更新数据到文本文件 function update() { var xmlhttp=initxmlhttp(); var url="operation.php?action=write"; var data="content="+document.all.textContent.value; xmlhttp.open("POST",url,true); xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlhttp.send(data); xmlhttp.onreadyStatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById('content').innerHTML=xmlhttp.responseText; document.getElementById('update').disabled="disabled"; } } } </script> <body> <div class="main-box"> <div class="head-dark-box">AJAX demo——操作文本文件</div> <div class="body-box"> <div class="tip-msg">一个简单的AJAX演示。主要功能有 ：<br /> 1、读取文本文件并显示。<br /> 2、更新文本文件。 </div> <div class="alt-table" ><br /> <input id="read" name="read" type="button" class="button" value="读取" onclick="readText()" /> <input id="edit" disabled="disabled" name="edit" type="button" class="button" value="编辑" onclick="edit()" /> <input id="update" disabled="disabled" name="update" type="button" class="button" value="更新" onclick="update()" /> <div id="content" class="textbox-title"></div> </div> </div> <div id="copyright" class="foot-sql">Copyright @ 2006 <a href="http://www.phpobject.net">www.phpobject.net</a>!</div> </div> </body> 
浙公网安备 33010602011771号