在jquery中，异步加载又称为非阻塞加载，一般指在加载的同时执行代码；也就是当浏览器在加载JQ或JS的同时，还会进行后续页面处理，这样可以优化脚本文件的加载，提高页面的加载速度。jq中可用load()、getJSON()等方法来实现异步。
本教程操作环境：windows7系统、jquery1.10.2版本、Dell G3电脑。
什么是jquery异步加载
异步加载又称为非阻塞加载，当浏览器在加载JQ或JS的同时，还会进行后续页面处理。
异步加载可以优化脚本文件的加载，提高页面的加载速度。
什么时候要使用异步加载？
定时任务：setTimeout，setInterval
网络请求：ajax请求，动态加载
事件绑定
1个点击事件被绑定了之后，我们是不知道浏览者什么时候会点击这个按钮的，如果浏览者一直不点击按钮，难道就不给他看页面接下来的动作了吗？显然不可能，所以要之后的事情和绑定事件同时做，如果浏览者点击了，那就按点击之后的动作往下走，如果真的没点击，那他也不会因为过程被阻塞而导致看不到其他的画面。
jQuery四种异步加载
在页面开发的过程中，为了加快整体页面打开的速度，对于某局部的数据采用异步读取（Ajax技术）的方法获取，这一方法的应用极大地优化了用户的体验，优化了页面的执行。
1、jQuery中的load()方法加载HTML
在传统的JavaScript中，使用XMLHttpRequest对象异步加载数据；而在jQuery中，使用load()方法可以轻松实现获取异步数据的功能。
load(url,[data],[callback]);
$(function() { $("#Button1").click(function() { //按钮点击事件 $("#divTip").load("6-1b.html"); //load()方法加载数据 }) })
登录后复制
姓名：陶国荣
性别：男
邮箱：tao_guo1_rong@163.com
登录后复制
2、jQuery中的全局函数getJSON()
虽然使用load()方法可以很快地加载数据到页面中，但有时需要对获取的数据进行处理，如果将用load()方法获取内容进行遍历，也可以进行数据处理，但必须先插入页面中才能进行，执行效率不高。
JSON这种轻量级的数据交互格式很方便计算机的读取，效率很高。在jQuery中专门有一个全局函数getJSON()，其调用的语法格式为：
$.getJSON(url,[data],[callback])
$(function() { $("#Button1").click(function() { //按钮单击事件 //打开文件，并通过回调函数处理获取的数据 $.getJSON("UserInfo.json", function(data) { $("#divTip").empty(); //先清空标记中的内容 var strHTML = ""; //初始化保存内容变量 $.each(data, function(InfoIndex, Info) { //遍历获取的数据 strHTML += "姓名：" + Info["name"] + "
"; strHTML += "性别：" + Info["sex"] + "
"; strHTML += "邮箱：" + Info["email"] + "
"; }) $("#divTip").html(strHTML); //显示处理后的数据 }) }) })
登录后复制
其JSON文件格式为：
[ { "name": "陶国荣", "sex": "男", "email": "tao_guo_rong@163.com" }, { "name": "李建洲", "sex": "女", "email": "xiaoli@163.com" }]
登录后复制
3、jQuery中的全局函数getScript()
在jQuery中，除通过全局函数getJSON格式的文件内容外，还可以通过另外一个全局函数getScript()获取JS文件内容。基本设置如下：
登录后复制
动态设置为：
$("
登录后复制
而通过全局函数getScript()加载JS文件可以提高页面的执行效率
$(function() { $("#Button1").click(function() { //按钮单击事件 //打开已获取返回数据的文件 $.getScript("UserInfo.js"); }) })
登录后复制
其JS文件格式如下：
var data = [ { "name": "陶国荣", "sex": "男", "email": "tao_guo_rong@163.com" }, { "name": "李建洲", "sex": "女", "email": "xiaoli@163.com" }];var strHTML = ""; //初始化保存内容变量$.each(data, function() { //遍历获取的数据 strHTML += "姓名：" + this["name"] + "
"; strHTML += "性别：" + this["sex"] + "
"; strHTML += "邮箱：" + this["email"] + "
";})$("#divTip").html(strHTML); //显示处理后的数据
登录后复制
4、JQuery中异步加载XML文档
对XML格式的文档，jQuery中使用全局函数$.get()进行访问，其语法格式为：
$.get(url,[data],[callback],[type])
参数url表示等待加载的数据地址，可选项[data]表示发送到服务器的数据，可选项[callback]表示加载成功时执行的回调函数，可选项[type]参数表示返回数据格式，可以为：HTMLXMLJSJSONTEXT等。
其调用方式与JSON类似：
$(function() { $("#Button1").click(function() { //按钮单击事件 //打开文件，并通过回调函数处理获取的数据 $.get("UserInfo.xml", function(data) { $("#divTip").empty(); //先清空标记中的内容 var strHTML = ""; //初始化保存内容变量 $(data).find("User").each(function() { //遍历获取的数据 var $strUser = $(this); strHTML += "姓名：" + $strUser.find("name").text() + "
"; strHTML += "性别：" + $strUser.find("sex").text() + "
"; strHTML += "邮箱：" + $strUser.find("email").text() + "
"; }) $("#divTip").html(strHTML); //显示处理后的数据 }) }) })
登录后复制
XML格式：
陶国荣 男 tao_guo_rong@163.com 李建洲 女 xiaoli@163.com
登录后复制
【推荐学习：jQuery视频教程、web前端视频】
以上就是什么是jquery异步加载的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2930364.html
