站長資訊網(wǎng)
在jquery中，異步加載又稱為非阻塞加載，一般指在加載的同時(shí)執(zhí)行代碼；也就是當(dāng)瀏覽器在加載JQ或JS的同時(shí)，還會進(jìn)行后續(xù)頁面處理，這樣可以優(yōu)化腳本文件的加載，提高頁面的加載速度。jq中可用load()、getJSON()等方法來實(shí)現(xiàn)異步。
本教程操作環(huán)境：windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。
什么是jquery異步加載
異步加載又稱為非阻塞加載，當(dāng)瀏覽器在加載JQ或JS的同時(shí)，還會進(jìn)行后續(xù)頁面處理。
異步加載可以優(yōu)化腳本文件的加載，提高頁面的加載速度。
什么時(shí)候要使用異步加載？
-
定時(shí)任務(wù)：setTimeout，setInterval
-
網(wǎng)絡(luò)請求：ajax請求，動態(tài)加載
-
事件綁定
1個點(diǎn)擊事件被綁定了之后，我們是不知道瀏覽者什么時(shí)候會點(diǎn)擊這個按鈕的，如果瀏覽者一直不點(diǎn)擊按鈕，難道就不給他看頁面接下來的動作了嗎？顯然不可能，所以要之后的事情和綁定事件同時(shí)做，如果瀏覽者點(diǎn)擊了，那就按點(diǎn)擊之后的動作往下走，如果真的沒點(diǎn)擊，那他也不會因?yàn)檫^程被阻塞而導(dǎo)致看不到其他的畫面。
jQuery四種異步加載
在頁面開發(fā)的過程中，為了加快整體頁面打開的速度，對于某局部的數(shù)據(jù)采用異步讀取（Ajax技術(shù)）的方法獲取，這一方法的應(yīng)用極大地優(yōu)化了用戶的體驗(yàn)，優(yōu)化了頁面的執(zhí)行。
1、jQuery中的load()方法加載HTML
在傳統(tǒng)的JavaScript中，使用XMLHttpRequest對象異步加載數(shù)據(jù)；而在jQuery中，使用load()方法可以輕松實(shí)現(xiàn)獲取異步數(shù)據(jù)的功能。
load(url,[data],[callback]);
<script type="text/javascript"> $(function() { $("#Button1").click(function() { //按鈕點(diǎn)擊事件 $("#divTip").load("6-1b.html"); //load()方法加載數(shù)據(jù) }) }) </script>
<div class="clsShow">姓名：陶國榮<br />性別：男<br />郵箱：tao_guo1_rong@163.com</div>
2、jQuery中的全局函數(shù)getJSON()
雖然使用load()方法可以很快地加載數(shù)據(jù)到頁面中，但有時(shí)需要對獲取的數(shù)據(jù)進(jìn)行處理，如果將用load()方法獲取內(nèi)容進(jìn)行遍歷，也可以進(jìn)行數(shù)據(jù)處理，但必須先插入頁面中才能進(jìn)行，執(zhí)行效率不高。
JSON這種輕量級的數(shù)據(jù)交互格式很方便計(jì)算機(jī)的讀取，效率很高。在jQuery中專門有一個全局函數(shù)getJSON()，其調(diào)用的語法格式為：
$.getJSON(url,[data],[callback])
$(function() { $("#Button1").click(function() { //按鈕單擊事件 //打開文件，并通過回調(diào)函數(shù)處理獲取的數(shù)據(jù) $.getJSON("UserInfo.json", function(data) { $("#divTip").empty(); //先清空標(biāo)記中的內(nèi)容 var strHTML = ""; //初始化保存內(nèi)容變量 $.each(data, function(InfoIndex, Info) { //遍歷獲取的數(shù)據(jù) strHTML += "姓名：" + Info["name"] + "<br>"; strHTML += "性別：" + Info["sex"] + "<br>"; strHTML += "郵箱：" + Info["email"] + "<hr>"; }) $("#divTip").html(strHTML); //顯示處理后的數(shù)據(jù) }) }) })
其JSON文件格式為：
[ { "name": "陶國榮", "sex": "男", "email": "tao_guo_rong@163.com" }, { "name": "李建洲", "sex": "女", "email": "xiaoli@163.com" } ]
3、jQuery中的全局函數(shù)getScript()
在jQuery中，除通過全局函數(shù)getJSON格式的文件內(nèi)容外，還可以通過另外一個全局函數(shù)getScript()獲取JS文件內(nèi)容。基本設(shè)置如下：
<script type="text/javascript" src="Jscript/xx.js"></script>
動態(tài)設(shè)置為：
$("<script type='text/javascript' src='Jscript/xx.js'/>
而通過全局函數(shù)getScript()加載JS文件可以提高頁面的執(zhí)行效率
$(function() { $("#Button1").click(function() { //按鈕單擊事件 //打開已獲取返回?cái)?shù)據(jù)的文件 $.getScript("UserInfo.js"); }) })
其JS文件格式如下：
var data = [ { "name": "陶國榮", "sex": "男", "email": "tao_guo_rong@163.com" }, { "name": "李建洲", "sex": "女", "email": "xiaoli@163.com" } ]; var strHTML = ""; //初始化保存內(nèi)容變量 $.each(data, function() { //遍歷獲取的數(shù)據(jù) strHTML += "姓名：" + this["name"] + "<br>"; strHTML += "性別：" + this["sex"] + "<br>"; strHTML += "郵箱：" + this["email"] + "<hr>"; }) $("#divTip").html(strHTML); //顯示處理后的數(shù)據(jù)
4、JQuery中異步加載XML文檔
對XML格式的文檔，jQuery中使用全局函數(shù)$.get()進(jìn)行訪問，其語法格式為：
$.get(url,[data],[callback],[type])
參數(shù)url表示等待加載的數(shù)據(jù)地址，可選項(xiàng)[data]表示發(fā)送到服務(wù)器的數(shù)據(jù)，可選項(xiàng)[callback]表示加載成功時(shí)執(zhí)行的回調(diào)函數(shù)，可選項(xiàng)[type]參數(shù)表示返回?cái)?shù)據(jù)格式，可以為：HTMLXMLJSJSONTEXT等。
其調(diào)用方式與JSON類似：
$(function() { $("#Button1").click(function() { //按鈕單擊事件 //打開文件，并通過回調(diào)函數(shù)處理獲取的數(shù)據(jù) $.get("UserInfo.xml", function(data) { $("#divTip").empty(); //先清空標(biāo)記中的內(nèi)容 var strHTML = ""; //初始化保存內(nèi)容變量 $(data).find("User").each(function() { //遍歷獲取的數(shù)據(jù) var $strUser = $(this); strHTML += "姓名：" + $strUser.find("name").text() + "<br>"; strHTML += "性別：" + $strUser.find("sex").text() + "<br>"; strHTML += "郵箱：" + $strUser.find("email").text() + "<hr>"; }) $("#divTip").html(strHTML); //顯示處理后的數(shù)據(jù) }) }) })
XML格式：
<?xml version="1.0" encoding="utf-8" ?> <Info> <User id="1"> <name>陶國榮</name> <sex>男</sex> <email>tao_guo_rong@163.com</email> </User> <User id="2"> <name>李建洲</name> <sex>女</sex> <email>xiaoli@163.com</email> </User> </Info>
【推薦學(xué)習(xí)：jQuery視頻教程、web前端視頻】
