[2019/07/09] JavaScript jQueryでAjaxを使いPHPからデータを取得する方法 (No.109)
[2019/04/18] JavaScript jQueryでJavascriptファイルを動的に変更する方法 (No.93)
[2019/04/16] JavaScript jQueryの使い方(セレクタ)その2 (No.92)
[2019/04/15] JavaScript jQueryの使い方(セレクタ) (No.91)
[2019/04/04] JavaScript 何に使う (No.89)
-
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
-
今回は jQuery で用意されている Ajax 関数を使って PHP からデータを取得する方法について説明します。
この例は、よくあるのですが、マスタテーブルからコードを指定しその内容を表示する場合に使う方法です。 (例えば、郵便番号を入力し対応する都道府県名、市町村名、住所を表示する等です。)
先ずは Ajax 関数の使い方ですが、以下の様な感じです。<ajax関数の例> $.ajax({ type: "POST", url: "hoge.php", data: { data1: "1111", data2: "222" , ... } }).done(function(data){ // 正常処理 }).fail(function() { // 取得エラー }).always(function() { // 後処理 }); <パラメータ> ・type:リクエストのタイプ("POST"または"GET")を指定します。 ・url :リクエストを送信するURLを指定します。 ・data:サーバーへ送信するデータを指定します。 :{ キー値1: データ値1, キー値2: データ値2, キー値3: データ値3, ... } <メソッド> ・done(function(data){}:ajax 処理が成功した場合に呼ばれる関数宣言。 ・fail(function(){} :ajax 処理でエラーが発生した場合に呼ばれる関数宣言。 ・always(function(){} :ajax 処理の最後に呼ばれる関数宣言。
HTML ファイル側のソースですが以下の様になります。
■Ajaxを使いPHPからデータを取得するHTMLファイル
<html> <head> <meta charset="utf-8"> <title>test ajax</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //Ajax関数 function getData() { // マスタデータの取得 $.ajax({ type: "POST" , url: "./ajax1.php" , data: { id: $("#id").val() } }).done(function(res){ // ajaxがOK $("#msg").text(JSON.parse(res)); }).fail(function() { // 取得エラー alert('取得エラー'); }).always(function() { // 後処理(処理することが在れば) }); return false; } </script> </head> <body> <h2>test ajax json</h2> ID:<input type="text" id="id" size="10" maxlength="10" /><br /> <p id="msg">テストメッセージ</p> <button onclick="getData();">Ajax</button> </body> </html>
外部PHPファイル ajax1.php がこのHTMLファイルと同じディレクトリに存在することにします。
■外部PHPファイル ajax1.php
<?php // 処理モードの取得 $id = -1; if (isset($_POST["id"]) == true && $_POST["id"] != "") { $id = intval($_POST["id"]); } // マスタ風の仮のデータ $arrData = array( 0 => "@@@@@@" ,1 => "AAAAAA" ,2 => "BBBB" ,3 => "CCCCCCCC" ); $strRet = ""; if (0 <= $id && $id <= 3) { $strRet = $arrData[$id]; } // 結果を返す echo(json_encode($strRet));
このPHPファイルは POST された id を取得し、その値をキーとして、マスタデータの仮の配列データから 文字列を取得します。 その文字列を JSON データに変換して echo 関数で返してやります。
返されたデータは、HTML側の done 関数の引数に渡されます。 そこでその引数の値を JSON データから逆変換し、HTMLのタグに設定してやります。
実際にHTMLファイルをブラウザで表示し、IDを入力しボタンを押下すれば対応するデータが表示されると思います。
PR -
通常、Javascriptの関数等をまとめた外部Javascriptファイル(JSファイル と略します)を、HTML内の head 内で指定しますが、 別の外部JSファイルに入れ替えたい場合もあります。
そこで今回は、この外部JSファイルを別のファイルに変更する方法について説明します。■外部JSファイルを使うHTMLファイル
外部JSファイル test-script-chg1.js がこのHTMLファイルと同じディレクトリに存在することにします。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test jQuery</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="test-script-chg1.js"></script> </head> <body> <p>メッセージあああ</p> <div> <p class="msgchg1">メッセージ1</p> <p class="msgchg2">メッセージ2</p> <p class="msgchg3">メッセージ3</p> </div> <p class="msgchg4">メッセージ6</p> <button class="btn1">TEXT変更</button> <button class="btn2">SCRIPT変更</button> </body> </html>
■外部JSファイル:test-script-chg1.js
$(function () { //<button class="btn1">のクリックイベントの関数を宣言 $(".btn1").click(function(){ //<div>要素内の<p>の全てのTEXTを変更 $("div p").text("ああああああああ"); }); //<button class="btn2">のクリックイベントの関数を宣言 $(".btn2").click(function(){ //最初のスクリプトを削除 $("script[src='test-script-chg1.js']").remove(); //別のスクリプトを生成 var src = $("<script>").attr({ "type": "text/javascript", "src": "test-script-chg2.js" }); //スクリプト追加 $("head").append(src); //以下の方法でもOK //$("<script>").attr("type","text/javascript").attr("src", "test-script-chg2.js").appendTo("head"); //ボタンを不可設定 $(".btn2").prop('disabled', true); }); });
このJSファイルは、.btn1 と .btn2 のクリックイベント関数を宣言しています。
.btn2 のクリックイベント関数で最初に読込んだJSファイル test-script-chg1.js を削除し、 新しい test-script-chg2.js を読込んでいます。
JSファイルを削除するセレクタの指定がミソなのですが、 このセレクタはHTML要素の script に対して script の引数が test-script-chg1.js であるものを示します。
これは属性フィルタと呼ばれるもので、以下の様に指定します。$("[属性名='属性フィルタ値']")
「=」 は演算子でこの場合は「属性フィルタ値」と完全に等しいものが対象になります。
演算子は 「=」 の他に以下の様なものが在ります。- != ... 指定した「属性フィルタ値」と異なる要素
- ^= ... 指定した「属性フィルタ値」と前方一致する要素
- $= ... 指定した「属性フィルタ値」と後方一致する要素
- *= ... 指定した「属性フィルタ値」と部分一致する要素
- ~= ... 指定した「属性フィルタ値」と単語として一致する要素
実際に以下を動作させると、「SCRIPT変更」ボタン押下後は、「TEXT変更」ボタン押下時に div タグ内の全ての p タグのテキストが「いいいいいいい」に変わります。 「ああああああああ」ではないことに注意して下さい。
⇒Javascriptファイルの動的に変更の例
■動的に読込まれる外部JSファイル:test-script-chg2.js
$(function () { //<button class="btn1">のクリックイベントの関数を宣言 $(".btn1").click(function(){ //<div>要素内の<p>の全てのTEXTを変更 $("div p").text("いいいいいいい"); }); });
-
前回は jQuery のセレクタの使い方の基本的な方法として HTMLの要素 , id名 , class名 を単独での使い方を説明しましたが、 今回はそれらを複合的に組み合わせて使う方法について説明します。
組み合わせの方法としては、AND的な方法とOR的な方法があります。 AND的な方法とはセレクタの中で要素を連続で記述し、要素を絞り込むことです。 OR的な方法とはセレクタを列挙してどれにでも該当させることです。
■「HTMLの要素」AND「HTMLの要素」
HTMLの要素同士のANDのセレクタの例を以下に示します。
ボタンクリックイベントの関数宣言の中で div タグと p タグのAND指定を行っています。
2つのdiv タグと p タグの指定の間には空白を入れます。空白が無いと別々のものと判定ができません。
ボタンをクリックした時に全ての div タグで囲まれたHTML要素の内部の全ての p タグのテキストが「ああああああああ」に変わります。<html> <head> <meta charset="utf-8"> <title>test jQuery</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <p>メッセージあああ</p> <div> メッセージ0<br /> <p>メッセージ1</p> <p>メッセージ2</p> <p>メッセージ3</p> </div> <p>メッセージいいい</p> <div> <p>メッセージ4</p> </div> <button class="btn">変更</button> <script> $(function () { //<button class="btn">のクリックイベントの関数を宣言 $(".btn").click(function(){ //<div>要素内の<p>の全てのTEXTを変更 $("div p").text("ああああああああ"); }) }); </script> </body>
上の例を以下に実際のHTMLで示します。
⇒「HTMLの要素」AND「HTMLの要素」の例
■「HTMLの要素」AND「class名」
HTMLの要素とclass名のANDのセレクタの例を以下に示します。
div タグと class名 指定を連続して指定します。 class名 指定は先頭に .(ドット) を付けます。
この連結する時に「HTML要素名」と「class名」の間に空白を入れない場合と入れる場合で意味合いが異なります。
空白を入れない場合は指定した「HTML要素名」のclassが、指定した「class名」であるものが対象となります。
また、空白を入れる場合は指定した「HTML要素名」の中のHTML要素でclassが指定した「class名」であるものが対象となります。
以下の例では、ボタンのクリック関数の最初の処理で <div class="msgchg"> のテキストが全て「ああああああああ」に変わります。 (注意するのは <p>メッセージA</p> が全て「ああああああああ」に置き換わることです)
2番目の処理では div タグで囲まれたHTML要素の内部の class="msgchg" の p タグのテキストが「いいいいいいいい」に変わります。<html> <head> <meta charset="utf-8"> <title>test jQuery</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <p>メッセージあああ</p> <div class="msgchg"> <p>メッセージA</p> </div> <div> メッセージ0<br /> <p class="msgchg">メッセージ1</p> <p>メッセージ2</p> <p>メッセージ3</p> </div> <p>メッセージいいい</p> <button class="btn">変更</button> <script> $(function () { //<button class="btn">のクリックイベントの関数を宣言 $(".btn").click(function(){ //<div>要素の<class="msgchg">の全てのTEXTを変更 $("div.msgchg").text("ああああああああ"); //<div>要素内の要素が<class="msgchg">の全てのTEXTを変更 $("div .msgchg").text("いいいいいいいい"); }); }); </script> </body> </html>
上の例を以下に実際のHTMLで示します。
⇒「HTMLの要素」AND「class名」
■「class名」AND「class名」
「class名」同士のANDのセレクタの例を以下に示します。class名 指定は先頭に .(ドット) を付けます。
この連結する時に「class名」と「class名」の間に空白を入れない場合と入れる場合で意味合いが異なります。
空白を入れない場合は、classの中が複数指定された「class名」を持つHTML要素が対象となります。
また、空白を入れる場合は最初に指定した「class名」を持つHTML要素内部に、2番目に指定した「class名」持つHTML要素が対象となります。
以下の例では、 ボタンのクリック関数の最初の処理でclassが class="divchg msgchg" のテキストが全て「ああああああああ」に変わります。 (「メッセージ3」「メッセージ4」のところが「ああああああああ」となります)
2番目の処理ではclassが class="divchg" のHTML要素の内部のclassが class="msgchg" のHTML要素のテキストが「いいいいいいいい」に変わります。 (注意するのは「メッセージ3」のところが2つの処理に該当するため、表示が「いいいいいいいい」となります)<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test jQuery</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <p>メッセージあああ</p> <div class="divchg"> メッセージ0<br /> <p class="msgchg">メッセージ1</p> <p>メッセージ2</p> <p class="divchg msgchg">メッセージ3</p> </div> <p>メッセージいいい</p> <div> <p class="divchg msgchg">メッセージ4</p> </div> <button class="btn">変更</button> <script> $(function () { //<button class="btn">のクリックイベントの関数を宣言 $(".btn").click(function(){ //1個の要素のクラスが<class="divchg msgchg">の全てのTEXTを変更 $('.divchg.msgchg').text("ああああああああ"); //<class="divchg">の<div>要素内の<class="msgchg">の全てのTEXTを変更 $('.divchg .msgchg').text("いいいいいいいい"); }); }); </script> </body> </html>
上の例を以下に実際のHTMLで示します。
⇒「class名」AND「class名」
■「class名」OR「class名」
「class名」同士のORのセレクタの例を以下に示します。class名 指定は先頭に .(ドット) を付けます。
「class名」を ,(カンマ) で連結することで指定された「class名」を持ったHTML要素が対象となります。
以下の例では、classが class="msgchg1" class="msgchg2" class="msgchg5" class="msgchg6" の要素のテキストが全て「ああああああああ」に変わります。<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test jQuery</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <p>メッセージあああ</p> <div> <p class="msgchg1">メッセージ1</p> <p class="msgchg2">メッセージ2</p> <p class="msgchg3">メッセージ3</p> </div> <p class="msgchg4">メッセージ4</p> <div> <p class="msgchg5">メッセージ5</p> </div> <p class="msgchg6">メッセージ6</p> <button class="btn">変更</button> <script> $(function () { //<button class="btn">のクリックイベントの関数を宣言 $(".btn").click(function(){ //指定された複数クラスの要素のTEXTを変更 $('.msgchg1,.msgchg2,.msgchg5,.msgchg6').text("ああああああああ"); }); }); </script> </body> </html>
上の例を以下に実際のHTMLで示します。
⇒「class名」OR「class名」
-
JavaScript の中でなんで jQuery なのかと思われるでしょうが、 jQuery を使うことで JavaScript では記述が長い部分をコンパクトにできたり、 ブラウザ毎で動作の違いを吸収してくれます。 また、jQuery で記述されたプラグインを使うことで、ページに新しい機能が追加できます。
「JavaScript 何に使う」の記事の中で以下の様なソースがあります。 (ソースを少し変更しましたが)<html> <head> <meta charset="utf-8"> <title>test 1-2</title> </head> <body> <p id="msg1">テストメッセージ</p> <p id="msg2">テストメッセージ</p> <script> var element = document.getElementById('msg1'); element.innerText = 'こんにちは1'; var element = document.getElementById('msg2'); element.innerText = 'こんにちは2'; </script> </body> </html>
■jQueyを使った簡単な例
document.getElementById の記述が少し冗長だと思いますので、 この部分に jQuery の記述を適用してみます。
$('#msg1') の部分が document.getElementById('msg1') の替わりで、 .text('こんにちは1') の部分が .innerText = 'こんにちは1' の替わりになります。
結構シンプルな記述になりました。 ここで $(function(){ ... }); の中で処理の記述がありますが、この関数の中身の実行は全ページの読込後に行われます。 $(document).ready(function(){ ... }); としても同じです。<html> <head> <meta charset="utf-8"> <title>test jQuery</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <p id="msg1">テストメッセージ</p> <p id="msg2">テストメッセージ</p> <script> $(function(){ $('#msg1').text('こんにちは1'); $('#msg2').text('こんにちは2'); }); </script> </body> </html>
$('#msg1') に注目して下さい。 msg1 は p タグの id として宣言されていますが、 id 属性のタグを参照するものしてとして #(シャープ) を使います。 この$('...') と記述するものをセレクタといいます。
セレクタとは全HTMLの中の、どの要素なのかを示すオブジェクトです。 このセレクタですが、 p タグの様なHTMLのタグそのものを示したり、 上のソースの様にID属性のタグや、Class属性のタグを示すことができます。
セレクタの方法はいっぱいありますので、下の方で説明したいと思います。
■jQueyのダウンロード
ところで jQuery の読込ですが、上の例では公式サイトに存在するスクリプトを読込んでいます。 このスクリプトファイルを自分のサイトにダウンロードしてそれを読込ことでもできます。 ダウンロードは以下の公式サイトからできます。
■jQueryのダウンロードサイト
公式サイトには jquery-3.2.1.min.js と min無しの jquery-3.2.1.js の2種類がありますが、 min無しの方はスクリプト内の空白を全て削除してあるため、ファイルサイズが小さいので ロード時間的には有利です。<html> <head> <meta charset="utf-8"> <title>test jQuery</title> <script src="スクリプトを設置したアドレス/jquery-3.2.1.min.js"></script> </head> ...
■jQueyのセレクタ
セレクタの方法は HTMLの要素 , id名 , class名 等があり、またそれらを複合的に組み合わせたものがあります。
■HTMLの要素
最初にHTMLの要素のセレクタの例を以下に示します。 $("button") でボタン要素を指し示します。
さらに .(ドット) で繋ぐことでそのセレクタの示すプロパティ、メソッド等にアクセスできます。 $("button").click(function(){ ... }) はボタンのクリックイベントの関数宣言を行います。
この関数の中の $("p") は p タグの要素全てを示しますので、ボタンをクリックした時に全ての p タグの表示が「こんにちは」に変わります。<html> <head> <meta charset="utf-8"> <title>test jQuery</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <p id="msg1">テストメッセージ</p> <p id="msg2">テストメッセージ</p> <button>変更</button> <script> $(function () { //HTML要素<button>のクリックイベントの関数を宣言 $("button").click(function(){ //HTML要素<p>の全てを変更 $("p").text("こんにちは"); }) }); </script> </body>
上の例を以下に実際のHTMLで示します。
⇒HTMLの要素の例
■id名
HTML要素に設定された id名 でセレクタを限定します。 セレクタの書式としては $("#id名") の様に id名 の前に #(シャープ) を付けます。 HTML要素の中に id名 が複数存在しても最初の要素が対象となります。 (jQuery の大元の getElementById 関数は最初の要素しか取得しないからです。)
2個のボタンはそれぞれ id名 が btn1 , btn2 と設定されているので、 それぞれのクリック時のイベント関数を宣言しています。 それぞれの関数の中では p タグの msg1 , msg2 に対応してテキストを変更しています。<html> <head> <meta charset="utf-8"> <title>test jQuery</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <p id="msg1">テストメッセージ</p> <p id="msg2">テストメッセージ</p> <button id="btn1">変更1</button> <button id="btn2">変更2</button> <script> $(function () { //<button id="btn1">のクリックイベントの関数を宣言 $("#btn1").click(function(){ //<p id="msg1">のTEXTを変更 $("#msg1").text("11111"); }) //<button id="btn2">のクリックイベントの関数を宣言 $("#btn2").click(function(){ //<p id="msg2">のTEXTを変更 $("#msg2").text("22222"); }) }); </script> </body>
上の例を以下に実際のHTMLで示します。
⇒id名の例
■class名
HTML要素に設定された class名 でセレクタを限定します。 セレクタの書式としては $(".class名") の様に class名 の前に .(ドット) を付けます。 HTML要素の中に class名 は複数存在する可能性があるので、それら全てが対象となります。
class名 が btn と設定されたボタンのクリック時のイベント関数を宣言しています。 関数の中では msg > と設定された全ての p タグに対してテキストを変更しています。 (以下の例では3個の p タグのテキストを変更しています。)<html> <head> <meta charset="utf-8"> <title>test jQuery</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <p class="msg">テストメッセージ1</p> <p class="msg">テストメッセージ2</p> <p class="msg">テストメッセージ3</p> <button class="btn">変更</button> <script> $(function () { //<button class="btn">のクリックイベントの関数を宣言 $(".btn").click(function(){ //<p class="msg">の全てのTEXTを変更 $(".msg").text("ああああああああ"); }) }); </script> </body>
上の例を以下に実際のHTMLで示します。
⇒class名の例
以上、セレクタの基本的な使い方でしたが、次回はこれらの複合的な使い方を説明したいと思います。
-
JavaScript とはブラウザで実行されるクライアントプログラムのことですが、 HTMLで記述されたWebページを動的に変更したりするために使います。
主なjavaScriptの機能としては以下の様なものがあります。■HTML要素の操作(HTMLの要素の属性値、CSSプロパティを変更、HTML要素そのものの生成)
以下のソースを見て下さい。 これは p タグで囲って テストメッセージ を表示するだけの HTML ソースです。 これをブラウザ表示させると テストメッセージ が表示されます。
<html> <head> <meta charset="utf-8"> <title>test 1</title> </head> <body> <p>テストメッセージ</p> </body> </html>
この p タグの中身を変更するには JavaScript のソースを以下の様に記述します。
このソースをブラウザで表示させるといきなり こんにちは が表示されます。
body タグに記述された script タグの中の JavaScript のソースが順次実行されるため、 このソースを読込むと同時に JavaScript のソースが実行され こんにちは のみが表示されます。<html> <head> <meta charset="utf-8"> <title>test 1</title> </head> <body> <p>テストメッセージ</p> <script> var elements = document.getElementsByTagName('p'); elements[0].innerText = 'こんにちは'; </script> </body> </html>
上のソースでいきなり document オブジェクトが出てきましたが、 これはブラウザーに読み込まれたウェブページ全体を示すオブジェクトです。 このオブジェクトの getElementsByTagName メソッドを使ってタグのオブジェクトの一覧を取得します。
getElementsByTagName に 'p' を指定し、p タグの一覧を取得します。 結果はオブジェクト配列となりますので、上の例では配列の最初のプロパティ innerText へ こんにちは を設定します。
ここで テストメッセージ を1行追加して以下の様にし、 ブラウザに表示すると、当然なのですが最初の1行目しか こんにちは となりません。 そこで、 JavaScript 部分を以下の様にすれば全てのp タグの中身のテキストを こんにちは に変更できます。<html> <head> <meta charset="utf-8"> <title>test 1</title> </head> <body> <p>テストメッセージ</p> <p>テストメッセージ</p> <script> var elements = document.getElementsByTagName('p'); for (var i = 0; i < elements.length; i++) { elements[i].innerText = 'こんにちは'; } </script> </body> </html>
getElementsByTagName 複数のタグの一覧を取得しますが、特定のオブジェクト(エレメント)を取得したい場合があります。 その場合には getElementById で指定した ID名 のオブジェクトが取得できます。
以下のソースでは各 p タグに ID を別な名前で割り当てています。 JavaScript では2行目の ID を指定して getElementById を呼出します。 返されたオブジェクトの innerText へ こんにちは を設定します。<html> <head> <meta charset="utf-8"> <title>test 1-2</title> </head> <body> <p id="msg1">テストメッセージ</p> <p id="msg2">テストメッセージ</p> <script> var element = document.getElementById('msg2'); element.innerText = 'こんにちは'; </script> </body> </html>
■HTML要素などによる動作の指定
上の例では、ソースをブラウザで表示したとたんにメッセージが変化していましたが、 これでは面白くないので、ボタンを2個設置して、ボタンを押下した時にそれぞれのメッセージが変化する様に ソースを変更してみます。
<html> <head> <meta charset="utf-8"> <title>test 1-3</title> </head> <body> <p id="msg1">テストメッセージ</p> <p id="msg2">テストメッセージ</p> <button onclick="changeMsg('msg1');">msg1</button> <button onclick="changeMsg('msg2');">msg2</button> <script> //メッセージ変更関数 function changeMsg(strId) { var element = document.getElementById(strId); element.innerText = 'こんにちは'; } </script> </body> </html>
上のソースでは各ボタン要素のマウスクリックイベントが発生した時に、関数 changeMsg を呼出す様にしています。
実際に以下のボタンをクリックして下さい。 テストメッセージ が こんにちは に変化します。テストメッセージ
テストメッセージ
onclick の様なイベントは他にもいろんなものがありますが、以下に一部を示します。 必要に応じて各イベントの処理を行います。- onkeydown :キーが押した時のイベント
- onkeyup :キーを放した時のイベント
- ondblclick :マウスの左ボタンをダブルクリックした時のイベント
- onmouseover:マウスのカーソルを要素の上に合わせた時のイベント
- onmouseout :マウスのカーソルを要素の上から外した時のイベント
いろんな動作に関してのイベント処理の例は別の機会に追々紹介したいと思います。
■Webサーバとの通信によるデータのやり取り(Ajaxを利用)
Webページ上でページを移動しないで、サーバからデータを取得し一部分を動的に変更したい場合があります。 この時に用いる方法がAjax(Asynchronous JavaScript XML)と言われるものです。 JavaScript でサーバ側から渡されるXMLデータ(JSONデータもできます)をページ上に反映させます。 手順としては以下の通りです。
- クライアント側からサーバ側にデータ取得等に必要な引数等を送信する
- サーバ側は引数データを受け取って返信すべきデータを整形しクライアント側に送信する
- クライアント側はサーバ側から受信したデータをページ上に表示する
Ajax の処理には XMLHttpRequest というオブジェクトを使います。 XMLHttpRequest のメソッド、プロパティは以下の通りです。
メソッド 説明 open(method, url
[, async [, user[, pass]]])新しく作成されたリクエストを初期化する
method : HTTP リクエストメソッド("GET", "POST", ...)
url : リクエストを送信する URL を表す
async : 操作が非同期的に行われるかどうかを示します
user : 認証プロセスで使用するユーザー名
pass : 認証プロセスで使用するパスワードsend([body]) リクエストをサーバーに送信します
body : POST リクエストの場合に使用しますabort() メソッドは、すでに送信された要求を中止します プロパティ 説明 onreadystatechange EventHandler で、これは readyState 属性が変化する度に呼び出されます readyState リクエストの状態を返します
(0):UNSENT XMLHttpRequest クライアントは作成済みだが、まだ open() メソッドは呼ばれていない
(1):OPENED open() が呼び出し済み
(2):HEADERS_RECEIVED send() は呼び出し済みでレスポンスヘッダーを受け取り済み
(3):LOADING レスポンスボディを受け取り中。ResponseType が "text" か空文字の場合、responseText はロードするごとに部分テキストを持つ
(4):DONE 取得操作が完了している(データ転送が完全に成功したか失敗したかどちらか)responseText リクエストに対するレスポンスがテキスト形式で入った DOMString を返すか、 リクエストが失敗した場合や、まだ送信されていない場合は null を返す responseXML リクエストに対するレスポンスが入った Document を返すか、 またはリクエストが成功しなかった場合、まだ送信されていない場合、 XML または HTML として解釈できなかった場合は null を返す status リクエストに対するレスポンスのステータスを返す statusText HTTP サーバーから返ってきたレスポンス文字列が入った DOMString を返す
以下に Ajax 処理の簡単な例を示します。 このソースで行われるのは、ボタンを押下した時にAjax処理関数を呼出します。 Ajax の手順は以下の通りです。- XMLHttpRequest オブジェクトの生成
- サーバへのリクエストの設定を行う(ここでは GET でこのソースが存在するディレクトリのテキストファイルが対象)
- イベントハンドラの登録(データ受信が完了でステータスが正常の場合、受信データを表示)
- リクエストをサーバーに送信
イベントハンドラの登録では、ここで処理が動作するわけでは無く、単に関数の登録のみを行っています。 XMLHttpRequest オブジェクトの readyState プロパティの値が変化した時に起動される関数を定義しています。 結果的にこの関数が走るのは send された後になります。
<html> <head> <meta charset="utf-8"> <title>test ajax</title> </head> <body> <h1>test ajax</h1> <p id="msg1">テストメッセージ</p> <button onclick="getAjax();">Ajax</button> <script> //Ajax関数 function getAjax() { //XMLHttpRequestの生成 var xhr = new XMLHttpRequest(); //サーバへのリクエストの設定を行う xhr.open('GET', 'test_ajax.txt'); //イベントハンドラの登録 xhr.onreadystatechange = function () { if (xhr.readyState == 4) { //データ受信完了 if (xhr.status == 200) { //ステータスが正常の場合、返信データを表示 var elem = document.getElementById("msg1"); elem.innerText = xhr.responseText; } else { alert("status = " + xhr.status); } } }; //リクエストをサーバーに送信 xhr.send(); // xhr.abort(); } </script> </body> </html>
実際の Ajax 処理では上記の様に XMLHttpRequest そのものでプログラムするわけでは無く、 JQuery と呼ばれるライブラリを利用し、もっと簡略化された記述で処理を行います。 この辺りは別の機会に紹介したいと思います。