站长论坛

标题: AJAX demo――操作文本文件 [打印本页]

作者: ajax 时间: 2007-9-14 22:38
标题: AJAX demo――操作文本文件
为明天的讲座准备的一个简单AJAX演示demo。

  读取并更新文本文件。

  地址：http://www.phpobject.net/demo/ajax/


JS代码

<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>

后台代码operation.php：

<?
header("Cache-Control: no-cache, must-revalidate");
header('Content-type: text/html;charset=utf-8');
if(strip_tags($_GET['action'])=='read')
{
//读取文件
echo nl2br(file_get_contents("demo.txt"));
}else{
//写入文件
$content=$_POST['content'];
file_put_contents('demo.txt',$content);
echo nl2br(file_get_contents("demo.txt"));
}
?>

欢迎光临站长论坛 (http://tzlink.com/bbs/)