jQueryを使ってAjax通信を行う

	$(function() {
		$("#test1").click(function(){ // #test1はボタンです
			$("div.test1").text("データを取得しています..."); // ajax通信中に表示させるメッセージ
			$.get("data1.txt",function(txt){ // data1.txtを取得する。取得した結果を変数txtに格納し
				$("div.test1").text(txt); // txtの内容を表示する
			});
		});
	});

さて、ここまでは htmlとjQueryの話です。Cache'は関係ありません。
Cache'でjQueryを使ってajax通信する場合について考えてみると、

呼び出す側　(ajax通信を実行する側、つまりブラウザ上で動作するロジック)は特にhtmlとcspとで違う点はありません。 CSPページ先頭の<script>タグでjQueryを呼び出し、ajax通信を行うコードを書くだけです。

呼び出される側でCache'を使うとき、CSP(html)形式、XML形式、JSON形式で応答する方法が考えられます。
それぞれについてどのように作るか考えてみます。

呼び出し先ページがCSPの場合は、特に何も考慮することはなく普通のCSPページと同じ作り方をすれば良いです。

ajaxで取得する際に、jQueryのセレクタを指定することで、必要な部分だけを取得することができます。
このサンプルはこちらのページのid=newsの要素を動的に取得し、その部分だけを表示しています。
このように背景色などhtmlの装飾を、受け取ったページでそのまま使用することができます。スタイルシートを使用する場合は、この例のように直接style=""内に記述するか、外部cssファイルに書き出して双方から参照することで、表示を揃えることができす。

呼び出し先ページがXML形式の場合について考えてみます。
ちょうどWebServiceのサンプルとしてSOAP.Demo.clsが用意されています。デフォルトでインストールしてある環境ならhttp://localhost:57772/csp/samples/SOAP.Demo.clsです。


この中のQueryByNameを使ってみます。name=Aで問い合わせを行うと、次のようなXMLが応答されます。


このXMLをjQueryで整形し、ページ中に表示してみます。
このようなページを作成します。
ボタンが押されたときにテキストボックスの中身を引数として問合せを実行し、応答されたXMLの内容をテーブルで表示するスクリプトは次のようになります。

$(function() {
	$("#xmlget").click(function(){
		$("div.demo").show();
		var url = "http://localhost:57772/csp/samples/SOAP.Demo.cls?soap_method=QueryByName&name=";
		url += $("input.queryname").val();
		
		$.get(url,function(xml){
			$(xml).find("QueryByName").each(function(i){
				var name = $(this).find("Name").text();
				$("#tbl").append("<tr><td>"+i+"</td><td>"+name+"</td></tr>");
			});
			$("div.demo").hide();
		});
	});
});

　ソースコードのダウンロード

テキストボックスにAと入力してClickボタンを押すと、下のように結果が表示されます。


この方式の最大のメリットはWebServiceを他のクライアント、例えば.NetやJavaなど、いろいろな所で同じWebServiceを使いまわすことができることです。

WebServiceなどではXMLより軽量で取り扱いの簡単なJSON形式が好んで使われることがあります。
バージョン2009の時点ではCache'はJSONのインターフェイスを用意していないので、%SOAP.WebServiceをオーバーライドしてJSONのインターフェイスを作成することろから始めます。

とりあえず、固定文字列を返す例を作ってみます。
以下のようなtest.Jsonクラスを作成します。 コンパイルし、ブラウザから接続すると以下のように表示されます。


この内容をXMLと同様に、クライアント（ブラウザ）側で整形して表示してみます。

ボタンが押されたときにJSON問合せを実行し、応答された内容をテーブルで表示するスクリプトは次のようになります。

	$(function() {
		$("#xmlget").click(function(){
			$("div.demo").show();
			$.getJSON("http://localhost:57772/csp/test/test.Json.cls",function(obj){
				for(i=0; i>obj.count; i++) { // 応答された製品の個数分ループ
					var prod = obj.Products[i]; // 個々の製品オブジェクトをprodに格納
					
					// htmlとして整形
					$("#tbl").append(">tr<>td<"+i+">/td<>td<"+prod.name+">/td<>td<"+prod.description+">/td<>/tr<");
				}
				$("div.demo").hide();
			});
		});
	});

実行すると下のように表示されます。

　
先程XMLのところでメリットは色々なクライアントから使えると書きましたが、このJSONも.Netでサポートされるようになったりと、使えるところがどんどん広がっているようです。

　　参考： jQueryではじめるAjax - gihyo.jp