让代码更简单

AJAX基础教程一

重要:本文最后更新于2018-11-25 23:33:43,某些文章具有时效性,若有错误或已失效,请在下方留言或联系代码狗

什么是AJAX:AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

AJAX – 创建 XMLHttpRequest 对象

创建 XMLHttpRequest 对象的语法:

复制
variable=new XMLHttpRequest();

老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:

复制
variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :

复制
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

XMLHttpRequest 对象用于和服务器交换数据。

如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

复制
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
方法 描述
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。

  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步)
send(string) 将请求发送到服务器。

  • string:仅用于 POST 请求

实例:(向服务器获取当前时间)

  1. 新建一个php文件,命名为ajaxtest1.php,代码如下:
    复制
    <?php
    echo "成功了!".gettime();
    function gettime(){
     date_default_timezone_set("Asia/Hong_Kong");
     $time=Date("Y-m-d H:i:s");
     return $time;
    }
    ?>
  2. 新建一个HTML网页,命名为ajaxreq.html,向服务器发送请求,代码如下:
    复制
    <html>
    <head><title>代码狗www.daimadog.org|AJAX基础教程一</title>
    <script type="text/javascript">
    function loadXMLDoc()
    {
     var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
     xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
     xmlhttp.onreadystatechange=function()
     {
     if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("ajaxq").innerHTML=xmlhttp.responseText;
     }
     }
     xmlhttp.open("POST","ajaxtest1.php",true);
     xmlhttp.send();
    }
    </script>
    </head>
    <body>
    <center>
    <button type="button" onclick="loadXMLDoc()">请求时间</button>
    <div id="ajaxq"></div>
     </center>
    </body>
    </html>
  3. 将上述两个文件上传至支持php的空间,即可查看效果。
    代码狗ajax教程

演示效果请看:

感觉很棒!可以赞赏支持我哟~

3 打赏

评论 (0)

登录后评论
QQ咨询 邮件咨询 狗哥推荐