AJax技术

AJAX学习实例(二)

字号+ 作者:H5之家 来源:H5之家 2017-01-17 08:34 我要评论( )

AJAX学习实例(二)

 

   前面发了一些文章,主要是关于ajax的一些资料及小测试程序。这次我给出一个比较完整的AJAX实例,希望对感兴趣的人有所帮助,也希望能和大家一起交流切磋。
  AJAX实例:操作文本文件
  测试环境:win xp SP2操作系统,apache2.054服务器,php5.12,mysql 5.0 数据库(测试通过)
  注意事项:1、界面的CSS上我使用了Phzzy上传文件里面的那个,在此表示感谢!^_^
                 2、php版本低于5.1的,请自己写一个writefile.php文件(file_put_contents在php5以上才支持)
   
  一下我贴出并详细说明一些关键代码,源文件已经打包(见附件)。
  index.html
CODE:


//建立xmlhttp,由于不同浏览器支持不同的原因才这么复杂,具体可以参考我前面发布的"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;
}
//从readfile.php中_get到文本文件test.txt的数据
function readcontent()
{  
  var xmlhttp=initxmlhttp();
  var showcontent=document.getElementById("message");
  var url="readfile.php";
  xmlhttp.open("GET",url,true);
  xmlhttp.onreadystatechange=function(){
     if(xmlhttp.readyState==4 && xmlhttp.status==200)
         {
            showcontent.innerHTML=xmlhttp.responseText;
         }
  }
  xmlhttp.send(null);
}
//将数据_post到writefile.php以将数据写入test.txt
function writecontent()
{
  var xmlhttp=initxmlhttp();
  var content=document.forms[0].content.value;
  var url="writefile.php";
  var poststr="content="+content;
  
  xmlhttp.open("POST",url,true);
  xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  xmlhttp.send(poststr);
}
redefile.php

CODE:

 

 

 

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • ajax系列之用jQuery的ajax方法向服务器发出get和post请求

    ajax系列之用jQuery的ajax方法向服务器发出get和post请求

    2017-01-17 09:06

  • 学习Ajax好的网站

    学习Ajax好的网站

    2017-01-16 11:03

  • ajax学习的一点小问题

    ajax学习的一点小问题

    2017-01-16 11:00

  • AJAX中文参考手册

    AJAX中文参考手册

    2017-01-16 10:01

网友点评