jQueryの非同期読み込みとは何ですか

jquery では、非同期読み込みはノンブロッキング読み込みとも呼ばれ、一般に読み込み中にコードを実行することを指します。つまり、ブラウザーが JQ または JS を読み込むと、後続のページ処理も実行されるため、スクリプト ファイルの読み込みを最適化し、ページの読み込み速度を向上させることができます。 Load()、getJSON()、およびその他のメソッドを jq で使用して、非同期を実現できます。

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

jquery の非同期読み込みとは

非同期読み込みは、ノンブロッキング読み込みとも呼ばれ、ブラウザーが JQ または JS を読み込むとき、それ以降の読み込みも行われます。ページ処理が行われます。

非同期読み込みにより、スクリプト ファイルの読み込みが最適化され、ページの読み込み速度が向上します。

非同期読み込みを使用する必要があるのはどのような場合ですか?

• スケジュールされたタスク: setTimeout、setInterval

• ネットワーク リクエスト: ajax リクエスト、動的読み込み

• イベント バインディング

  ワン クリック イベントがバインドされた後は、視聴者がいつこのボタンをクリックするかわかりません。視聴者がボタンをクリックしない場合は、そのボタンを表示すべきではないでしょうか?ページ上の次のアクションは?明らかにそれは不可能なので、次のことはバインディング イベントと同時に実行する必要があります。閲覧者がクリックした場合は、クリック後のアクションに従って下に進みます。実際にクリックがない場合は、プロセスを実行しません。他の画像は表示されません。

jQuery の 4 種類の非同期読み込み

ページ開発の過程で、ページ全体を開く速度を向上高速であり、データの一部を非同期読み取り (Ajax 技術) を使用して取得するこの方法を適用することで、ユーザー エクスペリエンスが大幅に最適化され、ページの実行が最適化されます。

1. jQuery のload() メソッドは HTML を読み込みます

従来の JavaScript では、データを非同期的に読み込むために XMLHttpRequest オブジェクトが使用されます。jQuery では、非同期データを取得する関数はload()メソッドを使用することで簡単に実装できます。

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.jQuery のグローバル関数 getJSON()

を使用していますが、 load() メソッドはデータをページにすばやく読み込むことができますが、取得したデータを処理する必要がある場合があります。load() メソッドを使用してトラバーサル用のコンテンツを取得する場合、データ処理も実行できますが、挿入する必要があります最初にページに挿入されるため、実行効率は高くありません。

JSON は軽量のデータ対話形式であり、コンピューターにとって読み取りに非常に便利で、非常に効率的です。 jQuery にはグローバル関数 getJSON() があり、その呼び出しの構文形式は次のとおりです:

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

その JSON ファイル形式対象:

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

3. jQuery のグローバル関数 getScript()

jQuery では、グローバル関数 getJSON 形式のファイルの内容に加えて、別の関数も使用できます。グローバル関数 getScript() は、JS ファイルのコンテンツを取得します。基本設定は次のとおりです。

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

動的設定は次のとおりです。

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

グローバル関数 getScript() を使用して JS ファイルをロードすると、ページの実行効率が向上します。

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

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. JQuery での XML ドキュメントの非同期読み込み

XML 形式のドキュメントの場合は、グローバル関数 $.get( ) jQuery で構文形式にアクセスするための関数:

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

パラメータ url は、取得を待機しているデータ アドレスを表します。ロードされ、オプションの [data] はサーバーへの送信を表します オプションの [callback] パラメータは、ロードが成功したときに実行されるコールバック関数を示します オプションの [type] パラメータは、返されるデータ形式を示します (HTML\XML\JS) \JSON\TEXTなど

呼び出し方法は 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 形式:

<?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 ビデオ チュートリアル 、Web フロント-ビデオ終了 ]

以上がjQueryの非同期読み込みとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。