javascript异步加载几种方式总结
评价一个网站性能是否高效，除了后端程序的优化，前端性能也不能忽略，看了一些javascript异步加载资源的方式（基于jquery），贴出来给大家作为参考
jquery提供了异步加载信息的全局函数
1.$.getScript(URL,CALLBACK)
这个方法提供了异步加载script资源的方式，对于一些web网页内容比较多，需要按需加载，提供了很大的帮助，jquery1.2之后的这个方法可以跨域访问，看代码它是通过动态创建script，在加载成功后删除script节点，如何使用:
js/user.js代码
同其它全局函数相同，getscript()有一个回调函数，该函数在函数执行完成后返回,在jquery1.4.1 中这个方法只会加载一遍url，jquery1.7.1会加载多遍
2.$.getJson()提供访问同一个域中json数据
对应的user.json
URL表示请求的地址,data表示请求的参数,可选参数回调函数中执行操作
3.$("#div").load(URL selecter)该方法提供了异步获取html数据的方式,这个方法也不能跨域访问，在url后面可以指定异步请求的网页的哪些部分被加载到该div中,例子
index.jsp代码
这几种异步加载在一定程度上可以减少页面等待的时间，给用户提供更好的体验
jquery提供了异步加载信息的全局函数
1.$.getScript(URL,CALLBACK)
这个方法提供了异步加载script资源的方式，对于一些web网页内容比较多，需要按需加载，提供了很大的帮助，jquery1.2之后的这个方法可以跨域访问，看代码它是通过动态创建script，在加载成功后删除script节点，如何使用:
$.getScript("/js/user.js");
js/user.js代码
[
var data = {
"name": "a",
"sex": "男",
"email": "[email protected]"
},
{
"name": "b",
"sex": "女",
"email": "[email protected]"
}
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": "[email protected]"
},
{
"name": "b",
"sex": "女",
"email": "[email protected]"
}
]
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>
这几种异步加载在一定程度上可以减少页面等待的时间，给用户提供更好的体验