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.
1. Die Methode „load()“ in jQuery lädt HTML
load(url,[data],[callback]); <script type="text/javascript">
$(function() {
$("#Button1").click(function() { //按钮点击事件
$("#divTip").load("6-1b.html"); //load()方法加载数据
})
})
</script>Nach dem Login kopieren2. Die globale Funktion getJSON() in jQuery<div class="clsShow">姓名：陶国荣<br />性别：男<br />邮箱：tao_guo1_rong@163.com</div>
Nach dem Login kopieren
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); //显示处理后的数据
})
})
})[
{
"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>
$("<script type='text/javascript' src='Jscript/xx.js'/> $(function() {
$("#Button1").click(function() { //按钮单击事件
//打开已获取返回数据的文件
$.getScript("UserInfo.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. 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 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-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!
![Grundlegende JavaScript-Syntax [dom|bom|es6 neue Syntax|jQuery|Datenvisualisierungs-Echarts]](https://img.php.cn/upload/course/000/000/068/6242bb730fb11708.png)
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
