Apakah pemuatan tak segerak jquery

Dalam jquery, pemuatan tak segerak juga dipanggil pemuatan tidak menyekat, yang secara amnya merujuk kepada melaksanakan kod semasa memuatkan; iaitu, apabila penyemak imbas memuatkan JQ atau JS, ia juga akan melakukan pemprosesan halaman seterusnya, supaya Optimize; memuatkan fail skrip dan meningkatkan kelajuan memuatkan halaman. Load(), getJSON() dan kaedah lain boleh digunakan dalam jq untuk mencapai asynchronous.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

Apakah pemuatan asynchronous jquery

Pemuatan tak segerak juga dipanggil pemuatan tidak menyekat Apabila penyemak imbas memuatkan JQ atau JS, ia juga Pemprosesan halaman seterusnya akan dijalankan.

Pemuatan tak segerak boleh mengoptimumkan pemuatan fail skrip dan meningkatkan kelajuan pemuatan halaman.

Bilakah anda harus menggunakan pemuatan tak segerak?

• Tugas berjadual: setTimeout, setInterval

• Permintaan rangkaian: permintaan ajax, pemuatan dinamik

• Pengikatan Peristiwa

  Selepas acara klik terikat, kita tidak tahu bila penonton akan mengklik butang Jika penonton tidak pernah mengklik butang itu, bukankah kita harus menunjukkannya kepada dia? tindakan seterusnya pada halaman? Jelas sekali ia adalah mustahil, jadi perkara seterusnya mesti dilakukan pada masa yang sama dengan acara mengikat Jika penonton mengklik, kemudian turun mengikut tindakan selepas mengklik Jika benar-benar tiada klik, maka dia tidak akan menyebabkan proses itu disekat tiada imej lain dapat dilihat.

Empat jenis pemuatan asynchronous jQuery

Dalam proses pembangunan halaman, untuk mempercepatkan pembukaan halaman secara keseluruhan Kelajuan adalah tinggi, dan sebahagian data tertentu diperoleh menggunakan bacaan tak segerak (teknologi Ajax) Penggunaan kaedah ini sangat mengoptimumkan pengalaman pengguna dan mengoptimumkan pelaksanaan halaman.

1. Kaedah load() dalam jQuery memuatkan HTML

Dalam JavaScript tradisional, objek XMLHttpRequest digunakan untuk memuatkan data secara tidak segerak; fungsi mendapatkan data tak segerak boleh dilaksanakan dengan mudah menggunakan kaedah load().

load(url,[data],[panggilan balik]);

 <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 Fungsi global getJSON() dalam jQuery

Walaupun kaedah load() boleh digunakan untuk memuatkan data dengan cepat ke dalam halaman, kadangkala data yang diperolehi perlu diproses Jika kaedah load() digunakan untuk mendapatkan kandungan untuk traversal, pemprosesan data juga boleh dilakukan , tetapi ia mesti dilakukan terlebih dahulu Ia hanya boleh dilakukan dengan memasukkannya ke dalam halaman, dan kecekapan pelaksanaan tidak tinggi.

JSON, format interaksi data yang ringan, mudah dibaca oleh komputer dan sangat cekap. Terdapat fungsi global getJSON() dalam jQuery Format sintaks panggilannya ialah:

$.getJSON(url,[data],[panggilan balik])

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

JSONnya. Format fail ialah:

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

3 Fungsi global getScript() dalam jQuery

Dalam jQuery, sebagai tambahan kepada kandungan fail dalam format JSON melalui fungsi global getJSON, Anda juga boleh mendapatkan kandungan fail JS melalui fungsi global yang lain getScript(). Tetapan asas adalah seperti berikut:

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

Tetapan dinamik ialah:

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

Memuatkan fail JS melalui fungsi global getScript() boleh meningkatkan kecekapan pelaksanaan halaman

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

Format fail JS adalah seperti berikut:

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 Pemuatan tak segerak bagi dokumen XML dalam JQuery

Untuk dokumen dalam format XML. , gunakan fungsi global $.get dalam jQuery () untuk mengakses, format sintaks ialah:

$.get(url,[data],[panggilan balik],[type])

URL parameter mewakili alamat data yang menunggu untuk dimuatkan, yang boleh Pilihan [data] mewakili data yang dihantar ke pelayan, pilihan [panggilan balik] mewakili fungsi panggil balik yang dilaksanakan apabila pemuatan berjaya, dan parameter [jenis] pilihan. mewakili format data pulangan, yang boleh menjadi: HTMLXMLJSJSONTEXT, dsb.

Kaedah panggilan adalah serupa dengan 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>

[Pembelajaran yang disyorkan: tutorial video jQuery, Video bahagian hadapan web】

Atas ialah kandungan terperinci Apakah pemuatan tak segerak jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!