什麼是jquery異步加載

在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=&#39;text/javascript&#39; src=&#39;Jscript/xx.js&#39;/>

而透過全域函數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中文網其他相關文章！