ajaxによるcsvデータの絞り込み検索について

質問

http://s-ej.com/sample/ajax/ajax0003/

上記、サイトを基にajaxによるcsvデータの絞り込み検索の出来るサイトを作っています。
ですが、csv内のデータ数が多いためIE8以前のブラウザで確認すると、
スクリプトの警告文が表示されてしまいます。
（chromeやIE9以降ですと読み込みが若干遅いですが、問題なく動作します。）

どなたか改善策等お分かりになる方がいらっしゃいましたらご教授頂ければと思います。
宜しくお願いします。

回答No.4

bvltiggeari · ベストアンサー

> ただ、残念ながらIE８以前のブラウザでは警告文が出てしまいました。
おぅふっ(汗)
そうですかぁ…。

> このページのスクリプトが、Internet Explorer の実行速度を遅くしています。
IEももう少し丁寧に教えてくれたらいいんですけどね(笑)

> 「いいえ」ですと全く動かず、何度も上記文が表示されてしまいます。
何回も「いいえ」を押しまくってるといつか動きそうな気もしますが(^^;

あとは以下の1行を追加してみる…というのもありますが
あまり効果は期待しないで下さい。
/*@cc_on _d=document;eval('var document=_d')@*/
ajax.jsの1番上に書くと、IEでの描画速度が速くなる…
かもしれないおまじないです。
（稀に爆発的に速くなることもあるんですけどね）

現実的なのはNo.2で回答されているfujillin様の方法だと思います。
（ここまで来て何を言う！）
csvファイルのあるサーバの構成がどうなっているか分からないので
先のソースのように詳しくは書けませんが、概要としては

１．http通信でサーバにチェックの状態を送る
getAjaxData()を以下の内容に書き換えます。
$.ajax({
type: "POST", // GETでもいいですが
url: "some.php", // サーバのスクリプトのURL
data: "check1=true&check2=false", // チェック状態、実際には動的に変えます
success: function(data){ // 通信成功時の挙動
outputSuccess(data)
}
});
みたいな感じでhttp通信で絞られた状態のcsvを取得

２．サーバのスクリプト
makeArr=function(data)でやってる内容をそのままphpとか
シェルとかバッチとかで作る。
チェック状態はgetParamみたいな関数で。

３．outputSuccess(data)のvar arr=makeArr(data);は消す

と言った感じでしょうか。
ここまでくるとさすがにそれなりの知識も必要になってきます。
が、やって損はない技術なので、本件が焦りの作業でなければ
やってみるのもオススメします。

ガヤったくせに大してお力になれず…orz

回答No.5

bvltiggeari

何度もすみません。

よくよく考えたらcsvファイルの読み込みが遅いのに
ファイル分割したって意味ないですね…。
ムダなお手数おかけしてしまいました(泣)
サーバを再構成されるということであれば力になりますので
諦めずガンバって下さい！

お礼

ここまで色々、策をお教えいただき有難うございました！

＞ムダなお手数おかけしてしまいました
とんでもないです、本当に有難うございます。

先ほどご教授いただきました件、あきらめずに色々調べながらチャレンジしてみます。
また、わからない点があれば質問させていただきます。
恐れ入りますがその際は、ぜひ宜しくお願い致します。
貴重なお時間を割いてご回答いただきありがとうございました。

回答No.3

bvltiggeari

No.1です。

失礼ながらテストは行っていないので、
もしかしたら動かないかもしれません。
なので解説をお読み頂きつつ、分からない部分があれば
また聞いて頂ければと思います。
（テストしたいのはやまやまですが、大量のcsvの用意が厳しいので…）

では、リンクのURLのソースでご説明しますね。
（ご提示いただいた個所も使いますが、それだけではないので）

１．csvファイルを分ける
まず、以下がcsvファイルの格納パスは分かると思います。
xmlPath='./csv/data.csv';
これを複数に分割します。（分割は取り敢えずテキトーに3分割とかでいいです。）
で、それを下記のように宣言します。
xmlPath1='./csv/data1.csv';
xmlPath2='./csv/data2.csv';
xmlPath3='./csv/data3.csv';

２．全てのcsvを読み込むようにする
次にご提示いただいたソースの部分を修正します。
function getAjaxData(){
fieldArr = []; // ここで初期化
// 1回目処理
$.ajax({
url:xmlPath1,
error:outputError,
success:outputSuccess
//cache: false
});
// 2回目処理
$.ajax({
url:xmlPath2,
error:outputError,
success:outputSuccess
//cache: false
});
// 3回目処理
$.ajax({
url:xmlPath3,
error:outputError,
success:outputSuccess
//cache: false
});
}
ようするに3つに分けたから3回読ませる…というだけです(^^;
この際に、フィールド配列を初期化します。（fieldArrです。）
フィールド配列は３で説明します。

３．取得後の格納方法を変える
3つに分けたので、連結が必要です。
getAjaxData ／ success時処理の下にある
function outputSuccess(data)の記述を以下のようにします。

var fieldArr = []; // ここにfield配列を宣言して、functionに依存しないようにする
var addCount = 0; // loadNaviとかを呼び出すタイミングを計るカウンタ
function outputSuccess(data){
addCount = addCount + 1;
var arr=makeArr(data);
var localArr = fieldArr;
fieldArr = localArr.concat(arr);
var src=makeSrc(fieldArr);
if(addCount == 3) {
$(outputItem).hide().html(src);
loadNavi();
$(outputItem).fadeIn(300);
loadComma();
addCount = 0;
}
}
今回は3回と静的回数にしています。
動的に変えたい場合はもうひと工夫必要です。
fieldArrをこのように外だしすることで、
初期化されてしまうのを防ぎます。
addCountは、取得の度にloadNavi()等を呼び出しては
マズイので、3になってから実行とさせます。

ザックリとの説明とソースになってしまいましたが、
このような形でイケる…かもしれません。
もしchromeでも表示されなくなってしまったら私のミスです。
見直しますのでおっしゃって下さい。

最後に再確認ですが「csv内のデータ数が多いため」で
間違いないのですよね？
データを減らせば表示できるんですよね？

もしお手間でなければ「スクリプトの警告文」も
回答してもらえると分かりやすいかもです。

お礼

わざわざスクリプトまでご確認いただき有難うございます。
また、大変ご丁寧に解説いただいてありがとうございます！
分割は解説頂きました通りにしたところ問題なくできました。
ありがとうございます。
ただ、残念ながらIE８以前のブラウザでは警告文が出てしまいました。

＞再確認ですが「csv内のデータ数が多いため」で間違いないのですよね？
はい、間違いございません。
説明不足でしたが、行数でいいますと620行、列が50列というcsvファイルになります。
これを200行にしたところ問題なく表示できました。

スクリプトの警告文につきましても説明不足で、大変失礼いたしました。
下記の文言が出てしまいます。
=================================================================================
【このスクリプトの実行を中止しますか？】
このページのスクリプトが、Internet Explorer の実行速度を遅くしています。
スクリプトを実行し続けると、コンピューターが反応しなくなる可能性があります。
スクリプトを中断しますか?
=================================================================================
「はい」を選択すると、ajaxで指定したエラー文が表示され、
「いいえ」ですと全く動かず、何度も上記文が表示されてしまいます。

もし解決できる可能性がございましたら、お手数でなければご教授いただければ幸いです。
宜しくお願い致します。

回答No.2

fujillin

たまたま、最近似たようなことをやりました。

利用は1000件程度のデータ数までを想定したタブ区切りのデータですが、
先ほど、コピペで3500件ほどにして（テキストデータで800kb程度）試してみましたが、警告は出ませんでした。（IE6、IE8、fx16)
もともとの予想がせいぜい1000件程度なので、データベースなどを利用せずサーバでの処理も行なわないで、最初にデータを（一度だけ）読込むようなな方法をとったのですが…

＞csv内のデータ数が多いため
データ数が多いのであれば、絞込みはサーバ側で行い結果のみ返すようにするとか、結果の数が膨大であるのなら一度に表示するデータ数分だけを返すようにすれば各々の速度も向上しますし、トラブルもなくなるかと思います。

一般の検索サイト（googleなど）では、ヒット総数が膨大な場合が多いので、当然ながら後者の形式で（ajaxではない場合がほとんどですが）1度に表示する内容だけをサーバから送っているはずと思います。

お礼

ご丁寧にご回答いただき有難うございます。
似たようなことをされたということで、できないことはないんだなと思い安心しました。

＞最初にデータを（一度だけ）読込むようなな方法をとった
とのことでしたが、javascript側で
最初にデータを取得し、絞り込み検索をした場合、再度データを取得しに行くのではなく
最初に取得したデータ内で条件と合ったものが表示されるという仕組みに
されているのですね。

javascriptについて知識が浅いためハードルが高そうですが、調べてみます。
もし、簡単にできるようでしたらご教授いただければ幸いです。
有益な情報をいただき有難うございます。

回答No.1

bvltiggeari

> csv内のデータ数が多いため
ということであれば、csvファイルを複数にして
複数回取得しにいき、JavaScript内でデータを結合すれば
できるんじゃないでしょうか？
（やってないので、できなかったらすいません…）

お礼

さっそくご回答いただき有難うございます。
あまりajaxに詳しくないため、java内でのデータ結合するための
記述方法を調べてみたのですが、見つからなかったため質問させていただきます。

以下部分でデータ取得しているかと思いますが（間違っていたらすいません）
恐れ入りますがどのような記述にするとデータ結合ができますでしょうか。
ご教授いただければ幸いです。

xmlPath='./csv/data.csv';
～～
function getAjaxData(){
$.ajax({
url:xmlPath,
error:outputError,
success:outputSuccess
//cache: false
});
}

宜しくお願い致します。