一ヶ月ぶりくらいになりますが、オブジェクト指向で開発の最初から最後までの手順例です。
現在、「いままでのまとめ」にある、「（４）フレームワークにもとづき、クラスなどの開発手順、雛形の確定」をやっています。前回、Viewの概要について説明し、JavaScript(AJAX)で、サーバーにアクセスし、データを取ってくるという説明をしました。そして、今回、その「サーバーにアクセスし、データを取ってくる」共通部分について、説明することになってました。今回はその説明です。
■プログラムの中身
で、そのサーバーアクセスプログラムなのですが、こんなのを作ります。
●サーバーアクセス
（１）httpRequest(method,target_url,args,func)
＜＜引数について＞＞
method:"POST"または"GET"
target_url:アクセスするところ
args：引数を連想配列で
func：帰るときの関数
＜＜内容＞＞
argsで渡された引数をエンコードし、target_urlにアクセスします。
最終的に、アクセスしてうまくいくとfunc（httpObj）が呼び出されます
（httpObjは、結果のXMLです）
＜＜注意＞＞
func（httpObj）で結果が返ってくるまで、同時に何回も呼びださないで
ください（httpObj、retFuncを外部変数で共通化してとっているので）
●結果処理
（２）getRetCode(xtree)
＜＜引数＞＞
xtree:(1)のhttpObjに対して、httpObj.responseXMLしたもの
＜＜内容＞＞
結果から、retcode（処理結果）を受け取ります
（３）getRecCount(xtree)
＜＜引数＞＞
xtree:(1)のhttpObjに対して、httpObj.responseXMLしたもの
＜＜内容＞＞
結果が検索型の場合、レコード数を取得します
（４）getRecItemValue(xtree,pos,tag)
＜＜引数＞＞
xtree:(1)のhttpObjに対して、httpObj.responseXMLしたもの
pos：何番目のレコード
tag：項目名のタグ
＜＜内容＞＞
結果が検索型の場合、指定番目のレコードの指定項目の値を取得します
これ以外の関数は、内部で使用するものです
■使い方の概要
・サーバーアクセス時にhttpRequest(method,target_url,args,func)でアクセスします
・func（httpObj）に帰ってきたら、編集型でも検索型でもgetRetCodeで結果を受け取り、
結果に応じた処理をします
・検索型の場合、getRecCountでレコード数を指定し、getRecItemValueでレコードの値を取得します。
■ソース
ちょっとメモ程度に書いたもので、テストしてないので、動くかどうか保証の限りではないですが、とりあえず載せときます（自己責任で見てね ＾＾；）
//*==============================================//
//* *//
//* アクセス共通関数 *//
//* *//
//*==============================================//
// 共通変数
var httpObj; // データ
var timer; // タイムアウト用
var retFunc; // 戻り関数
//*==============================================//
//* 関数：httpRequest() *//
//* 内容：アクセス関数 *//
//*==============================================//
function httpRequest(method,target_url,args,func)
{
//==============================//
// 配列をシリアル化 //
//==============================//
buf = "";
flgs = "";
for(key in arr)
{
buf = buf + flgs + key + "=" + encodeURIComponent(args[key]);
flgs = "&";
}
//==============================//
// getで読まないこと対策 //
//==============================//
if ( ( method == "GET") || ( method == "get" ) )
{
buf = buf + flgs + "nowtime="+ new Date().getTime();
}
//==============================//
// 帰るところ保存 //
//==============================//
retFunc = func;
//==============================//
// XMLHttpRequest取得 //
//==============================//
try
{
if(window.XMLHttpRequest)
{
httpObj = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
httpObj = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert('エラーです');
return;
}
}
catch(e)
{
alert('エラーです');
return;
}
// タイマーセット
timer = setInterval("timeout()",60000); //60秒にセット
//==============================//
// データを取得する //
//==============================//
httpObj.open(method, target_url, true);
httpObj.onreadystatechange = RetEntry;
httpObj.send(buf);
return;
}
//*==============================================//
//* 関数：timeout() *//
// 内容：タイムアウト *//
//*==============================================//
function timeout()
{
clearInterval(timer);
httpObj.abort();
// alert('タイムアウト'); // 表示する場合
}
//*==============================================//
//* 関数：RetEntry() *//
//* 内容：XML読み取ったあと *//
//*==============================================//
function RetEntry()
{
if ( httpObj.readyState == 4 )
{
clearInterval(timer); // タイマーとめる
if ( httpObj.status == 200)
{
if ( retFunc != null )
{
retFunc(httpObj);
}
}
else
{
alert("エラーNo "+httpObj.status);
}
}
}
//*==============================================//
//* 関数：getRetCode() *//
//* 内容：処理結果の取得 *//
//*==============================================//
function getRetCode(xtree)
{
retCode = "";
komoku = node.getElementsByTagName("retcode");
if ( komoku.length ＞ 0 )
{
retCode = komoku[0].firstChild.nodeValue;
}
return retCode;
}
//*==============================================//
//* 関数：getRecItemValue() *//
//* 内容：指定番目のレコードの指定項目の値 *//
//*==============================================//
function getRecItemValue(xtree,pos,tag)
{
retCode = "";
// レコードを取得する
list = xtree.getElementsByTagName("item");
if ( list.length ＞ pos )
{
node = list[pos];
komoku = node.getElementsByTagName(tag);
if ( komoku.length ＞ 0 )
{
retCode = komoku[0].firstChild.nodeValue;
}
}
return retCode;
}
//*==============================================//
//* 関数：getRecCount() *//
//* 内容：レコード数 *//
//*==============================================//
function getRecCount(xtree)
{
// レコードを取得する
list = xtree.getElementsByTagName("item");
return list.length;
}
|
(上記＜ ＞ ￥は、本当は半角です）
次回は、これの利用方法です。
アクセス
トータル
ランキング
