サイドバーのリンクをCSVファイルで管理し、JavaScriptで表示

質問

お世話になります。
いつも素晴らしいアドバイスをありがとうございます m(__)m

本日は【WebサイトのサイドバーのリンクをCSVファイルで管理し、JavaScriptで表示】したく投稿させていただきました。

◇JavaScriptでCSVファイル読み込み表示
５～１０個のリンクを表示したい
CSVファイルの1列目はアンカーテキスト、2列目にURL

◇CSVのデータをランダムに表示

上記のようにJavaScriptで管理する方法が可能でしょうか。
アドバイスお願いいたします。

現在、JavaScriptの勉強を始めたまったくの素人でございます。
参考になるサイト、書籍の情報もお願いいたします。

回答No.2

OKbokuzyo

No.1です。

よく見るとインデントがズレてる‥orz
↓正しく書き直した(※なんかまだミスってそうな気がするが）

//HTTPRequestオブジェクトの取得
var HttpObj = new XMLHttpRequest();
//コールバックメソッドを指定
HttpObj.onreadystatechange = function(){
　　//CSVファイル着信完了時に処理を開始
　　if(HttpObj.readyState == 4){
　　　　//レスポンスの取得
　　　　var res = HttpObj.responseText;
　　　　//改行コード取得
　　　　var n = String.fromCharCode(10);
　　　　//改行で区切る
　　　　var Line = res.split(n);
　　　　//１行ずつ取り出す
　　　　for(var i = 0;i < Line.length;i++){
　　　　　　//カンマで区切る
　　　　　　var Data = Line[i].split(",");
　　　　　　//id指定かなんかでどこぞのタグに<a>タグを追加
　　　　　　var dokozo = document.getElementById("dokozo");
　　　　　　dokozo.innerHTML("<a href='" + Data[1] + "'>" + Data[0] + "</a>");
　　　　}
　　}
}
//CSVファイルを指定
HttpObj.open("GET","/xxxx.csv");
//URIのエンコードヘッダを指定
HttpObj.setRequestHeader("Content-Type","application/x-​www-form-urlencoded");​
//リクエスト送信
HttpObj.send("");

回答No.1

OKbokuzyo

- - Ajaxを利用した例 - -
１．HTTPリクエストを利用してCSVファイルを取得。
２．読み込んだファイルを改行で分割。
３．さらにカンマで分割。
４．<a>タグを追加。

//HTTPRequestオブジェクトの取得
var HttpObj = new XMLHttpRequest();
//コールバックメソッドを指定
HttpObj.onreadystatechange = function(){
　　//CSVファイル着信完了時に処理を開始
　　if(HttpObj.readyState == 4){
　　　　//レスポンスの取得
　　　　var res = HttpObj.responseText;
　　　　//改行コード取得
　　　　var n = String.fromCharCode(10);
　　　　//改行で区切る
　　　　var Line = res.split(n);
　　　　//１行ずつ取り出す
　　　　for(var i = 0;i < Line.length;i++){
　　　　　　//カンマで区切る
　　　　　　var Data = Line[i].split(",");
　　　　　　//id指定かなんかでどこぞのタグに<a>タグを追加
　　　　　　var dokozo = document.getElementById("dokozo");
　　　　　　dokozo.innerHTML("<a href='" + Data[1] + "'>" + Data[0] + "</a>");
　　　　}
　　}
　　//CSVファイルを指定
　　HttpObj.open("GET","/xxxx.csv");
　　//URIのエンコードヘッダを指定
　　HttpObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
　　//リクエスト送信
　　HttpObj.send("");
}

ざっと書くとこんな感じ。
上記例はクロスブラウザなりなんなり諸々は考慮せずに書いているから
勉強の足がかり程度に参考にしてくんろ。
（多分上記例をそのまま載っけてもIE6以前のブラウザは動かない。IE系はXMLHttpRequest関数は持たず、ActiveXObjectを使うので）

余談だけども、CSV使うくらいならJSONとかの方が手軽でオススメ。
あと、AjaxではXMLで取得するのが主流だけれども、単純なデータ構造の場合は
CSVやJSONの方が手軽に扱えるね。