javascript异步加载几种形式总结

2013-01-23

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

javascript异步加载几种形式总结