ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

jQuery の Ajax について話して、その主なメソッドを詳しく説明しましょう

著者：Eve Cole 更新時間：2022-07-28 14:57:21
この記事では、jQuery での Ajax について説明し、Ajax の長所と短所について説明し、Ajax の主なメソッドについて詳しく説明します。お役に立てば幸いです。

はじめに

この記事では、「Sharp JQuery」を参照・引用し、jQuery-Ajax とその主なメソッドについて詳しく説明します。

1. Ajax の利点と欠点

1. Ajax の利点

a. ブラウザのプラグインは必要ありません。ユーザーはブラウザのプラグインを必要とせず、ほとんどのブラウザでサポートされます。ブラウザで実行するだけです。

b. 優れたユーザーエクスペリエンス。
最大の利点は、ページ全体を更新することなくデータを更新できるため、Web アプリケーションがユーザーの操作に迅速に応答できることです。

c. Web プログラムのパフォーマンスの向上<br/>従来のモードと比較した Ajax モードのパフォーマンスの最大の違いは、従来のモードではデータの送信方法がフォーム (from) を通じて実現されることです。取得されるデータは、Web ページを完全に更新することによってページ全体のコンテンツを取得することです。Ajax モードは、XMLHttpRequest オブジェクトを通じてサーバーに送信する必要があるデータのみを送信します。つまり、データはオンデマンドで送信されます。 。

d. サーバーとブロードバンドの負荷を軽減します。
Ajax の動作原理は、ユーザーとサーバーの間に中間層を追加することに相当します。これにより、ユーザーの操作とサーバーの応答が非同期化され、クライアント上に Ajax エンジンが作成され、従来の方法でサーバーが負担していた作業の一部がクライアントに転送されます。これにより、クライアント リソースの処理が容易になり、サーバーとブロードバンドの負担が軽減されます。

2. Ajax の欠点

a. XMLHttpRequest オブジェクトに対するブラウザのサポートが不十分である
Ajax の欠点の 1 つは、まず、XMLHttpRequest オブジェクトをサポートするのは IE5.0 以降のバージョンだけです (この段階では、Mozilla、Netscape、およびその他のブラウザーは、後で XMLHttpRequest を実行します)。通常、さまざまなブラウザで Aajx アプリケーションの互換性を高めるために、プログラマはブラウザ間の違いを考慮したコーディングに多大な労力を費やす必要があります。

b. ブラウザの「進む」ボタンと「戻る」ボタンの通常の機能を無効にする<br/>Ajax では、特定の方法 (アンカー ポイントの追加) を使用して、ユーザーが進むボタンを使用できるようにすることができます。しかし、従来の方法に比べて、ユーザーにとっては、Ajax インタラクションをトリガーするためにボタンをクリックするときに、このような状況に遭遇することがよくあります。その後、習慣的に「戻る」ボタンをクリックすると、ブラウザが前のページに戻り、Ajax インタラクションによって取得されたコンテンツが完全に消えてしまいます。

c. 検索エンジンのサポートが不十分である<br/>通常、検索エンジンはインターネット上の数十億の膨大なデータを検索および整理するためにクローラーを使用しますが、クローラーはまだこれらの奇妙な JavaScript コードを理解できないため、Ajax によって引き起こされるページコンテンツの変更によってサイトが作成されます。 Ajax を使用すると、ネットワーク プロモーションにおいて従来のサイトに比べて不利になります。

d. 開発およびデバッグツールの欠如
JavaScript は Ajax の重要な部分です。現在、優れた JavaScript 開発ツールやデバッグ ツールが不足しているため、多くの Web 開発者は Ajax コードの作成をさらに困難にしています。彼女はビジュアル ツールを使用したり、自分でコードを書いたりすることを恐れており、それが全員の Ajax アプリケーションにある程度の影響を与えています。

2. Web 環境のインストール --- AppServ

Ajax メソッドは Web サーバーと対話する必要があるため、環境をインストールするためのツールキットである AppServe が必要です。

ダウンロード アドレス: https://www.appserv.org/en/download/installation

: 1 台のマシンで [次へ] ボタンを連続して押し、Web サイトのアドレス、電子メール アドレス、パスワードなどの共通情報を入力します。デフォルトのポートは 80 です。

ブラウザに「http://localhost:80」と入力すると、次のインターフェイスが表示され、インストールが成功したことが示されます。

1.png

使用方法: 作成したプログラムをインストールしたAppServwwwフォルダにコピーし、アドレスバーに「http://loaclhost:80/プログラムファイル名」と入力してアクセスします。

3. jQuery Ajax操作機能

jQueryライブラリは完全なAjax互換スイートを備えています。内部の関数とメソッドを使用すると、ブラウザを更新せずにサーバーからデータをロードできます。

https://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

2.png

上の写真では、

。

あ

j

ある

×

(

)

その方法は、

j

Q

あなた

e

r

y

の最低レベルのメソッド

2

レイヤーは

。

私

ああ

ある

d

(

)

、

.Ajax() メソッドは jQuery の最下位レベルのメソッドで、2 番目のレベルは .load() です。

。

。

p

ああ

s

t

(

)

方法、pp.

3

レイヤーは

.post() メソッド、レイヤー 3 は

。

1. $.ajax() メソッドについては、

以前「jquery ajax-ajax() メソッドの詳細説明」という記事を公開しました。

詳しくは、https://juejin.cn/post/7019188063704350756 を参照してください

。メソッドは

他のメソッドとは異なります。最も単純で最も一般的に使用されるメソッドは、リモート HTML コードをロードして DOM に挿入できます。

構造体

load( url , [data] , [callback] )

パラメータ

3.png

アプリケーション

1) HTML ドキュメントのロード

まず、load() メソッドによってロードされ、ページに追加される HTML ファイル (test.html) を構築します。

<!DOCTYPE html>
<html>
<頭>
	<meta charset="utf-8">
	<title>テスト</title>
</head>
<本文>
	<div>
		<p>こんにちは！</p>
		<ul>
			<li>C</li>
			<li>C#</li>
			<li>C++</li>
			<li>Java</li>
			<li>.ネット</li>
			<li>JSP</li>
			<li>ASP</li>
			<li>PHP</li>
			<li>Python</li>
			<li>iOS</li>
			<li>アンドロイド</li>
			<li>JavaScript</li>
			<li>CSS</li>
			<li>HTML</li>
			<li>XML</li>
			<li>VUE</li>
			<li>反応</li>
			<li>角度</li>
			<li>SQL</li>
		</ul>
	</div>
</body>
次に

、Ajax イベントをトリガーするボタンと、追加された HTML コンテンツ (test.html) を表示するために使用される ID「content」を含む新しい空のページ (main.html) を作成します

。コードは次のとおりです。 
<!DOCTYPE html>
<html>
<頭>
	<meta charset="utf-8">
	<script src="jquery/jquery-2.1.1.js"></script>
	<title>メイン</title>
</head>
<本文>
	<!-- load() メソッド -->
	<button id="btn1">クリックしてロード</button>
	<h1>ロードされたコンテンツ:</h1>
	<div id="content1"></div>
</body>
</html>

次に、jQuery コードを記述します。 DOM がロードされたら、ボタンをクリックして load メソッドを呼び出し、test.html のコンテンツを ID が「content」の要素にロードします。コードは次のとおりです

。
	$(関数(){
		//load(url) メソッド $("#btn1").click(function(){
    		$("#content1").load("test.html")//クリックされたときにtest.htmlのコンテンツを現在のページにロードします })
	})
</script>

実行結果を

ロードする前に

:

4.png

ロード後:

5.png

2) ロードされた HTML ドキュメントをフィルタリングする

上記の例では、test.html 内のすべてのコンテンツを main.html 内の「content」という ID を持つ要素にロードします。特定のコンテンツのみをロードしたい場合は、load(url) を使用できます。セレクター) を達成します。

注: URL とセレクターの間にはスペースがあります。

たとえば、test.html の p タグのコンテンツのみをロードする場合、コードは次のようになります。

<script type="text/javascript">
    $(関数(){
	//load(url, selector) フィルター $("#btn1").click(function(){
    	    $("#content1").load("test.html p")
   	})
    })
</script>

実行結果

6.png

3) 転送モード

load()メソッドの転送モードはパラメータデータに基づいて自動的に指定されます。パラメーターが渡されない場合は GET メソッドが使用され、それ以外の場合は自動的に POST メソッドに変換されます。

//load(url,fn)メソッド、パラメータ転送なし、GETメソッド $("#btn1").click(function(){
    $("#content1").load("test.html", function(){
    	// コード
    })
})

//load(url,fn) メソッド、渡すパラメータがあります、POST メソッド $("#btn1").click(function(){
    $("#content1").load("test.html", {名前: "peiqi"、年齢: "18"}, function(){
    	// コード
    })
})

4) コールバックパラメータ

ロード完了後に継続する必要がある操作のために、load() メソッドは「リクエストの返された内容」と「XMLHttpRequest のステータス」を表す 3 つのパラメータを備えています。オブジェクト "、コードは次のとおりです。

$（"＃content1 "）
   //responseText: リクエストによって返されたコンテンツ //textStates: リクエスト ステータス: 成功 エラー notmodified タイムアウト 4 種類 //XMLHttpRequest: XMLHttpRequest object});

注: Ajax リクエストが成功したかどうかに関係なく、load() メソッドでは次のようになります。リクエストが完了すると（完全）、コールバック関数（コールバック）がトリガーされます。

3.

。

g

e

t

(

)

方法と

.get() メソッドと

メソッドの

load() は通常、Web サーバーから静的データ ファイルを取得します。サーバー内のページにいくつかのパラメーターを渡す必要がある場合は、次のメソッドを使用できます。

。

g

e

t

(

)

方法と

.get（）メソッドおよび

メソッド（または$ .ajax（）メソッド）。

知らせ：

。

g

e

t

(

)

方法と

.get() メソッドと

メソッドは、jQuery のグローバル関数です。

1) $.get() メソッド

$.get() メソッドは、GET メソッドを使用して非同期リクエストを作成します。

構造体

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

パラメータ

7.png

以下の

アプリケーションは

、$.get() メソッドの使用を導入するコメント ページの HTML コードです。コードは次のとおりです：

<！ -  $ .get（）および$ .post（）メソッド - >
<h3>コメント</h3>
<p> name：<入力型= "text" name = "" id = "name"> </p>
<p> content：<textarea id = "content2"> </textarea> </p>
<button id="btn2">メッセージを残す</button>
<div id = "msg"> </div>

このコードで生成されたページは、図に示すように次のようになります。

8.png

名前とコンテンツを記入した後、コメントを送信できます。

a. まず、要求された URL アドレスを決定する必要があります。

$("#btn2").click(function(){
    $.get("test.php", データパラメータ, コールバック関数)
})

b. 送信する前に、名前とコンテンツの値をパラメータ データとしてバックグラウンドに渡します。

$("#btn2").click(function(){
    $.get("test.php", {"ユーザー名":$("#name").val(), "コンテンツ":$("#content2").val()}, コールバック関数)
})

c. サーバーが渡されたデータを受信して​​正常に返された場合は、コールバック関数を通じて返されたデータをページに表示できます。

$.get() メソッドのコールバック関数には 2 つのパラメータしかありません

function(){
  //data: 返されるコンテンツは、XML ドキュメント、json ファイル、XHML フラグメントなどです。 //textStatus: リクエスト ステータス: 成功、エラー、notmodified、タイムアウトの 4 種類}

d. data パラメータは、リクエストによって返されるコンテンツと textStatus を表します。パラメータはリクエストのステータスを表し、コールバック関数はデータが成功した場合にのみ呼び出すことができます（成功または失敗に関係なく、load() が呼び出されます）。

// $.get() メソッド$("#btn2").click(function(){
    $.get("test.php", {"ユーザー名":$("#name").val(),"コンテンツ":$("#content2").val()}, function(data,textStatus) {
    	if(textStatus=="成功"){ //成功
    		// コード
    		$(data).appendTo("#msg")
    	}
    }、
    "html")//タイプ
})

e. 操作結果

9.png

2) $.post() メソッドの

構造と使用法は $.get() メソッドと同じですが、次のような違いがあります:

a. GET メソッドは URL の後にパラメータを渡し、データが参照されます。サーバーはそれをキャッシュしますが、POST メソッドは HTTP メッセージのエンティティ コンテンツとして (つまり、リクエスト ボディにラップされて) サーバーに送信されます。POST メソッドのセキュリティは、POST メソッドのセキュリティよりも高いことがわかります。 GETメソッド。

b. GET メソッドには送信データのサイズ制限があります (通常は 2KB 以下) が、POST メソッドには理論上サイズ制限がありません。

c. GETメソッドとPOSTメソッドで転送されたデータは、サーバー側での取得方法が異なります。 PHPではGETモードのデータは「_GET[]」で取得でき、POSTモードのデータは「_POST[]」で取得できます。どちらの方法も「$_REQUEST[]」を使用して取得できます。

D。

POST メソッドと GET メソッドによって送信されたすべてのデータは $_REQUEST[] を通じて取得できるため、jQuery 関数を変更する限り、プログラムは GET リクエストと POST リクエストを切り替えることができます。 コードは次のとおりです

。 post() メソッド $("#btn2").click(function(){
	$.post("test.php", {"ユーザー名":$("#name").val(),"コンテンツ":$("#content2").val()}, function(data,textStatus) {
    	if(textStatus=="成功"){ //成功
    		// コード
    		$（data）.appendto（ "＃msg"）
    	}
    }、
    "html")//タイプ
さらに
、

load() メソッドがパラメータとともに渡される場合、リクエストの送信には POST メソッドが使用されます。したがって、load() メソッドを使用して同じ関数を実行することもできます。コードは次のとおりです。

$("#btn2").click(function(){
	$（ "＃msg"）。load（ "test.php"、{
    	「ユーザー名」：$（ "＃name"）。val（）、
        "コンテンツ":$("#content2").val()
    });
})

4.

。

g

e

t

S

c

r

私

p

t

(

)

方法と

.getScript（）メソッドと

) メソッド

ページが最初に読み込まれるときに、必要なすべての JavaScript ファイルを取得することがまったく必要ない場合があります。

$(document.createElement("script")).attr("src", "test.js").appendTo("head");

を動的に作成することもできますが、

//または $("<script type='text/javascript' src='test.js' />").appendTo("head");

しかし、この方法は理想的ではありません。 jQuery は、js ファイルを直接ロードするための $.getScript() メソッドを提供します。これは、HTML フラグメントをロードするのと同じくらい簡単で便利です。また、JavaScript ファイルは自動的に実行されるため、JavaScript ファイルの処理は必要ありません。

構造体

$.getScript( url , fn ); 
 //url: リクエストアドレス //fn: コールバック関数

アプリケーション<br/>現在の日付を取得するために nowDate.js ファイルを作成します。 コードは次のとおりです。

function getNowDate(){
    var date = new Date
    返品日;

「現在の時刻を取得」ボタンをクリックすると、最新の時刻と日付が表示されます。 コードは次のとおりです。

//
HTML コード <!-- $.getScript() メソッド -->
<button id="btn3">クリックして時間を取得します</button>
<div id = "message1"> </div> 
    
//jQuery コード// $.getScript() メソッド $("#btn3").click(function(){
    $ .getScript（ "nowdate.js"、function（）{
    	var date1 = getNowDate(); //nowDate.js の getNowDate() メソッドを呼び出して日付を取得します var txtHtml= "<div>"+ date1 + "</div>";
    	$（ "＃message1"）。html（txthtml）;
    })
}）

実行結果を

ロードする前

：

10.png

読み込み後：

11.png

2) $.getJSON() メソッド

。

g

e

t

J

S

○

N

(

)

ロードに使用されるメソッド

J

S

○

N

ファイル、付き

.getJSON() メソッドは JSON ファイルをロードするために使用されます。

。

構造体

$.getJSON(url,fn);
//url: リクエストアドレス //fn: コールバック関数

アプリケーションは

新しい test.json ファイルを作成します。コードは次のとおりです:

{
    「ヘレン」:{
	「セックス」：「女性」、
	「年齢」:18、
	"体重":"50kg",
	「身長」：「165cm」
    }、
    「ピーター」：{
	「セックス」：「男」、
	「年齢」：28、
	「体重」：「65kg」、
	「高さ」：「185cm」
    }

次のコードを使用して新しい HTML ファイルを作成します:

<
!-- $.getJSON() メソッド -->
<button id="btn4">クリックして JSON ファイルをロードします</button>
<div id = "message2"> </div>
[

ロード]ボタンをクリックすると、コードでは次のように表示できます

$("#btn4") .click(function(){
    $.getJSON("test.json", function(data){
    	console.log（データ）; //コンソールは返されたデータを出力します}）
})

コンソール出力は次の図のようになります。

12.png

上記の関数は JSON ファイル (test.json) を読み込みますが、返されたデータを処理する方法を JavaScript に指示しないため、返されたデータはコールバック関数で処理できます。

通常、取得したデータを反復処理する必要がありますが、ここでは従来の for ループを使用できますが、渡すこともできます。

。

e

ある

c

h

(

)

、オブジェクトと配列を走査するために使用できます。

.each() は、オブジェクトと配列を走査するために使用できます。

() 関数は、最初のパラメータとして配列またはオブジェクトを受け取り、2 番目のパラメータとしてコールバック関数を受け取ります。はオブジェクトのメンバーまたは配列の添字で、2 番目のビットは変数またはコンテンツに対応します。コードは次のとおりです。

// $.getJSON() メソッド $("#btn4").click(function() {
    $ .getjson（ "test.json"、function（data）{
    	console.log(data); // コンソールは返されたデータを出力します // 返されたデータを処理します var txtHtml = "";
    	$ .each（data、function（index、item）{
    	    txthtml += "<div> <h4>"
    		    + index + "：</h4> <ul> <li>セックス："
    		    + item ["sex"] + "</li> <li>年齢："
    		    + item ["age"] + "</li> <li>重量："
    		    + item ["weight"] + "</li> <li>高さ："
    		    + item ["height"] + "</li> </div>";
    	    })
    			
    	    $（ "＃message2"）。html（txthtml）;
    })
})

効果は図に示すとおりです。

ロード前:

13.png

読み込み後：

14.png

[推奨学習：jQueryビデオチュートリアル、Webフロントエンドビデオ]

上記は、jqueryのAjaxについて説明し、その詳細については、PHP中国のWebサイトの他の関連記事に注意してください。
関連記事