javascript异步加载几种方式总结 -

weilingfeng98

浏览: 265476 次
性别:
来自: 北京

最近访客更多访客>>

lehmann_ding

tuodou

4348426qq163

luoxiaohei

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

javascript异步加载几种方式总结

博客分类：

javascript

javascript

评价一个网站性能是否高效，除了后端程序的优化，前端性能也不能忽略，看了一些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>

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

分享到：

javascript异步获取script资源的实现方法 | telnet查看memcached运行参数说明

2012-12-26 19:42
浏览 10956
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript异步加载几种方式总结

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript异步加载几种方式总结

评论

发表评论

相关推荐

javascript正则学习

jquery制作tab标签的最简方式

javascript异步获取script资源的实现方法

javascript中Array对象几种方法总结

jquery总结

javascript禁止空格

javascript 经典片段

prototype属性

转:javascript共有静态方法，私有静态方法，特权方法的区别

jquery插件开发

javascript中prototype方法修改

javascript匹配正则

javascript集中创建事件方法

收藏一个牛人的blog,学习javascript可以去看看

15款jquery特效

javascript延迟加载外部js文件

window 添加多个onload方法

javascript中的隐藏的对象

[转载]Ext.extend的理解 javascript

javascript树

最近访客更多访客>>