ywork2020.com

Title

GET メソッドで非同期通信する

目次 (INDEX)

get とは

ここで説明する $.get とは次の語句からなる jQuery の関数です。
get
読み: ゲット
意味: 獲得、手に入れる

目次に戻る

$.get 関数の概要

この関数は、普通、form 要素内の input 要素 submit 型などを介して送信される GET メソッドを使用して非同期通信を行うことができます。

GET 送信は 主にヘッダー情報と URL にパラメータを添付しただけの軽量な形式でリクエストを行います。 昨今では このパラメータが可視できる状態ではセキュリティーが弱いということで https 通信による暗号化が推奨されています。

また、これとは別に POST 送信という送信方法がありますが、これはヘッダー情報とパラメータを含めたボディ情報の両方を 送信します。大容量のデータ転送には、POST メソッドを選択します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

  • url: リクエストの送信先 URL を設定します。
  • data: 送信するキーと値のペアを設定します。
  • success: リクエストが成功した場合に呼び出される関数を指定します。
  • dataType: サーバーから戻ってくるデータの種類です。特に設定する必要はありません。
  • settings: 詳細は $.ajax のページ参照してください。
$.get(url [, data] [, success] [, dataType]);
$.get([settings]);

目次に戻る

サンプルコードと実行結果

ここでは、このページのファイルとは別の php-get-response.php というファイルに ajax 通信を使ってデータを送信し、結果をリクエストします。

サンプルコード: PHP file ( php-get-response.php ) 
<?php
	$get = $_GET['sendData'];
	if(strlen($get) > 0){
		echo('GET メソッドで ' . $get . ' という値を受け取りました。');
	}
?>

ここでは、 PHP のコードの説明は割愛させていただきます。
動作内容としては、 この php ファイルに GET メソッドを使って sendData というキーと 値 をセットで送信すると、その受信した 値 を php の実行により出力するというものです。

サンプルコード: CSS 
<style>
	#idResponse{
		padding: 0 0.5em;
		border: thin solid ##darkgray;
		width: 50%;
	}
</style>
サンプルコード: HTML 
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<input type="button" value="GET送信" id="idButton">
	<br>
	<div id="idResponse"> Waiting for send </div>
	<script>...</script>
</body>
  • 06: input type="button" value="GET送信" id="idButton" (ボタンです。これをクリックすると、 script の 02~10 行目のコードが実行されます。)
  • 07: div id="idResponse" (この要素に php ファイルが実行された後の返信結果が出力されます。)
サンプルコード: script 
<script>
	$("#idButton").click(function(){
		$.get(
			"./php-get-response.php",
			{"sendData" : $("#idButton").val()},
			function (response){
				$("#idResponse").html(response);
			}
		);
	});
</script>
  • 04: "./php-get-response.php" (構文の url の部分です。 リクエスト先の URL (ファイル名) です。)
  • 05: {"sendData" : $("#idButton").val()} (構文の data の部分です。 "sendData" というキー と ボタン要素に記してある 文字列 をセットで送信します。)
  • 06-08: function(response){ 関数の処理 } (構文の success の部分です。 通信成功時に実行される関数です。)
実行結果:
実行: このボタンのテキストを sendData というキーで GET 送信します。
[ URL?sendData=GET送信 ] と同じ内容で送信していることになります。


応答: id="idResponse"
Waiting for send

目次に戻る

$.get を使用上の注意点

$.get 関数では通信エラーが起こった時にはコールバック関数が実行されません。 エラー処理が必要な場合には $.ajax 関数を使用してください。

目次に戻る