AngularJS 路由和多视图之 hashchange

最新推荐文章于 2022-08-09 18:57:26 发布

美食花宴

最新推荐文章于 2022-08-09 18:57:26 发布

阅读量1.4k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/sun0789/article/details/53236927

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!------------------------------------------------------------------------------------------------>
    <!--路由
            一个应用由若个视图组合而成，
            根据不同的业务逻辑展示给用户不同的视图，
            路由是实现这一功能的关键。-->



    <!--Ajax五部曲

            注册事件

            当服务器回应我们了,我们想要执行什么逻辑
            使用open方法设置和服务器端交互的基本信息

            设置提交的网址,数据,post提交的一些额外内容
            设置发送的数据，开始和服务器端交互

            发送数据
            更新界面

            在注册的回调函数中,获取返回的数据,更新界面-->


    <!--实现单页面应用需要具备-->
    <!--a、只有一页面-->
    <!--b、链接使用锚点-->

    <!--在单一页面中
            通过hashchange事件监听到锚点的变化，
            实现为不同的锚点 不同的视图，
            单页面应用就是基于这一原理实现的。

        Route：
            AngularJS对这一实现原理进行了封装，
            将锚点的变化封装成路由（Route）,
            这是与后端路由的根本区别。-->

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>AngularJS 路由和多视图  之 hashchange </title>


   <style>
      body {
         padding: 0;
         margin: 0;
         background-color: #F7F7F7;
         font-family: Arial;
      }

      .wrapper {
         width: 980px;
         margin: 50px auto;
      }

      ul {
         padding: 0;
         margin: 0;
         overflow: hidden;
         list-style: none;
         background-color: #000;
         border-radius: 4px;
      }

      li {
         float: left;
         width: 120px;
         height: 40px;
         text-align: center;
         line-height: 40px;
         font-size: 18px;
      }

      li.active {
         background-color: #333;
      }

      li a {
         display: block;
         color: #FFF;
         text-decoration: none;
      }

      .content {
         margin-top: 30px;
         font-size: 24px;
         padding: 0 20px;
      }
   </style>
</head>
<body>

   <div class="wrapper">
      <!-- 导航菜单 -->
      <ul>
         <li class="active">
            <a href="#index">Index</a>
         </li>
         <li>
            <a href="#introduce">Introduce</a>
         </li>
         <li>
            <a href="#contact">Contact Us</a>
         </li>
      </ul>
      <!-- 内容 -->
      <div class="content">
         Index Page
      </div>
   </div>

    <h1>Ajax五步使用法:</h1>



    <script>
//




      // hashchange事件监听，当锚点发生改变时然后发送请求(执行后面的函数)
      window.addEventListener('hashchange', function () {


         var hash = location.hash;
          //获取hash值--->通过哈希值的变化来监听锚点是否改变

         hash = hash.slice(1);
         //slice方法截取#后面的元素--->把#去掉


         // 实例对象

         var xhr = new XMLHttpRequest;

            //new XMLHttpRequest   ajax第一步创建异步对象




         xhr.open('get', '10-01.php?hash=' + hash);
             // 发送数据给(php)--->将锚点做为参数传递给服务端（php）进处理

         xhr.send(null);


            //注册事件

            // 当一切准备好的时候
         xhr.onreadystatechange = function () {
            if(xhr.readyState == 4 && xhr.status == 200) {
               var result = xhr.responseText;
               //接收php返回的数据

               document.querySelector('.content').innerHTML = result;
               // 将返回结果添加到页面
            }
         }
      });

   </script>



    



    php文件部分
    <!--

    <?php


        $hash = $_GET['hash'];

        switch ($hash) {
            case 'index':
                echo '<h1>Index Page!</h1>';
    break;

    case 'introduce':
    echo '<h1>Introduce Page!</h1>';
    break;
    case 'contact':
    echo '<h1>Contact Us Page!</h1>';
    break;
    default:
    # code...
    break;
    }
    -->



    <!--------------------------------------------------------------------------------------------->

</body>
</html>