Was ist asynchrones Laden von JQuery?

In JQuery wird das asynchrone Laden auch als nicht blockierendes Laden bezeichnet. Dies bezieht sich im Allgemeinen auf die Ausführung von Code während des Ladens. Das heißt, wenn der Browser JQ oder JS lädt, führt er auch eine nachfolgende Seitenverarbeitung durch, wodurch die Skriptdatei optimiert werden kann. Laden, Verbessern Sie die Ladegeschwindigkeit der Seite. Load (), getJSON () und andere Methoden können in jq verwendet werden, um Asynchronität zu erreichen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.

Was ist das asynchrone Laden von JQuery?

Asynchrones Laden wird auch als nicht blockierendes Laden bezeichnet. Wenn der Browser JQ oder JS lädt, führt er auch eine nachfolgende Seitenverarbeitung durch.

Asynchrones Laden kann das Laden von Skriptdateien optimieren und die Ladegeschwindigkeit der Seite verbessern.

Wann sollte ich asynchrones Laden verwenden? Geplante Aufgaben: setTimeout, setInterval Wenn der Benutzer nicht auf die Schaltfläche klickt, wird ihm nicht die nächste Aktion auf der Seite angezeigt? Offensichtlich ist dies nicht möglich, daher müssen die nächsten Schritte gleichzeitig mit dem Bindungsereignis ausgeführt werden. Wenn der Betrachter klickt, wird er entsprechend der Aktion nach dem Klicken heruntergefahren Es können keine weiteren Bilder angezeigt werden.

• Vier asynchrones Laden von jQuery
Um das Öffnen der gesamten Seite zu beschleunigen, wird asynchrones Lesen (Ajax-Technologie) verwendet, um bestimmte lokale Daten abzurufen Durch die Anwendung der Methode wird das Benutzererlebnis erheblich optimiert und die Ausführung der Seite optimiert.

• 1. Die Methode „load()“ in jQuery lädt HTML

In herkömmlichem JavaScript wird das XMLHttpRequest-Objekt zum asynchronen Laden von Daten verwendet. In jQuery kann die Funktion zum Abrufen asynchroner Daten einfach mit „load()“ implementiert werden. Verfahren.

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. Die globale Funktion getJSON() in jQuery

Obwohl die Methode „load()“ manchmal schnell Daten in die Seite laden kann Daten müssen verarbeitet werden, um den Inhalt für die Durchquerung abzurufen. Die Daten können ebenfalls verarbeitet werden, sie müssen jedoch zuerst in die Seite eingefügt werden, und die Ausführungseffizienz ist nicht hoch.

JSON, ein leichtes Dateninteraktionsformat, ist für Computer leicht zu lesen und sehr effizient. Es gibt eine globale Funktion getJSON() in jQuery. Das Syntaxformat ihres Aufrufs ist:

$.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); //显示处理后的数据
                })
            })
        })

Das JSON-Dateiformat ist:

[
  {
    "name": "陶国荣",
    "sex": "男",
    "email": "tao_guo_rong@163.com"
  },
  {
    "name": "李建洲",
    "sex": "女",
    "email": "xiaoli@163.com"
  }
]

3. Die globale Funktion getScript() in jQuery

In jQuery können Sie zusätzlich zur globalen Funktion getJSON-Formatdateiinhalte den JS-Dateiinhalt auch über eine andere globale Funktion getScript() abrufen. Die Grundeinstellungen lauten wie folgt:

<script type="text/javascript" src="Jscript/xx.js"></script>

Dynamische Einstellung ist:

$("<script type=&#39;text/javascript&#39; src=&#39;Jscript/xx.js&#39;/>

Das Laden von JS-Dateien über die globale Funktion getScript() kann die Ausführungseffizienz der Seite verbessern

 $(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开已获取返回数据的文件
                $.getScript("UserInfo.js");
            })
        })

Das JS-Dateiformat ist wie folgt:

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. Asynchrones Laden von XML im JQuery-Dokument

Für Dokumente im XML-Format verwendet jQuery die globale Funktion $.get(), um auf das Dokument zuzugreifen. Das Syntaxformat ist:

$.get(url,[data], [Rückruf], [Typ])

Die Parameter-URL stellt die Datenadresse dar, die auf das Laden wartet. Die optionalen [Daten] stellen die an den Server gesendeten Daten dar . Der optionale Parameter [Typ] stellt das Rückgabedatenformat dar, das sein kann: HTMLXMLJSJSONTEXT warten.

Die Aufrufmethode ähnelt 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-Format:

<?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>

[Empfohlenes Lernen:

jQuery-Video-Tutorial, Web-Frontend-Video

]

Das obige ist der detaillierte Inhalt vonWas ist asynchrones Laden von JQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!