最简单的Ajax入门例程

最新推荐文章于 2024-08-23 10:40:56 发布

hijack-x

最新推荐文章于 2024-08-23 10:40:56 发布

阅读量5.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：入门例子相关文章标签： ajax xmlhttprequest javascript html

本文链接：https://blog.youkuaiyun.com/lixianlin/article/details/5001923

入门例子相关专栏收录该内容

13 篇文章

订阅专栏

<?php
if (isset($_GET['do']) && $_GET['do'] === 'ajax') {
    exit("{msg:'Hello World!'}");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ajax Demo</title>
    <script type="text/javascript">
      function readyStateChangeHandle(xhr) {
        // 利用eval将string转成object
        eval('var result=' + xhr.responseText);
        window.alert(result.msg);
      }
      function Ajax() {
        // 创建异步请求对象
        var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
        // 判断一下对象是否创建成功
        if (!xhr) {
          return false;
        }
        // 设置异步请求处理函数(这里用匿名函数而不直接用定义好的函数,主要是方便传递参数)
        xhr.onreadystatechange = function () {
          // readyState有4种状态(0=UNINITIALIZED,1=LOADING,2=LOADED,3=INTERACTIVE,4=COMPLETED)
          if (xhr.readyState == 4) {
            // status实际上就是HTTP状态码
            if (xhr.status == 200) {
              readyStateChangeHandle(xhr);
            }
          }
        };
        xhr.open("GET", "?do=ajax", true);
        xhr.send(null);
      }
    </script>
  </head>
  <body>
    <button type="button" onclick="Ajax();">Ajax</button>
  </body>
</html>