創るmetaboy 紹介したリンク集：更新！現在 167件 、今回はAjax化・・・ 【創ったmetaboy】
2008-10-28
また１ヶ月が終わるので、整理・・整理・・紹介してきたサイトやツールのURLの整理を行っておこう。
＞ （上部メニュー [ 紹介したリンク集 ]）
(注）今回からURLが変更されました。
だが、これ今まではさほど多くなかったので（106件)
力技でJavaScriptの変数利用して登録していたのだが・・・
このままじゃね。Ajax化しておいた。
・Ajaxでの「非同期通信」の特性から
少し改造に時間をかけてしまった・・・
※すみません。今回長文・・・なので
追記に ▼
[ 手順記録 ]■関数の用意
JavaScript で・・・
・初期変数を設定して
// 用意してある txtファイル
var tartxt =
"http://blog-imgs-27.fc2.com/m/e/t/metaboy/stocklist_links.txt";
var array_items = new Array(); var tempnum=0;
// 取得テキスト格納用
var textvals = ""; var outstrs = ""; var outstr = "";
var httpobj = null;
・トリガ となる関数を用意
function GetTextFile() {
// XMLHttpRequestオブジェクト生成
httpobj = createXMLHttpRequest(SetData);
if (httpobj) {
// 用意してある txtファイルをオープンする
httpobj.open("GET", tartxt , true );
//第3引数は、true/false : 非同期通信/同期通信
httpobj.send(null);
}
}
・取得したテキストを格納する関数
function SetData() {
// readyStateの値が 4(ロード完了) statusの値が 200(成功)
if ((httpobj.readyState==4)&&(httpobj.status==200)) {
textvals = httpobj.responseText;
array_items = parseCSV(textvals,',');
outstr = "<div id='bodycon'>";
outstr += "<div class='skinCon'>";
outstr += "<div class='fakeContainer'>";
outstr += "<table id='linktable'>";
outstr += "<tr>";
outstr += "<th>リンク先名称</th>";
outstr += "<th>種類</th>";
outstr += "<th>リンク先URL</th>";
outstr += "<th>登録日</th>";
outstr += "</tr>";
for(var i = 0;i<array_items.length;i++){
if((array_items[i][0]!='')&&(array_items[i][1]!='')){
outstr += "<tr>";
outstr += "<td style='height:15px;'>";
outstr += "<a href='" + array_items[i][1]
+ "' target='_blank' rel='nofollow'>";
outstr += array_items[i][0] + "</a>";
outstr += "</td>";
outstr += "<td>" + array_items[i][2] + "</td>";
outstr += "<td>";
outstr += "<a href='" + array_items[i][1]
+ "' target='_blank' rel='nofollow'>";
outstr += array_items[i][1] + "</a>";
outstr += "</td>";
outstr += "<td>" + array_items[i][3] + "</td>";
outstr += "</tr>";
}
}
outstr += "</table>";
outstr += "</div>";
outstr += "</div>";
outstr += "</div>";
tempnum = array_items.length;
document.getElementById("data_alls").innerHTML
= "現在：" + tempnum + "件";
document.getElementById("data_tables").innerHTML = outstr;
(function () {
new superTable("linktable", {
cssSkin : "Sky",
fixedCols : 1
});
})();
}
}
・XMLHttpRequestを生成 する関数を用意
（と、いっても、もうほとんどスタンダードな方法ですが・・・）
function createXMLHttpRequest(valChange){
var XMLhttpobject = null;
//IE(Win)では、ActiceXオブジェクト を利用するから
if(window.ActiveXObject){
try {
//IE(6以降)であれば、高速動作の Msxml2.XMLHTTP を利用
XMLhttpobject = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
//IE(6以降)以外は、Microsoft.XMLHTTP を利用
XMLhttpobject = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
//利用できない
return null;
}
}
//IE(Win)以外
} else if(window.XMLHttpRequest){
XMLhttpobject = new XMLHttpRequest();
} else {
//利用できない
return null;
}
if (XMLhttpobject) XMLhttpobject.onreadystatechange = valChange;
return XMLhttpobject;
}
・こちらは
CSVテキストをパースする関数
区切り文字：,
引用符："
※これは、最初自身で創ろうかとも思ったが、
文系大学的IT系の悲哀 さんに
正規表現利用しまとめられているものが あったので、
利用させていただく。ありがとうございました。
（他にも 使えそう）
function parseCSV(text, delim) {
if (!delim){ delim = ','; // 区切り文字のデフォルトはカンマ
// 特別に置き換える文字群の設定
var tokenizer = new RegExp(delim + '|\r?\n|[^' + delim
+ '"\r\n][^' + delim + '\r\n]*|"(?:[^"]|"")*"', 'g');
var record = 0, field = 0, data = [['']], qq = /""/g;
text.replace(/\r?\n$/, '').replace(tokenizer, function(token) {
switch (token) {
case delim:
data[record][++field] = ''; break;
case '\n': case '\r\n':
data[++record] = [''];
field = 0; break;
default:
data[record][field] = (token.charAt(0) != '"') ?
token : token.slice(1, -1).replace(qq, '"');
}
});
return data;
}
}
以上を jsファイル化して、インクルード。
■データの用意（例）
今後はこの形式で用意してアップロードしてやればいい
FC2ブログのテンプレート工房,http://10plate.blog44.fc2.com/
blog-entry-119.html,ブログカスタマイズ,2008/07/17
イーココロ,http://www.ekokoro.jp/,１円クリック募金,2008/07/17
DONATION.JP,http://www.donation.jp/,１円クリック募金,2008/07/17
■html の onload で、GetTextFile(); を呼んで
あらかじめ
id で用意しておいた
<div id="data_tables"></div>
<div id="data_alls"></div>
の innerHTML を置き換える
なぜこんなことになったか、というと
それは、Ajax で非同期通信を利用したため。
通常の インタプリンタ的に上から順に進んでゆくのではないので
トリガを立てた後、ファイル読み込み完了の
イベントを察知して、動的生成しているわけです。
