weixin_33709364 2013-07-06 04:28 采纳率: 0%
浏览 31

关于jQuery Ajax代码的问题

Closed. This question needs details or clarity. It is not currently accepting answers. 
                </div>
            </div>
        </div>
                <hr class="my12 outline-none baw0 bb bc-powder-2">
            <div class="grid fw-nowrap fc-black-600">
                    <div class="grid--cell mr8">
                        <svg aria-hidden="true" class="svg-icon iconLightbulb" width="18" height="18" viewbox="0 0 18 18"><path d="M9.5.5a.5.5 0 0 0-1 0v.25a.5.5 0 0 0 1 0V.5zm5.6 2.1a.5.5 0 0 0-.7-.7l-.25.25a.5.5 0 0 0 .7.7l.25-.25zM1 7.5c0-.28.22-.5.5-.5H2a.5.5 0 0 1 0 1h-.5a.5.5 0 0 1-.5-.5zm14.5 0c0-.28.22-.5.5-.5h.5a.5.5 0 0 1 0 1H16a.5.5 0 0 1-.5-.5zM2.9 1.9c.2-.2.5-.2.7 0l.25.25a.5.5 0 1 1-.7.7L2.9 2.6a.5.5 0 0 1 0-.7z" fill-opacity=".4"></path><path opacity=".4" d="M7 16h4v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1z" fill="#3F3F3F"></path><path d="M15 8a6 6 0 0 1-3.5 5.46V14a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-.54A6 6 0 1 1 15 8zm-4.15-3.85a.5.5 0 0 0-.7.7l2 2a.5.5 0 0 0 .7-.7l-2-2z" fill="#FFC166"></path></svg>
                    </div>
                <div class="grid--cell lh-md">
                    <p class="mb0">
                        <b>Want to improve this question?</b> Add details and clarify the problem by <a href="/posts/17499649/edit">editing this post</a>.
                    </p>
                    <p class="mb0 mt6">Closed <span title="2013-07-06 14:14:35Z" class="relativetime">6 years ago</span>.</p>
                </div>
            </div>
    </aside>

<html>
<head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
    </script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#page1').click(function() {
            $('#content').load('one.html');
            return false;
        });
        $('#page2').click(function() {
            $('#content').load('two.html');
            return false;
        });     
    });
    </script>
</head>
<body>

<a href="#" id="page1">page 1</a> | <a href="#" id="page2">page 2</a>
<div id="content">
</div>
</body>
</html>

Above code is taken from here

Questions:

why this code is called "jquery ajax codes" since it is only using .load(), not .ajax()? I only know a litte bit about AJAX(Asynchronous JavaScript and XML), how could I change above codes to non-ajax, so I can see the difference between ajax codes and non-ajax codes? 

</div>
  • 写回答

1条回答 默认 最新

  • weixin_33735676 2013-07-06 04:32
    关注

    AJAX stands for "Asynchronous JavaScript and XML" meaning retrieving data from the server Asynchronously (after the page is loaded).. .load() does exactly that - this is why it is considered as ajax. I believe it even uses .ajax() behind the scenes.

    In order to avoid ajax I recommend load both files into containers in your site and only change their visibility using jquery.

    For example (using PHP however you can use any other server-side lang):

    HTML:

    <div id="content1" style="display:none;"><?php include 'one.html';?></div>
<div id="content2" style="display:none;"><?php include 'two.html';?></div>

    this will ofcourse load the content of the HTML pages synchronously. To avoid asynchronous calls you will have to include all the data on your HTML page.

    jQuery:

    $(document).ready(function() {
        $('#page1').click(function() {
            $('#content1').show();
            $('#content2').hide();
        });
        $('#page2').click(function() {
            $('#content2').show();
            $('#content1').hide();
        });     
    });

    I will elaborate more on the difference. When you use AJAX you don't have to load all the data to the page in advanced. Take the example of which one.html and two.html contained a very long HTML file.. let's say 500kb each. If you were to use the non AJAX method I offered, your user will have to wait until both were downloaded to see the page (1MB download). When you use the code as you wrote in the question, the loading time of the page is really really low because you only load the structure of the page and not the content. When the user clicks on one of the buttons you will load ONLY the relevant file - meaning 500kb - and you could also display a nice "loading" animation while the page loads. Essentially, this is the main difference - loading the entire data in advanced or loading only the relevant data when it is needed.

    A tip to improve your code in the question. after you .load() one of the pages, save the data somewhere so if the user clicks on the same button again you won't have to .load() again and just use the saved copy.

    评论

报告相同问题？

悬赏问题

  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作