What is jquery asynchronous loading

In jquery, asynchronous loading is also called non-blocking loading, which generally refers to executing code while loading; that is, when the browser loads JQ or JS, it will also perform subsequent page processing, so that you can Optimize the loading of script files and improve page loading speed. Load(), getJSON() and other methods can be used in jq to achieve asynchronous.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

What is jquery asynchronous loading

Asynchronous loading is also called non-blocking loading. When the browser loads JQ or JS, it also Subsequent page processing will be carried out.

Asynchronous loading can optimize the loading of script files and improve the loading speed of the page.

When should you use asynchronous loading?

• Scheduled tasks: setTimeout, setInterval

• Network request: ajax request, dynamic loading

• Event Binding

  After one click event is bound, we don’t know when the viewer will click this button. If the viewer never clicks the button, shouldn’t we show it to him? What is the next action on the page? Obviously it's impossible, so the next things must be done at the same time as the binding event. If the viewer clicks, then go down according to the action after clicking. If there is really no click, then he will not cause the process to be blocked. No other images can be seen.

Four kinds of asynchronous loading of jQuery

In the process of page development, in order to speed up the overall page opening The speed is high, and a certain part of the data is obtained using asynchronous reading (Ajax technology). The application of this method greatly optimizes the user experience and optimizes the execution of the page.

1. The load() method in jQuery loads HTML

In traditional JavaScript, the XMLHttpRequest object is used to load data asynchronously; in jQuery, The function of obtaining asynchronous data can be easily implemented using the load() method.

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. The global function getJSON() in jQuery

Although using The load() method can quickly load data into the page, but sometimes the acquired data needs to be processed. If the load() method is used to obtain the content for traversal, data processing can also be performed, but it must be inserted into the page first. , the execution efficiency is not high.

JSON, a lightweight data interaction format, is very convenient for computers to read and is very efficient. There is a global function getJSON() in jQuery. The syntax format of its call is:

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

its JSON file format For:

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

3. The global function getScript() in jQuery

In jQuery, in addition to the global function getJSON format file content, you can also use another A global function getScript() obtains the content of the JS file. The basic settings are as follows:

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

Dynamic settings are:

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

Loading JS files through the global function getScript() can improve the execution efficiency of the page

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

The JS file format is as follows ：

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. Asynchronous loading of XML documents in JQuery

For documents in XML format, use the global function $.get() in jQuery to access the syntax format For:

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

The parameter url represents the data address waiting to be loaded, and the optional [data] represents sending to the server The optional [callback] parameter indicates the callback function executed when loading is successful. The optional [type] parameter indicates the return data format, which can be: HTML\XML\JS\JSON\TEXT, etc.

The calling method is similar to 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>

[Recommended learning: jQuery video tutorial, web front-end video 】

The above is the detailed content of What is jquery asynchronous loading. For more information, please follow other related articles on the PHP Chinese website!