论坛风格切换切换到宽版
  • 3075阅读
  • 0回复

[分享]AJAX 简单实例 [复制链接]

上一主题 下一主题
离线voiphaozi
 

只看楼主 倒序阅读 使用道具 楼主  发表于: 2012-05-22
    AJAX技术说明:意思是不用刷新整个页面,采用JS脚本形式调用要得到的数据,也称局部刷新(我是这么理解的)
    以往普通方式可能需要刷新整个页面得到或从数据库中查询的数据,那么这样一来,所有经过查询数据库的数据都要重新读取一下,那么数据库的压力会很大,==

   先看下之前的普通页面
  如:
..................................................刷新......................
  1 .............
  2 .............
  一般用户要点下刷新 按键才能再次获取到数据。这样很不方便。 以下代码为不用点刷新就可以实现获取到数据(经供参考。也给自己留下笔记)
一:显示页面代码(也就是上面的普通这样的页面)  index.php  
  1. <script type="text/javascript" src="ajax.js"> //调用自己写的ajax文件
  2. </script>  
  3. <script language="javascript">
  4.    setInterval("funphpajx()",9000);   //9秒钟执行一遍JS 文件中的 funphpajx 方法
  5. </script>
  6. <a href="#" onclick="funphpajx()">刷新</a>
  7. <div id="xianshi"></div>        //div xianshi变量显示
二:ajax.js
    
  1. var xmlHttp;
  2. function S_xmlhttprequest()
  3. {
  4.     if(window.ActiveXObject)
  5.     {
  6.        xmlHttp =new ActiveXObject('Microsoft.XMLHTTP');
  7.     }else if(window.XMLHttpRequest)
  8.     {
  9.        xmlHttp=new     XMLHttpRequest();
  10.     }
  11. //以上是创建 各浏览器需要的对象
  12. }
  13. function funphpajx(url)
  14. {
  15.        S_xmlhttprequest();
  16.     xmlHttp.open("GET","for.php?id="+url,true);    //get 提交方式, 在for.php文件中处理数据
  17.     xmlHttp.onreadystatechange=byphp;
  18.     xmlHttp.send(null);
  19. }
  20. function byphp()
  21. {
  22.   var phpajx=    xmlHttp.responseText;
  23.   document.getElementById('xianshi').innerHTML=phpajx;
  24. }
三:for.php
  1. <?php
  2.   if(isset($_GET[id]))
  3.   {
  4.     echo "bbbbbbbbbbbbbbbbbbb";    //这里只是个测试数据,通常情况这里是从数据库中读取的
  5.   }
  6. ?>

    仅供参考。
评价一下你浏览此帖子的感受

精彩

感动

搞笑

开心

愤怒

无聊

灌水
快速回复
限100 字节
>> 支持Asterisk-help社区, 谢绝无意义字符回复
批量上传需要先选择文件,再选择上传
 
上一个 下一个