jqueryで非同期更新する方法

Web 開発では、非同期更新テクノロジは、部分更新、リアルタイム更新などの特別な機能を実装するためによく使用されます。非同期リフレッシュを実現するためのコアテクノロジーはAjaxテクノロジーです。最も人気のある JavaScript ライブラリの 1 つである jQuery は、非常に強力で使いやすい Ajax 関数をカプセル化しています。この記事では、jQuery を使用して非同期更新を実装する方法を詳しく説明します。

1. jQuery の非同期更新の原則

従来の同期リクエストでは、クライアントはサーバーにリクエストを送信し、サーバーが応答するのを待ちます。非同期リクエストでは、クライアントはリクエストの送信後にサーバーの応答を待つ必要はなく、後続のコードの実行を続けます。サーバーが応答すると、応答結果に基づいて適切な処理が実行されます。このようにして、Web サイトの部分的な更新が実現され、ページのリロードによって引き起こされる不必要なネットワーク トラフィックやリソースの浪費を回避できます。

jQuery の非同期更新は Ajax テクノロジに依存しています。原理は次のとおりです:

1. クライアントは非同期リクエストをサーバーに送信し、XMLHttpRequest オブジェクトを使用して非同期リクエストを送信するための XMLHttpRequest オブジェクトを作成します。

2. リクエストを送信する前に、クライアントはまずリクエスト タイプ、リクエストされた URL、リクエスト パラメータなどを含むリクエストを構成する必要があります。

3. クライアントはサーバーにリクエストを送信し、コールバック関数を登録します。サーバーはリクエストを処理した後、応答結果をクライアントに返します。クライアントは応答結果に基づいて対応するコールバック関数を実行します。

4. クライアントは、Web ページの一部の更新など、サーバーの応答に基づいて対応する操作を実行します。

2. jQuery の非同期リフレッシュの実装

jQuery には、$.ajax() メソッドと $.get() メソッドという 2 つの主なメソッドがあります。 $. ajax() の簡易バージョンで、リクエストで URL とデータのみが渡されるシナリオに適しています。以下では、これら 2 つの方法をそれぞれ使用する方法を紹介します。

1. $.ajax() メソッドを使用して非同期リフレッシュを実装する

$.ajax() メソッドは、jQuery で非同期リクエストを送信するために最も一般的に使用されるメソッドの 1 つです。 Promise を使用して、非同期リクエストの管理を容易にします。 $.ajax() メソッドの基本的な使用法は次のとおりです。

$.ajax({

type: 'POST',  //请求类型
url: 'http://www.example.com/api',  //请求的URL地址
data: {username: '张三', password: '123456'},  //请求的参数
success: function(data){  //回调函数，处理服务器响应结果
    // 服务器响应成功后执行的代码
},
error: function(xhr, type){  //回调函数，处理服务器响应错误
    // 服务器响应失败后执行的代码
}

});

上記のコードは、最初に$.ajax() メソッド POST リクエストが行われました。リクエストされた URL アドレスは http://www.example.com/api、リクエスト パラメータは {ユーザー名: 'Zhang San'、パスワード: '123456'} でした。サーバーが正常に応答すると、jQuery は成功コールバック関数を実行し、応答データをパラメーターとしてコールバック関数に渡します。サーバーがエラーで応答した場合、jQuery はエラー コールバック関数を実行し、XMLHttpRequest オブジェクトとエラー タイプをパラメータとしてコールバック関数に渡します。

2. $.get() メソッドを使用して非同期更新を実装します

$.get() メソッドは、$.ajax() メソッドの簡略化されたバージョンであり、渡すことのみに適しています。 URL とデータのシナリオ。 $.get() メソッドの基本的な使用法は次のとおりです:

$.get('http://www.example.com/api', {ユーザー名: 'Zhang San'、パスワード: ' 123456'}, function(data){

// 处理服务器响应结果

})

上記のコードは、まず $.get() メソッドを使用して、http://www.example に GET リクエストを送信します。 .com/api アドレスを指定し、パラメータ {ユーザー名: 'Zhang San'、パスワード: '123456'} をサーバーに渡します。サーバーが正常に応答すると、jQuery はコールバック関数を実行し、応答結果をパラメーターとして関数に渡します。

3. 非同期リフレッシュを実装する jQuery の例

以下では、例を使用して、jQuery を使用して非同期リフレッシュを実装する方法を具体的に説明します。この例では、$.get() メソッドを使用してサーバーから現在時刻を取得し、それを Web ページ上の指定された DIV に更新します。具体的なコードは次のとおりです。

HTML コード:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<meta charset="UTF-8">
<title>jQuery异步刷新实例</title>

< ;/head> ;
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>当前时间：</h1>
<div id="time"></div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="refresh.js"></script>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

JavaScript コード (refresh.js):

function freshTime () {

$.get('http://www.example.com/get_time', function(data) {
    $('#time').text(data.time);
});

}

setInterval(refreshTime, 1000);

上記のコードは、まず $.get を使用する freshTime() 関数を定義します。 () メソッド http://www.example.com/get_time に GET リクエストを送信し、応答結果の時間フィールドを ID 時間を持つ DIV に更新します。次に、setInterval() メソッドを使用して、refreshTime() 関数を 1 秒ごとに実行します。

このようにして、ユーザーが Web ページにアクセスすると、ページ全体をリロードすることなく、ページ上の時間を常にリアルタイムで更新できます。このようなエクスペリエンスは、ユーザーにとってよりスムーズで受け入れられやすくなります。

概要

この記事では、jQuery を使用して非同期更新テクノロジを実装する方法について詳しく説明します。まず、jQuery の非同期リフレッシュの原理を説明し、次に 2 つの主要な非同期リフレッシュ メソッド、$.ajax() メソッドと $.get() メソッドを紹介します。最後に、特定の例では、非同期更新テクノロジを使用して Web ページのリアルタイム更新を実現する方法を示します。この記事が、jQuery の非同期更新テクノロジをよりよく習得し、Web 開発の効率を向上させるのに役立つことを願っています。

以上がjqueryで非同期更新する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。