jQueryによるシンプルなＡＪＡＸの説明

jQueryによる最もシンプルなAJAXの実装について説明します。

ページの遷移なしに、ＷＥＢサーバーにアクセスしてデータを取得し、ページの一部を書き換えます。

例えば、サーバー上のＤＢにあるスタッフのマスターテーブルにスタッフ番号で問い合わせをして、
氏名を返すような例を以下に示します。

● HTMLの本文内

スタッフ番号を入力するためのテキストボックスと、問い合わせ結果を表示するための、
テキスト領域を定義します。

<input ID="スタッフ番号" name="スタッフ番号" value="" size="10"/>
<span id="スタッフ名前確認"></span>

● HTMLのヘッダセクション内

スタッフ番号の入力テキストボックスからフォーカスが移動した際に、AJAXの関数を呼び出すよう、
jQueryにて記述します。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script language="javascript">

$(document).ready(function() {

$("#スタッフ番号").blur(function(){ //テキストのアウトフォーカス

GetStaffName(); //関数を呼び出す

});

function GetStaffName () {

if ($("#スタッフ番号").val() != "") { //もし空白でなかったら

$.get("default.aspx", { act: "AJAXQStaffName" , STAFFNO: $("#スタッフ番号").val() } , function(data){
$("#スタッフ名前確認").text(data);
});

}

}
});

</script>

● サーバー側

サーバー側はあらゆる言語が考えられますが、上の例のようにすると、

default.aspx?act=AJAXQStaffName&STAFFNO=入力された番号

のように提出されますので、それに沿ってコーディングを行い、
Response にて結果を返してあげます。例えば vb.net ならば、

act = Request.Querystring("act")
STAFFNO = Request.Querystring("STAFFNO")

のように値を取得し、それによってＤＢなどからデータを取り出して、

Response.Write("名前")
のようにして、クライアント側に結果を返します。

以上で、説明は終了です。