技術文章 » 什麼是jquery非同步載入

什麼是jquery非同步載入

2022-05-24 18:01:53

在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 />郵箱：[email protected]</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": "[email protected]"
  },
  {
    "name": "李建洲",
    "sex": "女",
    "email": "[email protected]"
  }
]

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": "[email protected]"
  },
  {
      "name": "李建洲",
      "sex": "女",
      "email": "[email protected]"
  }
];

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>[email protected]</email>
  </User>

  <User id="2">
    <name>李建洲</name>
    <sex>女</sex>
    <email>[email protected]</email>
  </User>
</Info>

【推薦學習：、】

以上就是什麼是jquery非同步載入的詳細內容，更多請關注TW511.COM其它相關文章！