优雅的 Javascript 降级 - 外部源文件

Question

对于精通 JS 的程序员来说，这是一个简单的问题。

我正在构建一个使用 jQuery AJAX 方法的 Wordpress 站点，当单击顶部导航链接时重新加载我的整个内容区域，或者当单击侧边栏导航链接时重新加载我的主要内容区域。我想确保仅在用户的浏览器支持 JavaScript 时才发出 AJAX 调用。我在这里和其他网站上找到了一些参考资料，这些资料说通过在外部引用我的脚本，未配备 JavaScript 的浏览器会简单地忽略所有 JS 文件。这是准确的吗？我考虑过使用php：

$my_arr = get_browser(null,true);if $my_arr['javascript'] == 1 {
  echo '<script type="text/javascript" src="path/to/script"';
}

我想要的 UX 是如果启用 JS，则触发 AJAX 调用；如果 JS 被禁用，只需将用户发送到他们请求的页面。

例如

    <?php
    /**
     * The template for displaying all pages.
     *
     $ajxy = $_GET['ajxy'];
     if(!is_null($ajxy)) {
       $ajax_code = $ajxy; 
     }

     if(!$ajxy) {
       get_header(); 
     }
     ?>

    <?php if(!$ajax_code) { ?>
            <div id="primary">
              <div id="content" role="main">
                 <div class="container_12" id="contentWrapper">
    <?php } ?>

                   <div id="contentContainer" <?php if($ajax_code) { echo 'class="ajxn"'; } ?>>

    <?php while ( have_posts() ) : the_post(); ?>

                    <div class="grid_8" id="contentGrid">
                        <?php 
                            get_template_part( 'content', 'page' ); 
                        ?>
                    </div>
                        <?php get_sidebar(); ?>

                    <?php endwhile; // end of the loop. ?>
                    </div>

                <?php if(!$ajax_code) { ?>
                </div>
                </div><!-- #content -->
            </div><!-- #primary -->
            <?php } ?>

    <!---My Ajax Loading Script -->
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/ajxy.js"></script><!---My Ajax Loading Script -->

    <?php 
    if(!$ajxy) {
        get_footer(); 
    }
    ?>

和脚本：

    function ajxnOff(list, ajxnCode, wrapper, container) {
        jQuery(list).click(function(e) {
            e.preventDefault();

            var $lnkGoz = jQuery(this).attr("href");

            var $lnkGozAjx = $lnkGoz + '?ajxy=' + ajxnCode;
            var $ajxyContainer = wrapper;
            var $ajxyCurThing = container;

            $ajxyCurThing.fadeOut(400, function() {
                    $ajxyContainer.html('<div id="loaderA"></div>');
                    jQuery("div#loaderA").fadeIn(400);
                    jQuery.ajax({
                        url: $lnkGozAjx,
                        success: function(data) {
                                jQuery("div#loaderA").delay(2000).fadeOut(400, function() {
                                    $ajxyContainer.html(data);
                                    jQuery("div.ajxn").fadeIn(400);
                                    jQuery.remove("div#loaderA");
                                });
                        }
                    });

            });
        });
    }

    jQuery(document).ready(function() {
        ajxnOff(jQuery("ul#topNavList a"), 1, jQuery("div#contentWrapper"), jQuery("div#contentContainer"));
        ajxnOff(jQuery("ul#sidebarNavList a"), 2, jQuery("div#contentGrid"), jQuery("div#contentPageContainer"))
    }); 

我已经自学了大约 6 个月的代码，并且没有任何有关该主题的书籍，因此非常感谢这里专家的任何帮助。

Answer 1

这里是一个简单的模式来做不显眼的 ajax 导航并回退到非 ajax 链接。

在您的 HTML 中：

<a class="ajaxnav" href="page.html">Text</a>

在您的脚本中：

$(".ajaxnav").click(function(event) {
  event.preventDefault();
  // do ajax nav here; 
  // URL is in event.currentTarget.href, modify it however necessary
});

如果不支持 javascript，则脚本根本不会运行，您将获得具有有效 HREF 的标准网络锚点。如果支持 javascript，该脚本将使用您的 ajax 点击处理程序替换所有“ajaxnav”链接处理。很简单。

Answer 2

是的，如果用户的浏览器不支持 JS 或禁用了 JS，则脚本标签基本上会被忽略。无论如何，将它们包括在内并没有什么坏处，您只需要规划您的网站，以便在未使用它们时会发生什么。

就 AJAX 与页面重新加载而言，您只需像没有 AJAX 一样对您的网站进行编码，即所有链接都应该有适当的 href 属性指向它们应该去的地方。如果启用了 JS，您可以通过其 onclick 处理程序将 AJAX 附加到链接，并通过从处理点击事件的任何函数返回 false 来阻止默认操作。