首页 | PHP资讯 | 技术专栏 | 资源共享 | PHP培训 | PHP职场 | 图书 | PHP ON WIN | PHP圈子
12
返回列表 回复 发帖

AJAX实例学习手记

feifengxlq

Rank: 8Rank: 8

第一颗象牙
1# 跳转到 » 倒序看帖
打印
tT
发表于 2006-2-27 17:00 | 只看该作者

AJAX实例学习手记

作者：feifengxlq
Email:feifengxlq@sohu.com
日期：2006-2-27
参考：Using the XML HTTP Request object  ，xmlhttp手册

1、由于不同的浏览器对XMLHTTP的支持的不同，所以在创建新的 XMLHttpRequest 对象的时候，需要对浏览器进行判定。
  xmlhttp.js的代码：
  1. var xmlhttp
  2. /*@cc_on @*/
  3. /*@if (@_jscript_version >= 5)
  4.   try {
  5.   xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  6. } catch (e) {
  7.   try {
  8.     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  9.   } catch (E) {
  10.    xmlhttp=false;
  11.   }
  12. }
  13. @else
  14. xmlhttp=false
  15. @end @*/
  16. if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  17.         try {
  18.                 xmlhttp = new XMLHttpRequest();
  19.         } catch (e) {
  20.                 xmlhttp=false;
  21.         }
  22. }
  23. if (!xmlhttp && window.createRequest) {
  24.         try {
  25.                 xmlhttp = window.createRequest();
  26.         } catch (e) {
  27.                 xmlhttp=false;
  28.         }
  29. }
复制代码


2、使用XMLHTTP发送各种reuqest
    包括GET,POST,HEADER等等，xmlhttp发送request的原理，详见前面我转贴的文章http://www.phpchina.cn/bbs/viewthread.php?tid=2727&extra=page%3D1

  test.html代码：
  1. <style type="text/css">
  2. <!--
  3. .style1 {color: #FF0000}
  4. -->
  5. </style>
  6. <body>
  7. <script src="xmlhttp.js" type="text/javascript"></script>
  8. <script type="text/javascript">
  9. function RSchange() {
  10. if (xmlhttp.readyState==4) {
  11.   document.getElementById('content').innerHTML=xmlhttp.responseText
  12. }
  13. }
  14. function go() {
  15. if (xmlhttp) {
  16.   d=document
  17.   xmlhttp.open("GET", "test.txt",true);
  18.   xmlhttp.onreadystatechange=RSchange
  19.   xmlhttp.send(null)
  20. }
  21. }
  22. function headgo()
  23. {
  24.   if(xmlhttp){
  25.     xmlhttp.open("HEAD",'test.html',true);
  26.         xmlhttp.onreadystatechange=function(){
  27.            if(xmlhttp.readyState==4)
  28.            {
  29.               alert(xmlhttp.getallResponseHeaders())
  30.            }
  31.         }
  32.         xmlhttp.send(null)
  33.   }
  34. }
  35. function testurl()
  36. {
  37.   if(xmlhttp){
  38.     xmlhttp.open("HEAD",document.getElementById('url').value,true);
  39.         xmlhttp.onreadystatechange=function(){
  40.           if(xmlhttp.readyState==4)
  41.           {
  42.             if(xmlhttp.status==200) document.getElementById('content3').innerHTML='Url Exist';
  43.                 else if(xmlhttp.status==404) document.getElementById('content3').innerHTML='this url does not Exist';
  44.                 else document.getElementById('content3').innerHTML='the return xmlhttp.status:'+xmlhttp.status;
  45.           }
  46.         }
  47.         xmlhttp.send(null)
  48.   }
  49. }
  50. </script>
  51. The content will appear between here
  52. <div id=content> </div> and here.<button onclick="go()">Do it</button>
  53. <hr>
  54. Header test!<br>
  55. <button onclick="headgo()">header test</button>
  56. <hr>
  57. Does a url exist?<br>
  58. <input name="url" type="text" id="url" value="http://www.scut.edu.cn"><div class="style1" id=content3> </div>
  59. <br>
  60. <button onclick="testurl()">test a url</button>
复制代码


3、AJAX与php的简单交互实例
test.php
  1. <?
  2. $a=$_GET['a'];
  3. $b=$_GET['b'];
  4. if(is_numeric($a) && is_numeric($b))
  5. {
  6.   $total=$a+$b;
  7. }else{
  8.    $a='';
  9.    $b='';
  10.    $total='';
  11. }
  12. if($total<>'')
  13. {
  14.   echo $total;
  15. }else{
  16. ?>
  17. <script src="xmlhttp.js" type="text/javascript"></script>
  18. <script>
  19. function calc() {
  20.   frm=document.forms[0]
  21.   url="test.php?a="+frm.elements['a'].value+"&b="+frm.elements['b'].value
  22.   xmlhttp.open("GET",url,true);
  23.   xmlhttp.onreadystatechange=function() {
  24.    if (xmlhttp.readyState==4) {
  25.     document.forms[0].elements['total'].value=xmlhttp.responseText
  26.    }
  27.   }
  28. xmlhttp.send(null)
  29. return false
  30. }
  31. </script>
  32. <form action="test.php" method="get" onsubmit="return calc()">
  33. <input type=text name=a value="<?=$a?>"> + <input type=text name=b value="<?=$b?>"> = <input type=text name=total value="<?=$total?>">
  34. <input type=submit value="Calculate">
  35. </form>
  36. <?
  37. }
  38. ?>
复制代码

  
先写到这里，以后继续～^_^
收藏 分享
PHP面对对象
征友情链接

seraph

Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30

宝象座骑第一颗象牙第二颗象牙第三颗象牙第四颗象牙
2#
发表于 2006-2-27 23:30 | 只看该作者
个人对Ajax不想碰。。。不知道是好还是坏，呵呵。

不过还是顶下。加精。
Stay Hungry. Stay Foolish.

TOP

feifengxlq

Rank: 8Rank: 8

第一颗象牙
3#
发表于 2006-2-28 09:32 | 只看该作者
原帖由 seraph 于 2006-2-27 23:30 发表
个人对Ajax不想碰。。。不知道是好还是坏，呵呵。

不过还是顶下。加精。


感觉蛮好用的～

附上xmlhttp手册吧
附件: 您需要登录才可以下载或查看附件。没有帐号？注册
PHP面对对象
征友情链接

TOP

feifengxlq

Rank: 8Rank: 8

第一颗象牙
4#
发表于 2006-2-28 12:36 | 只看该作者

AJAX实例二

实现数据无刷新的写入文本文件

主文件xmlhttp.html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5. <title>xmlhttp</title>
  6. </head>
  7. <script language="javascript">
  8. function initxmlhttp()
  9. {
  10.   var xmlhttp
  11.   try {
  12.     xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  13.    } catch (e) {
  14.      try {
  15.         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  16.      } catch (E) {
  17.         xmlhttp=false;
  18.      }
  19.   }
  20. if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  21.         try {
  22.                 xmlhttp = new XMLHttpRequest();
  23.         } catch (e) {
  24.                 xmlhttp=false;
  25.         }
  26. }
  27. if (!xmlhttp && window.createRequest) {
  28.         try {
  29.                 xmlhttp = window.createRequest();
  30.         } catch (e) {
  31.                 xmlhttp=false;
  32.         }
  33. }
  34.   return xmlhttp;
  35. }

  37. function readcontent()
  38. {  
  39.   var xmlhttp=initxmlhttp();
  40.   var showcontent=document.getElementById("showcontent");
  41.   var url="readfile.php";
  42.   xmlhttp.open("GET",url,true);
  43.   xmlhttp.setRequestHeader("Cache-Control","no-cache");
  44.   xmlhttp.onreadystatechange=function(){
  45.      if(xmlhttp.readyState==4 && xmlhttp.status==200)
  46.          {
  47.             showcontent.innerHTML=xmlhttp.responseText;
  48.          }
  49.   }
  50.   xmlhttp.send(null);
  51. }
  52. function writecontent()
  53. {
  54.   var xmlhttp=initxmlhttp();
  55.   var content=document.forms[0].content.value;
  56.   var showcontent=document.getElementById("showcontent");
  57.   var url="writefile.php";
  58.   var poststr="content="+content;
  59.   
  60.   xmlhttp.open("POST",url,true);
  61.   xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  62.   xmlhttp.send(poststr);
  63.   
  64.   xmlhttp.onreadyStatechange=function(){
  65.      if(xmlhttp.readyState==4 && xmlhttp.status==200)
  66.          {
  67.             showcontent.innerHTML=xmlhttp.responseText;
  68.          }
  69.   }
  70. }
  71. </script>
  72. <body>
  73. <hr>
  74. <p>AJAX的测试</p>
  75. <p>
  76. <form>
  77.   <textarea name="content" cols="50" rows="10" id="content">
  78. </textarea>
  79.   <br>
  80.   <input type="button" name="Submit" value="读取文本文件数据" onClick="readcontent()">
  81.   <input type="button" name="Submit2" value="将数据写入文本文件" onClick="writecontent()"><br>
  82.    </form><div id="showcontent"></div>
  83. </p>
  84. <hr>
  85. </body>
  86. </html>
复制代码


readfile.php
  1. <?
  2. header ("Cache-Control: no-cache, must-revalidate");
  3. echo file_get_contents("test.txt");
  4. ?>
复制代码


writefile.php
  1. <?
  2. file_put_contents('test.txt',$_POST['content']);
  3. echo $_POST['content'];
  4. ?>
复制代码



test.txt
  1. this is a ajax example in test.txt
复制代码



所有代码在win xp+php5.1 + apache 2.054 下通过测试

[ 本帖最后由 feifengxlq 于 2006-2-28 12:40 编辑 ]
PHP面对对象
征友情链接

TOP

Phzzy

Rank: 8Rank: 8

宝象座骑
5#
发表于 2006-3-8 03:36 | 只看该作者
看完了
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
还有别的头么?是不是发送 post 请求都是发送这个httpheader?
九阴真经,请同学们多加练习
360行，行行出Bug。

TOP

Phzzy

Rank: 8Rank: 8

宝象座骑
6#
发表于 2006-3-11 22:48 | 只看该作者
我差点要哭了
我寒
var poststr="content="+q;
我在做别的网页的时候
把前面的"content="去掉了.,结果半天取不到值
我差点疯了..
用你的就对,自己的就不对,后来我一行一行注释才发现这个.-.-"
九阴真经,请同学们多加练习
360行，行行出Bug。

TOP

feifengxlq

Rank: 8Rank: 8

第一颗象牙
7#
发表于 2006-3-11 23:32 | 只看该作者
^_^～～我直接用prototype啦
方便好用
PHP面对对象
征友情链接

TOP

feifengxlq

Rank: 8Rank: 8

第一颗象牙
8#
发表于 2006-3-11 23:34 | 只看该作者
原帖由 Phzzy 于 2006-3-8 03:36 发表
看完了
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
还有别的头么?是不是发送 post 请求都是发送这个httpheader?


还多着呢！所有header头都可以设置～
这个也可以不设置，但推荐设置
PHP面对对象
征友情链接

TOP

帅的不能再输啦

Rank: 8Rank: 8
9#
发表于 2006-3-22 08:36 | 只看该作者

bu cuo

学习AJAX是没错的。。。
超人天天坐地铁

TOP

wangyl

Rank: 26Rank: 26Rank: 26Rank: 26Rank: 26Rank: 26Rank: 26

第一颗象牙
10#
发表于 2007-4-20 23:25 | 只看该作者
var posttxt = "post="+value;
那我要post多个值要这么呢???
一山比一山高,想不落后就要超前!

TOP

12
返回列表