替代pjax / djax和ajaxy

I was evaluating jQuery plugins to make a Drupal 7 site using AJAX everywhere. I have been using ajaxy. But it does not seem to be very actively maintained.

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

Two possible solutions I have found are pjax and djax. What are your experiences with those plugins?

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

What other plugins do you know that do similar functionality? Very important features are SEO friendliness (preferably using pushState so no hash is being used. Hashes are used as a fallback for not supported browsers.). And also has to be very flexible since it has to wirk with Drupal's HTML structure.

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

3 个解决方案

#1

Drupal provides its own AJAX framework that can easily be used to ajaxify links. You don't get to write any JavaScript code as many AJAX commands are already provided. The solution is SEO friendly. Links are outputted with a nojs element in their path which is then replaced by ajax when used by the framework.

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

See the AJAX Example, AJAX Graceful Degradation and AJAX Commands example modules for API usages.

有关API用法,请参阅AJAX示例,AJAX Graceful Degradation和AJAX命令示例模块。

#2

since you are using PHP and jQuery, the best bet would be my project, phery http://phery-php-ajax.net, it's actively maintained, and I've been improving it for the last 2 years.

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

through using views, you can either segment your site in individual ajax views, or use the full blown page content through AJAX. it's SEO friendly, and since it uses event delegation, all new elements are already ajaxified. It doesn't enforce to use history API or hash events, you may decide the best funcionality for you.

通过使用视图,您可以在单独的ajax视图中分割您的网站,或通过AJAX使用完整的页面内容。它是SEO友好的,因为它使用事件委托,所有新元素已经被ajaxified。它不强制使用历史API或哈希事件,您可以为您决定最佳功能。

a full blown AJAX loading content for your site would be (only the container, leaving out menus, footers, etc, of course)

一个完整的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
    });

a smaller version of the same code would be:

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

$(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
    });
});

in your PHP side, it would be:

在你的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();
}
//...

#3

Go with pjax, it is easy to implement and SEO Friendly. For unsupported browsers, mainly below IE 10 it simply fallsback to the default browser behavior (without any work on your part).

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

I have used pjax on a handful of projects successfully and plan to use it on many more.

我成功地在一些项目上使用了pjax,并计划在更多项目上使用它。

You can find more info on pjax HERE.

你可以在这里找到关于pjax的更多信息。

And since you mentioned your using Drupal, you may find this article helpful.

既然你提到你使用Drupal,你会发现这篇文章很有帮助。

#1