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>