在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]參數表示返回數據格式，可以為：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() + "<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前端視頻】