Question

我正在评估jQuery插件，以便在任何地方使用AJAX创建Drupal 7站点。我一直在使用ajaxy。但似乎没有积极维护。

我找到的两种可能的解决方案是pjax和djax。您对这些插件有什么经验？

您知道哪些其他插件可以执行类似的功能？非常重要的功能是SEO友好性（最好使用pushState，因此不使用散列。散列用作不支持的浏览器的后备。）。并且还必须非常灵活，因为它必须与Drupal的HTML结构一起推卸。

Answer 1

Drupal提供了自己的AJAX framework can easily be used to ajaxify links。您无法将任何JavaScript代码编写为many AJAX commands are already provided。解决方案是SEO友好。链接在其路径中使用nojs元素输出，然后在框架使用时由ajax替换。

有关API使用的信息，请参阅AJAX Example，AJAX Graceful Degradation和AJAX Commands示例模块。

Answer 2

使用pjax，很容易实现和SEO友好。对于不受支持的浏览器，主要是在IE 10之下，它只是回退到默认的浏览器行为（没有任何工作）。

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

您可以在pjax HERE找到更多信息。

既然您提到使用Drupal，您可能会发现this article有帮助。

Answer 3

由于你使用的是PHP和jQuery，最好的选择是我的项目，phery http://phery-php-ajax.net，它是积极维护的，而且我在过去的两年里一直在改进它。

通过使用视图，您可以在单独的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();
}
//...

替代pjax / djax和ajaxy

3 个答案: