jquery - 替代 pjax/djax 和 ajaxy

Question

我正在评估 jQuery 插件，以便在各处使用 AJAX 制作 Drupal 7 站点。我一直在使用ajaxy。但它似乎并没有得到非常积极的维护。

我发现的两种可能的解决方案是pjax和djax。你对这些插件有什么体验？

您还知道哪些其他插件具有类似的功能？非常重要的特性是 SEO 友好性（最好使用 pushState，因此不使用散列。散列用作不支持的浏览器的后备。）。而且还必须非常灵活，因为它必须与 Drupal 的 HTML 结构配合使用。

Answer 1

Drupal 提供了它自己的AJAX 框架，可以很容易地用于ajaxify链接。您无需编写任何 JavaScript 代码，因为已经提供了许多AJAX 命令。该解决方案是 SEO 友好的。链接在其路径中输出一个元素，然后在框架使用时nojs替换为。ajax

有关 API 用法，请参阅AJAX 示例、AJAX 优雅降级和AJAX 命令示例模块。

Answer 2

使用 pjax，它易于实现且对 SEO 友好。对于不受支持的浏览器，主要是 IE 10 以下，它只是回退到默认浏览器行为（您无需任何工作）。

我已经在少数项目中成功使用了 pjax，并计划在更多项目中使用它。

您可以在此处找到有关 pjax 的更多信息。

既然您提到了您使用 Drupal，您可能会发现这篇文章很有帮助。

Answer 3

因为您使用的是 PHP 和 jQuery，所以最好的选择是我的项目phery http://phery-php-ajax.net，它得到了积极的维护，并且在过去的 2 年里我一直在改进它。

通过使用视图，您可以在单独的 ajax 视图中分割您的站点，或者通过 AJAX 使用完整的页面内容。它是 SEO 友好的，并且由于它使用事件委托，所有新元素都已经 ajaxified。它不强制使用历史 API 或哈希事件，您可以决定最适合您的功能。

为您的网站加载完整的 AJAX 内容将是（当然只有容器，不包括菜单、页脚等）

    var ever_pushed = false; // needed for chrome

    phery.view({
        '#container': {
            'exclude': ['/blog'], // exclude wordpress from it
            'beforeSend': function(){
                $('body,html').scrollTop(0); // go to the top
            },
            'render': function(html, data, passdata){
                var $this = $(this);
                nav_items.removeClass('current').filter('.' + data.controller).addClass('current'); // update the menu
                document.title = data.title; // set the document title

                /* Good browsers get history API */
                if (typeof passdata['popstate'] === 'undefined') {
                    window.history.pushState(data, data.title, data.url);
                    ever_pushed = true;
                }

                _gaq.push(["_trackPageview"]); // Google analytics

                $('#content')
                .find('>div')
                .animate({'opacity':0}, 375) // fadeout
                .promise()
                .done(function(){
                    $body.removeClass().addClass(data.body_class);
                    $this.html('').html(html);
                    on_reload(); // restart events that need to be bound on new elements
                    cufonize(true); //apply cufon
                    $('#content').find('>div').animate({'opacity':1}, 375); // fadein
                });
            }
        }
    });

    $(window).bind('popstate', function(e){
        if (!ever_pushed) {
            return;
        }
        phery.view('#container').navigate_to(document.location.toString(), null, {'popstate':true}); // back and forward history buttons
    });

相同代码的较小版本将是：

$(function(){
    var ever_pushed = false;
    phery.view({
        '#container': {
            'afterHtml': function(html, data, passdata){
                /* Good browsers get history API */
                if (typeof passdata['popstate'] === 'undefined') {
                    window.history.pushState(data, data.title, data.url);
                    ever_pushed = true;
                }

            }
        }
    });

    $(window).bind('popstate', function(e){
        if (!ever_pushed) {
            return;
        }
        phery.view('#container').navigate_to(document.location.toString(), null, {'popstate':true}); // back and forward history buttons
    });
});

在您的 PHP 方面，它将是：

function render_view($data, $params, $phery){
   return PheryResponse::factory()->render_view(views_get_view('all_projects')->execute_display('Block', array()));
}
//...
public function render($reset = FALSE){
   Phery::instance()->views(array(
     '#container' => array($this, 'render_view')
   ))->process();
}
//...