AJAX加载内容的利与弊 [英] Pros and cons of AJAX-loaded content

问题描述

这是pretty的很好的一个数据集由多个过滤器进行排序，并得到即时显示的结果，对吧？
我的解决方案，这样做将是 POST 的过滤器（读表）参数到一个名为页 dataset.php ，返回相应数据集的编译的HTML，也可以直接加载到我的网页。

那么，除了这是一个总的禁忌搜索引擎优化和人民有Javascript处于隐身状态，它表现为一个不错的解决方案，在未来轻松构建上。

不过，我还没有没有经验，认为这是一个好或坏的整体解决方案。什么应该是我们与一个AJAX获取数据集中的关注？

解决方案

  

那么，除了这是一个总的禁忌搜索引擎优化和人民有Javascript处于隐身状态，它表现为一个不错的解决方案，在未来轻松构建上。

并不是完全正确的，也有解决方案，有像 jQuery的Ajaxy 这使Ajax内容与历史跟踪，而其余的搜索引擎优化和禁用JavaScript友好。你可以看到这个动作我自己的网站 Balupton.com 证据它仍然是搜索引擎友好的这里

  

不过，我还没有没有经验，认为这是一个好或坏的整体解决方案。什么应该是我们与一个AJAX获取数据集中的关注？

有阿贾克斯加载的内容是伟大的用户体验，它的快速快，只是好看。如果你没有历史跟踪，然后它可以是相当混乱，特别是如果你正在使用AJAX加载的内容对于像网页，而不仅仅是边栏的内容 - 如，你脱离一致性的用户是有经验的。另一个需要注意的是谷歌Analytics（分析）跟踪的AJAX页面。这些缺点，那些你已经提到过，以及<一个href="http://stackoverflow.com/questions/3205900/how-to-show-ajax-requests-in-url/3276206#3276206">some其他人在其他地方提到都是相当困难的问题。

jQuery的Ajaxy（如前所述）提供了几乎所有的问题一个很好的高层次的解决方案，但可以是一个大的学习曲线，如果您还没有与控制器体系结构还没有，但大多数人得到它相当快。

例如，要启用改变了一套使用jQuery Ajaxy结果的历史记录可跟踪的AJAX内容，你实际上并不需要任何服务器端更改。你可以做这样的事情，在你的页面的底部： $（'＃结果ul.pages li.page一'）addClass（'ajaxy ajaxy-结果集）ajaxify（）;

然后设置一个Ajaxy控制器，像这样获取刚刚我们从响应所需的内容：

 结果：{
            选择：.ajaxy-结果集，
            要求：函数（）{
                //隐藏内容
                $ result.stop（真，真）.fadeOut（400）;
                //返回true
                返回true;
            }，
            回应：函数（）{
                // prepare
                VAR Ajaxy = $ .Ajaxy; VAR数据= this.State.Response.data; VAR状态= this.state;
                //显示内容
                变种行动=这一点;
                VAR newResultContent = $（data.content）.find（'＃结果）HTML（）。
                $ result.html（newResultContent）.fadeIn（400，函数（）{
                    Action.documentReady（$结果）;
                }）;
                //返回true
                返回true;
            }
        }
 

而这一切，有太多话，与上述大部分是刚刚复制并演示页粘贴code。当然，这不是理想的，因为我们返回的整个页面在我们的Ajax响应，但这无论如何都会发生。您可以随时升级脚本多一点，并使其所以在服务器端你检查了 XHR 头，如果它被设置（当时我们是一个Ajax请求），所以只呈现的结果的一部分，而不是一切。

It's pretty nice to sort a dataset by a number of filters and get the results shown instantly, right?
My solution to do this would be to POST the "filter" (read forms) parameters to a page called dataset.php, which returns the appropriate dataset in compiled HTML, that can be loaded straight into my page.

So, besides this being a total no-no for SEO and for people having deactivated Javascript, It appears as a quite good solution to easily build on in the future.

However, I have yet not the experience to consider it a good or bad overall solution. What should be our concerns with an AJAX-fetched dataset?

解决方案

So, besides this being a total no-no for SEO and for people having deactivated Javascript, It appears as a quite good solution to easily build on in the future.

Not entirely true, there are solutions out there like jQuery Ajaxy which enable AJAX content with History tracking while remaining SEO and javascript disabled friendly. You can see this in action on my own site Balupton.com with evidence it's still SEO friendly here.

However, I have yet not the experience to consider it a good or bad overall solution. What should be our concerns with an AJAX-fetched dataset?

Having Ajax loaded content is great for the user experience it's fast quick and just nice to look at. If you don't have history tracking then it can be quite confusing especially if you are using ajax loaded content for things like pages, rather than just sidebar content - as then you break away from consistency users are experienced with. Another caveat is Google Analytics tracking for the Ajax pages. These shortcomings, those you've already mentioned as well as some others mentioned elsewhere are all quite difficult problems.

jQuery Ajaxy (as mentioned before) provides a nice high level solution for nearly all the problems, but can be a big learning curve if you haven't worked with Controller architecture yet but most people get it rather quickly.

For instance, to enable history trackable ajax content for changing a set of results using jQuery Ajaxy, you don't actually need any server side changes. You could do something like this at the bottom of your page: $('#results ul.pages li.page a').addClass('ajaxy ajaxy-resultset').ajaxify();

Then setup a Ajaxy controller like so to fetch just the content we want from the response:

        'resultset': {
            selector: '.ajaxy-resultset',
            request: function(){
                // Hide Content
                $result.stop(true,true).fadeOut(400);
                // Return true
                return true;
            },
            response: function(){
                // Prepare
                var Ajaxy = $.Ajaxy; var data = this.State.Response.data; var state = this.state;
                // Show Content
                var Action = this;
                var newResultContent = $(data.content).find('#result').html();
                $result.html(newResultContent).fadeIn(400,function(){
                    Action.documentReady($result);
                });
                // Return true
                return true;
            }
        }

And that's all there is too it, with most of the above being just copy and pasted code from the demonstration page. Of course this isn't ideal as we return the entire page in our Ajax responses, but this would have to happen anyway. You can always upgrade the script a bit more, and make it so on the server side you check for the XHR header, and if that is set (then we are an ajax request) so just render the results part rather than everything.

这篇关于AJAX加载内容的利与弊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！