jqueryで非同期更新する方法-フロントエンドQ&A-php.cn

jqueryで非同期更新する方法

王林

リリース： 2023-05-14 10:08:37

オリジナル

804 人が閲覧しました

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 コード:

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

ログイン後にコピー

< ;/head> ;

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

ログイン後にコピー

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 サイトの他の関連記事を参照してください。