top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_396

創るmetaboy 紹介したリンク集:更新!現在 167件 、今回はAjax化・・・ 【創ったmetaboy】

 2008-10-28
また1ヶ月が終わるので、整理・・整理・・
紹介してきたサイトやツールのURLの整理を行っておこう。
> (上部メニュー [ 紹介したリンク集 ])
(注)今回からURLが変更されました。

だが、これ今まではさほど多くなかったので(106件)
力技でJavaScript変数利用して登録していたのだが・・・
このままじゃね。Ajax化しておいた。

Ajaxでの「非同期通信」の特性から
 少し改造に時間をかけてしまった・・・


 ※すみません。今回長文・・・なので
  追記に ▼

FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ


more[ 手順記録 ]

■関数の用意

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/,1円クリック募金,2008/07/17
DONATION.JP,http://www.donation.jp/,1円クリック募金,2008/07/17



■html の onload で、GetTextFile(); を呼んで
 あらかじめ
 id で用意しておいた
 <div id="data_tables"></div>
 <div id="data_alls"></div>
 の innerHTML を置き換える

なぜこんなことになったか、というと
それは、Ajax非同期通信を利用したため。
通常の インタプリンタ的に上から順に進んでゆくのではないので
トリガを立てた後、ファイル読み込み完了の
イベントを察知して、動的生成しているわけです。

commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/396-48dc8e06
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。