jquery異步加載的概念是什么

 
        $(function() {
            $("#Button1").click(function() { //按鈕點(diǎn)擊事件
                $("#divTip").load("6-1b.html"); //load()方法加載數(shù)據(jù)
            })
        })
    

姓名：陶國(guó)榮性別：男郵箱：tao_guo1_rong@163.com

2、jQuery中的全局函數(shù)getJSON()

雖然使用load()方法可以很快地加載數(shù)據(jù)到頁(yè)面中，但有時(shí)需要對(duì)獲取的數(shù)據(jù)進(jìn)行處理，如果將用load()方法獲取內(nèi)容進(jìn)行遍歷，也可以進(jìn)行數(shù)據(jù)處理，但必須先插入頁(yè)面中才能進(jìn)行，執(zhí)行效率不高。

JSON這種輕量級(jí)的數(shù)據(jù)交互格式很方便計(jì)算機(jī)的讀取，效率很高。在jQuery中專門(mén)有一個(gè)全局函數(shù)getJSON()，其調(diào)用的語(yǔ)法格式為：

$.getJSON(url,[data],[callback])

   $(function() {
            $("#Button1").click(function() { //按鈕單擊事件
                //打開(kāi)文件，并通過(guò)回調(diào)函數(shù)處理獲取的數(shù)據(jù)
                $.getJSON("UserInfo.json", function(data) {
                    $("#divTip").empty(); //先清空標(biāo)記中的內(nèi)容
                    var strHTML = ""; //初始化保存內(nèi)容變量
                    $.each(data, function(InfoIndex, Info) { //遍歷獲取的數(shù)據(jù)
                        strHTML += "姓名：" + Info["name"] + "
";
                        strHTML += "性別：" + Info["sex"] + "
";
                        strHTML += "郵箱：" + Info["email"] + "
";
                    })
                    $("#divTip").html(strHTML); //顯示處理后的數(shù)據(jù)
                })
            })
        })

其JSON文件格式為：

[
  {
    "name": "陶國(guó)榮",
    "sex": "男",
    "email": "tao_guo_rong@163.com"
  },
  {
    "name": "李建洲",
    "sex": "女",
    "email": "xiaoli@163.com"
  }
]

3、jQuery中的全局函數(shù)getScript()

在jQuery中，除通過(guò)全局函數(shù)getJSON格式的文件內(nèi)容外，還可以通過(guò)另外一個(gè)全局函數(shù)getScript()獲取JS文件內(nèi)容?；驹O(shè)置如下：

動(dòng)態(tài)設(shè)置為：

$("

而通過(guò)全局函數(shù)getScript()加載JS文件可以提高頁(yè)面的執(zhí)行效率

 $(function() {
            $("#Button1").click(function() { //按鈕單擊事件
                //打開(kāi)已獲取返回?cái)?shù)據(jù)的文件
                $.getScript("UserInfo.js");
            })
        })

其JS文件格式如下：

var data = [
  {
      "name": "陶國(guó)榮",
      "sex": "男",
      "email": "tao_guo_rong@163.com"
  },
  {
      "name": "李建洲",
      "sex": "女",
      "email": "xiaoli@163.com"
  }
];

var strHTML = ""; //初始化保存內(nèi)容變量
$.each(data, function() { //遍歷獲取的數(shù)據(jù)
    strHTML += "姓名：" + this["name"] + "
";
    strHTML += "性別：" + this["sex"] + "
";
    strHTML += "郵箱：" + this["email"] + "
";
})
$("#divTip").html(strHTML); //顯示處理后的數(shù)據(jù)

4、JQuery中異步加載XML文檔

對(duì)XML格式的文檔，jQuery中使用全局函數(shù)$.get()進(jìn)行訪問(wèn)，其語(yǔ)法格式為：

$.get(url,[data],[callback],[type])

參數(shù)url表示等待加載的數(shù)據(jù)地址，可選項(xiàng)[data]表示發(fā)送到服務(wù)器的數(shù)據(jù)，可選項(xiàng)[callback]表示加載成功時(shí)執(zhí)行的回調(diào)函數(shù)，可選項(xiàng)[type]參數(shù)表示返回?cái)?shù)據(jù)格式，可以為：HTML\XML\JS\JSON\TEXT等。

其調(diào)用方式與JSON類似：

 $(function() {
            $("#Button1").click(function() { //按鈕單擊事件
                //打開(kāi)文件，并通過(guò)回調(diào)函數(shù)處理獲取的數(shù)據(jù)
                $.get("UserInfo.xml", function(data) {
                    $("#divTip").empty(); //先清空標(biāo)記中的內(nèi)容
                    var strHTML = ""; //初始化保存內(nèi)容變量
                    $(data).find("User").each(function() { //遍歷獲取的數(shù)據(jù)
                        var $strUser = $(this);
                        strHTML += "姓名：" + $strUser.find("name").text() + "
";
                        strHTML += "性別：" + $strUser.find("sex").text() + "
";
                        strHTML += "郵箱：" + $strUser.find("email").text() + "
";
                    })
                    $("#divTip").html(strHTML); //顯示處理后的數(shù)據(jù)
                })
            })
        })

XML格式：

  
    陶國(guó)榮
    男
    tao_guo_rong@163.com
  

  
    李建洲
    女
    xiaoli@163.com
  

關(guān)于“jquery異步加載的概念是什么”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“jquery異步加載的概念是什么”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。