javascript异步加载几种方式总结

最新推荐文章于 2021-06-04 02:30:33 发布

原创最新推荐文章于 2021-06-04 02:30:33 发布 · 653 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

javascript 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了使用jQuery进行异步加载的几种方式，包括$.getScript()用于加载script资源，$.getJson()用于获取JSON数据，及$(#div).load()方法加载HTML片段。

评价一个网站性能是否高效，除了后端程序的优化，前端性能也不能忽略，看了一些javascript异步加载资源的方式（基于jquery），贴出来给大家作为参考
jquery提供了异步加载信息的全局函数
1.$.getScript(URL,CALLBACK)
这个方法提供了异步加载script资源的方式，对于一些web网页内容比较多，需要按需加载，提供了很大的帮助，jquery1.2之后的这个方法可以跨域访问，看代码它是通过动态创建script，在加载成功后删除script节点，如何使用:

$.getScript("/js/user.js");

js/user.js代码

[
    var data = {
        "name": "a",
        "sex": "男",
        "email": "a@163.com"
    },
    {
        "name": "b",
        "sex": "女",
        "email": "b@163.com"
    }
var strHTML = "";
                $.each(data, function(index,entry) { //遍历获取的数据
                    strHTML += "<p>编号：" + index + "<br>";
                    strHTML += "姓名：" + entry["name"] + "<br>";
                    strHTML += "性别：" + entry["sex"] + "<br>";
                    strHTML += "邮箱：" + entry["email"] + "</p><hr>";
                })
                $("#mydata").html(strHTML);
]

同其它全局函数相同，getscript()有一个回调函数，该函数在函数执行完成后返回,在jquery1.4.1 中这个方法只会加载一遍url，jquery1.7.1会加载多遍
2.$.getJson()提供访问同一个域中json数据

$("#ajaxLoadJson").click(function(){
            $.getJSON("js/user.json", function(data) {
                $("#divTip").empty(); //先清空标记中的内容
                var strHTML = ""; //初始化保存内容变量
                $.each(data, function(InfoIndex, Info) { //遍历获取的数据
                    strHTML += "姓名：" + Info["name"] + "<br>";
                    strHTML += "性别：" + Info["sex"] + "<br>";
                })
                $("#divTip").html(strHTML); //显示处理后的数据
            })
        });

对应的user.json

[
    {
        "name": "a",
        "sex": "男",
        "email": "a@163.com"
    },
    {
        "name": "b",
        "sex": "女",
        "email": "b@163.com"
    }
]

URL表示请求的地址,data表示请求的参数,可选参数回调函数中执行操作
3.$("#div").load(URL selecter)该方法提供了异步获取html数据的方式,这个方法也不能跨域访问，在url后面可以指定异步请求的网页的哪些部分被加载到该div中,例子

$("#ajaxLoadhtml").click(function() { //按钮点击事件
            $("#ajax").load("index.jsp h3"); //load()方法加载数据
        })

index.jsp代码

<html>
<head>
</head>
<body>
<h2>Hello World!</h2>
<h3>你好</h3>
</body>
</html>

这几种异步加载在一定程度上可以减少页面等待的时间，给用户提供更好的体验