AJAX学习实例（二）

feifengxlq

作者：feifengxlq<http://blog.sohu.com/members/xlq521/>
时间：2006-3-2
邮箱：feifengxlq@sohu.com

   前面发了一些文章，主要是关于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

1. <script language="javascript">
   
2. //建立xmlhttp，由于不同浏览器支持不同的原因才这么复杂，具体可以参考我前面发布的"AJAX简介"一文
   
3. function initxmlhttp()
   
4. {
   
5.   var xmlhttp
   
6.   try {
   
7.     xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
   
8.    } catch (e) {
   
9.      try {
   
10.         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    
11.      } catch (E) {
    
12.         xmlhttp=false;
    
13.      }
    
14.   }
    
15. if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    
16.         try {
    
17.                 xmlhttp = new XMLHttpRequest();
    
18.         } catch (e) {
    
19.                 xmlhttp=false;
    
20.         }
    
21. }
    
22. if (!xmlhttp && window.createRequest) {
    
23.         try {
    
24.                 xmlhttp = window.createRequest();
    
25.         } catch (e) {
    
26.                 xmlhttp=false;
    
27.         }
    
28. }
    
29.   return xmlhttp;
    
30. }
    
31. //从readfile.php中_get到文本文件test.txt的数据
    
32. function readcontent()
    
33. {  
    
34.   var xmlhttp=initxmlhttp();
    
35.   var showcontent=document.getElementById("message");
    
36.   var url="readfile.php";
    
37.   xmlhttp.open("GET",url,true);
    
38.   xmlhttp.onreadystatechange=function(){
    
39.      if(xmlhttp.readyState==4 && xmlhttp.status==200)
    
40.          {
    
41.             showcontent.innerHTML=xmlhttp.responseText;
    
42.          }
    
43.   }
    
44.   xmlhttp.send(null);
    
45. }
    
46. //将数据_post到writefile.php以将数据写入test.txt
    
47. function writecontent()
    
48. {
    
49.   var xmlhttp=initxmlhttp();
    
50.   var content=document.forms[0].content.value;
    
51.   var url="writefile.php";
    
52.   var poststr="content="+content;
    
53.   
    
54.   xmlhttp.open("POST",url,true);
    
55.   xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    
56.   xmlhttp.send(poststr);
    
57. }
    
58. </script>
    

复制代码

  
redefile.php

1. <?
   
2. header ("Cache-Control: no-cache, must-revalidate");//这个是必须的，不然读出的数据将是以前的缓存数据
   
3. echo file_get_contents("test.txt");
   
4. ?>

复制代码

feifengxlq

自己顶上去～^_^

danielking

推荐用prototype.js
很不错的东西
不光是ajax,还可以简化很多脚本

http://ftp.besti.edu.cn/jsp/jchat.v1/index.jsp
我这个聊天室就是用了prototype.js

danielking

呵呵,弄错了,上面那个没有用prototype,不过也算一个ajax的例子吧
是这个用了
http://ftp.besti.edu.cn/jsp/jchat/index.jsp
但是这个才刚刚开始
我觉得里面的$('id')特别好用
当然还有别的好多优点.

feifengxlq

jsp+ajax的确是有比较完整的实例了～
去年我在CSDN上就看到国内有个做的相当成熟的～

Phzzy

顶一个，我刚才试过
FF不支持 xmlhttp.send(poststr); ?
你试试
用你这个例子用FF看，不能往文件里面写内容

Phzzy

IE 下返回 xmlhttp.readyState = 4
FF 下返回 xmlhttp.readyState = 1
其中
4 代表 完成 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
1 代表 初始化 对象已建立，尚未调用send方法

1. <script>
   
2. function initxmlhttp()
   
3. {
   
4.   var xmlhttp
   
5.   try {
   
6.     xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
   
7.    } catch (e) {
   
8.      try {
   
9.         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   
10.      } catch (E) {
    
11.         xmlhttp=false;
    
12.      }
    
13.   }
    
14. if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    
15.         try {
    
16.                 xmlhttp = new XMLHttpRequest();
    
17.         } catch (e) {
    
18.                 xmlhttp=false;
    
19.         }
    
20. }
    
21. if (!xmlhttp && window.createRequest) {
    
22.         try {
    
23.                 xmlhttp = window.createRequest();
    
24.         } catch (e) {
    
25.                 xmlhttp=false;
    
26.         }
    
27. }
    
28.   return xmlhttp;
    
29. }
    
30. 
    
31. function getresult()
    
32. {
    
33.   var xmlhttp=initxmlhttp();
    
34.   
    
35.   //var name=document.getElementById("name").value;
    
36.         var name = "22";
    
37.   var url="index.html";
    
38.   var poststr="name=" + name ;
    
39. 
    
40.   xmlhttp.open("POST",url,true);
    
41.   xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    
42.   xmlhttp.send(poststr);
    
43.   
    
44.   xmlhttp.onreadyStatechange=function(){
    
45.      if(xmlhttp.readyState==4 && xmlhttp.status==200)
    
46.          {
    
47.             resultdiv.innerHTML=xmlhttp.responseText;
    
48.          }
    
49.   }
    
50.   alert("xmlhttp.readyState = " + xmlhttp.readyState);
    
51. }
    
52. </script>
    
53. <input type="button" name="submit" value="分析结果" id="button" onclick="getresult();" />
    
54. 
    
55. <div id="resultdiv">1</div>

复制代码

softly

近来正在看ajax，很新奇

kinns

呵呵.
感觉AS也不错 :)

Phzzy

onreadyStatechange
该成小写
onreadystatechange
就可以了~晕