Qu'est-ce que le chargement asynchrone jquery

Dans jquery, le chargement asynchrone est également appelé chargement non bloquant, ce qui fait généralement référence à l'exécution de code pendant le chargement ; c'est-à-dire que lorsque le navigateur charge JQ ou JS, il effectuera également un traitement de page ultérieur, ce qui peut optimiser le fichier de script. Chargement, améliore la vitesse de chargement de la page. Load(), getJSON() et d'autres méthodes peuvent être utilisées dans jq pour obtenir un fonctionnement asynchrone.

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.

Qu'est-ce que le chargement asynchrone jquery ?

Le chargement asynchrone est également appelé chargement non bloquant Lorsque le navigateur charge JQ ou JS, il effectuera également le traitement ultérieur des pages.

Le chargement asynchrone peut optimiser le chargement des fichiers de script et améliorer la vitesse de chargement de la page.

Quand dois-je utiliser le chargement asynchrone ?

• Tâches planifiées : setTimeout, setInterval

• Requêtes réseau : requêtes ajax, chargement dynamique

• Liaison d'événement

  Une fois qu'un événement de clic est lié, nous ne savons pas quand le spectateur le fera. ne clique pas sur le bouton, la prochaine action sur la page ne lui sera-t-elle pas présentée ? Évidemment, c'est impossible, donc les choses suivantes doivent être faites en même temps que l'événement de liaison. Si le spectateur clique, descendez en fonction de l'action après avoir cliqué. S'il n'y a vraiment pas de clic, alors il ne provoquera pas le processus. être bloquée. Aucune autre image n’est visible.

Quatre types de chargement asynchrone de jQuery

Dans le processus de développement de pages, afin d'accélérer la vitesse globale d'ouverture de la page, la lecture asynchrone (technologie Ajax) est utilisée pour obtenir certaines données locales. L'application de la méthode optimise grandement l'expérience utilisateur et optimise l'exécution de la page.

1. La méthode load() dans jQuery charge HTML

En JavaScript traditionnel, l'objet XMLHttpRequest est utilisé pour charger des données de manière asynchrone dans jQuery, la fonction d'obtention de données asynchrones peut être facilement réalisée en utilisant la fonction load() ; méthode.

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. La fonction globale getJSON() dans jQuery

Bien que l'utilisation de la méthode load() puisse charger rapidement des données dans la page, parfois l'obtenu les données doivent être traitées. Si la méthode load() est utilisée pour obtenir le contenu à parcourir, les données peuvent également être traitées, mais elles doivent d'abord être insérées dans la page et l'efficacité d'exécution n'est pas élevée.

JSON, un format léger d'interaction de données, est facile à lire par les ordinateurs et est très efficace. Il existe une fonction globale getJSON() dans jQuery. Le format de syntaxe de son appel est :

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

Le format de fichier JSON est :

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

3. La fonction globale getScript() dans jQuery

Dans jQuery, en plus de la fonction globale getJSON contenu du fichier au format, vous pouvez également obtenir le contenu du fichier JS via une autre fonction globale getScript(). Les paramètres de base sont les suivants :

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

Le paramètre dynamique est :

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

Le chargement de fichiers JS via la fonction globale getScript() peut améliorer l'efficacité d'exécution de la page

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

Le format de fichier JS est le suivant :

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. Chargement asynchrone de XML dans un document JQuery

Pour les documents au format XML, jQuery utilise la fonction globale $.get() pour accéder au document. Le format de syntaxe est :

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

Le paramètre url représente l'adresse des données en attente de chargement. Le facultatif [data] représente les données envoyées au serveur. Le facultatif [callback] représente la fonction de rappel exécutée lorsque le chargement est réussi. Le paramètre facultatif [type] représente le format des données de retour, qui peut être : HTMLXMLJSJSONTEXT wait.

La méthode d'appel est similaire à 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); //显示处理后的数据
                })
            })
        })

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

[Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!