进行异步HTTP请求-这两者有什么区别？

Question

以下是加载Disqus评论的JavaScript代码（默认/官方版本）：

（CODE #1）

<script type="text/javascript">
    var disqus_shortname = 'paulund';

    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>

据我所见，该代码使用异步方式进行HTTP请求；但这不是重点。

问题在于，我需要对代码进行一些更改，以便在用户滚动到评论部分时仅加载评论，即按需加载。并且我有两种可行的方法可以实现。

（代码#2）

jQuery(document).ready(function($){
    $('#comments').waypoint(function () {

        var disqus_shortname = 'paulund';

        $(function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();

    }, { offset: '100%', triggerOnce: true });
});

(CODE #3)

（代码＃3）

jQuery(document).ready(function($){
    $('#comments').waypoint(function () {

        var disqus_shortname = 'paulund';

        $.ajax({
            type: "GET",
            url: "http://" + disqus_shortname + ".disqus.com/embed.js",
            dataType: "script",
            cache: true
        });

    }, { offset: '100%', triggerOnce: true });
});

问题：

1. 除了明显的我现在使用jQuery之外，代码#1和#2以及#1和#3有什么区别吗？我可能做错了什么，但完全没有注意到吗？

2. 为什么使用$.noConflict();启动代码#2和#3时不起作用？(毕竟我也在文档中发现了它。)

例如，这并没有做任何事情。(但在浏览器控制台中给出一个错误，"Uncaught TypeError: Cannot call method 'noConflict' of undefined."。)

$.noConflict();
jQuery(document).ready(function($){
    $('#comments').waypoint(function () {

        var disqus_shortname = 'paulund';

        $.ajax({
            type: "GET",
            url: "http://" + disqus_shortname + ".disqus.com/embed.js",
            dataType: "script",
            cache: true
        });

    }, { offset: '100%', triggerOnce: true });
});

- its_me

---

没有区别。我会使用方法3，甚至可能缩短到$.getScript。 - Kevin B

@KevinB 如果可能的话，请将其作为答案。另外，我不知何故错过了一个问题。请看一下更新后的问题。 - its_me

顺便说一下，你的第2点不需要在脚本元素创建代码周围使用$({...})()包装器 - 无论如何都不应该有$ ，因为在页面加载后你不需要一个文档就绪处理程序，但是在另一个函数中包含整个内容时，也不需要#1版本中的匿名函数。（可以推测，#1中立即调用的匿名函数是为了将dsq变量保持在全局范围之外。） - nnnnnn

@nnnnnn，所以您建议我像这样做：http://pastebin.com/8LUiHLf5或者像这样做：http://pastebin.com/6Uq3yKJG。对吗？ - its_me

如果你想使用#2，那么是的，我建议使用第一个pastebin示例。如果你想使用jQuery，那么我认为使用#3或者你的第二个pastebin示例更有意义。 - nnnnnn

Answer 1

没有区别。我会使用方法3。如果按照你的方式使用$.noConflict，它不应该产生任何影响。

Uncaught TypeError: Cannot call method 'noConflict' of undefined. 这个错误意味着你已经在其他地方使用过$.noConflict。

- Kevin B

---

文件里面没有太多内容。请看一下这个链接：http://pastebin.com/EJcj0hEb。我不确定是什么导致了 $.noConflict 引起的问题。 - its_me

是的，$.noConflict 不应该影响到其中的任何内容。jQuery(document).ready(function($){...}); 允许您在 ... 中安全地使用 $，而不会出现任何问题。 - Kevin B

(1) 你说得对。我以为我使用的CMS WordPress会加载默认的jQuery文件。但是我注意到它在最后有这个：jQuery.noConflict();。这解决了谜题。你能否把这个加入你的答案中，这样我就可以标记它了？ (2) 我认为使用getScript不是一个好主意，因为它将缓存设置为false。所以，我必须执行$.ajaxSetup({ cache: true });。相反，我打算坚持使用.ajax本身。如果我错了，请告诉我，如果没有，请在你的答案中添加一个注释，以便未来参考时完整。:)非常感谢！ - its_me

在这种情况下，就像我之前说的那样（只有你不介意的话），请在你的答案中也做出相应的注释。例如，getScript会将缓存设置为false，因此如果需要，您需要添加$.ajaxSetup({cache：true});来重新启用它。就像这样。 - its_me

考虑到缓存，我会使用你已经拥有的东西。我只需删除我的示例代码。 - Kevin B

Answer 2

这两种方法没有区别，都是异步加载脚本。您可以通过在控制台中查看DOM浏览器中呈现的脚本标签来自行验证。如果您需要同步加载它，可以使用第一种方法并设置dsq.async = false;。如果您依赖于在执行某些操作之前加载它，请考虑将相关操作添加到脚本的onload回调中，这样它将成为非阻塞操作，并使您的页面加载更快：

var disqus_shortname = 'paulund';

(function() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.onload = function(){ 
       // dependent code goes here
    }
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();

- Rob M.