jQuery - Ajax

AJAXはAsynchronous JavaScript and XMLの頭字語であり、このテクノロジーはブラウザページを更新せずにサーバーからデータをロードするのに役立ちます。

AJAXを初めて使用する場合は、先に進む前にlink：/ajax/index [Ajaxチュートリアル]にアクセスすることをお勧めします。

JQueryは、次世代のWebアプリケーションを開発するためのAJAXメソッドの豊富なセットを提供する優れたツールです。

単純なデータの読み込み

これは、JQuery AJAXを使用して静的または動的データをロードするのが非常に簡単です。 JQueryは、ジョブを実行する* load（）*メソッドを提供します-

構文

load（）*メソッドの簡単な構文は次のとおりです-

[selector].load( URL, [data], [callback] );

ここにすべてのパラメータの説明があります-

URL -リクエストの送信先のサーバー側リソースのURL。データを動的に生成するか、データベースから生成するCGI、ASP、JSP、またはPHPスクリプトを使用できます。
データ-このオプションのパラメータは、リクエストに渡されるプロパティが適切にエンコードされたパラメータにシリアル化されているオブジェクトを表します。指定されている場合、要求は POST メソッドを使用して行われます。省略すると、 GET メソッドが使用されます。
callback -応答データが一致したセットの要素にロードされた後に呼び出されるコールバック関数。この関数に渡される最初のパラメーターはサーバーから受信した応答テキストであり、2番目のパラメーターはステータスコードです。

例

小さなJQueryコーディングを備えた次のHTMLファイルを検討してください-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/resultl');
            });
         });
      </script>
   </head>

   <body>
      <p>Click on the button to load/jquery/resultl file −</p>

      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>

      <input type = "button" id = "driver" value = "Load Data"/>
   </body>
</html>

ここで* load（）は、指定されたURL */jquery/resultl ファイルへのAjaxリクエストを開始します。このファイルをロードすると、ID _stage_でタグ付けされた<div>内にすべてのコンテンツが入力されます。/jquery/resultlファイルにHTML行が1つしかないと仮定すると、

<h1>THIS IS RESULT...</h1>

指定されたボタンをクリックすると、結果ファイルがロードされます。

JSONデータの取得

サーバーがリクエストに対してJSON文字列を返す場合があります。 JQueryユーティリティ関数* getJSON（）*は、返されたJSON文字列を解析し、結果の文字列をコールバック関数が最初のパラメーターとして利用できるようにして、さらにアクションを実行します。

構文

getJSON（）*メソッドの簡単な構文は次のとおりです-

[selector].getJSON( URL, [data], [callback] );

ここにすべてのパラメータの説明があります-

URL -GETメソッドを介して接続されたサーバー側リソースのURL。
data -プロパティがURLに追加されるクエリ文字列、または事前にフォーマットされエンコードされたクエリ文字列を作成するために使用される名前/値のペアとして機能するオブジェクト。
callback -要求が完了したときに呼び出される関数。応答本文をJSON文字列としてダイジェストした結果のデータ値は、このコールバックへの最初のパラメーターとして渡され、ステータスは2番目として渡されます。

例

小さなJQueryコーディングを備えた次のHTMLファイルを検討してください-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){

               $.getJSON('/jquery/result.json', function(jd) {
                  $('#stage')l('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>');
                  $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });

            });
         });
      </script>
   </head>

   <body>
      <p>Click on the button to load result.json file −</p>

      <div id = "stage" style = "background-color:#eee;">
         STAGE
      </div>

      <input type = "button" id = "driver" value = "Load Data"/>
   </body>
</html>

ここで、JQueryユーティリティメソッド* getJSON（）は、指定されたURL *result.json ファイルへのAjaxリクエストを開始します。このファイルをロードした後、すべてのコンテンツがコールバック関数に渡され、最終的にID _stage_でタグ付けされた<div>内に取り込まれます。 result.jsonファイルには、次のJSON形式のコンテンツが含まれていると仮定します-

{
   "name": "Zara Ali",
   "age" : "67",
   "sex": "female"
}

指定されたボタンをクリックすると、result.jsonファイルがロードされます。

サーバーへのデータの受け渡し

多くの場合、ユーザーから入力を収集し、その入力をさらに処理するためにサーバーに渡します。 JQuery AJAXを使用すると、利用可能なAjaxメソッドの data パラメーターを使用して、収集したデータをサーバーに簡単に渡すことができます。

例

この例は、同じ結果を送り返すWebサーバースクリプトにユーザー入力を渡し、それを印刷する方法を示しています-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               var name = $("#name").val();
               $("#stage").load('/jquery/result.php', {"name":name} );
            });
         });
      </script>
   </head>

   <body>
      <p>Enter your name and click on the button:</p>
      <input type = "input" id = "name" size = "40"/><br/>

      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>

      <input type = "button" id = "driver" value = "Show Result"/>
   </body>
</html>

ここに result.php スクリプトで書かれたコードがあります-

<?php
   if( $_REQUEST["name"] ){
      $name = $_REQUEST['name'];
      echo "Welcome ". $name;
   }
?>

これで、指定した入力ボックスに任意のテキストを入力し、「結果を表示」ボタンをクリックして、入力ボックスに入力した内容を確認できます。

JQuery AJAXメソッド

JQueryを使用したAJAXの基本概念を見てきました。次の表に、プログラミングのニーズに基づいて使用できるすべての重要なJQuery AJAXメソッドを示します-

Sr.No.	Methods & Description
1	jQuery.ajax( options ) HTTP要求を使用してリモートページを読み込みます。
2	jQuery.ajaxSetup( options ) AJAXリクエストのグローバル設定をセットアップします。
3	jQuery.get( url, [data, [callback], [type] )] HTTP GETリクエストを使用してリモートページをロードします。
4	jQuery.getJSON( url, [data, [callback] )] HTTP GETリクエストを使用してJSONデータをロードします。
5	jQuery.getScript( url, [callback )] HTTP GETリクエストを使用してJavaScriptファイルをロードして実行します。
6	jQuery.post( url, [data, [callback], [type] )] HTTP POSTリクエストを使用してリモートページをロードします。
7	load( url, [data, [callback] )] リモートファイルからHTMLをロードし、DOMに挿入します。
8	serialize( ) 入力要素のセットをデータの文字列にシリアル化します。
9	serializeArray( )

JQuery AJAXイベント

AJAX呼び出しの進行中に、さまざまなJQueryメソッドを呼び出すことができます。さまざまなイベント/ステージに基づいて、以下の方法が利用可能です-

すべてのリンクを通過できます：/jquery/ajax-events [AJAXイベント]。

Sr.No.	Methods & Description
1	ajaxComplete( callback ) AJAXリクエストが完了するたびに実行される関数をアタッチします。
2	ajaxStart( callback ) AJAX要求が開始され、まだアクティブなものがない場合に実行される関数をアタッチします。
3	ajaxError( callback ) AJAX要求が失敗したときに必ず実行される関数を添付します。
4	ajaxSend( callback ) AJAXリクエストが送信される前に実行される関数をアタッチします。
5	ajaxStop( callback ) すべてのAJAXリクエストが終了したときに実行される関数をアタッチします。
6	ajaxSuccess( callback ) AJAXリクエストが正常に完了するたびに実行される関数をアタッチします。

Jquery-ajax

目次