在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]);
<script type="text/javascript">
$(function() {
$("#Button1").click(function() { //按钮点击事件
$("#divTip").load("6-1b.html"); //load()方法加载数据
})
})
</script><div class="clsShow">姓名：陶国荣<br />性别：男<br />邮箱：tao_guo1_rong@163.com</div>
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"] + "<br>";
strHTML += "性别：" + Info["sex"] + "<br>";
strHTML += "邮箱：" + Info["email"] + "<hr>";
})
$("#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檔案內容。基本設定如下：
<script type="text/javascript" src="Jscript/xx.js"></script>
動態設定為：
$("<script type='text/javascript' src='Jscript/xx.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"] + "<br>";
strHTML += "性别：" + this["sex"] + "<br>";
strHTML += "邮箱：" + this["email"] + "<hr>";
})
$("#divTip").html(strHTML); //显示处理后的数据4、JQuery中異步加載XML文檔
對XML格式的文檔，jQuery中使用全局函數$.get()進行訪問，其語法格式為：
$.get(url,[data],[callback],[type])
參數url表示等待載入的資料位址，可選項[data]表示傳送到伺服器的數據，可選項[callback]表示載入成功時執行的回呼函數，可選項[type]參數表示傳回資料格式，可以為：HTML\XML\JS\JSON\TEXT等。
其呼叫方式與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() + "<br>";
strHTML += "性别：" + $strUser.find("sex").text() + "<br>";
strHTML += "邮箱：" + $strUser.find("email").text() + "<hr>";
})
$("#divTip").html(strHTML); //显示处理后的数据
})
})
})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>【推薦學習：jQuery影片教學、web前端視頻】
以上是什麼是jquery異步加載的詳細內容。更多資訊請關注PHP中文網其他相關文章！
