jQuery または JavaScript の XMLHttpRequest でサーバー上にあるテキストファイルを読み込んでページに表示する例。
例えば cron を使って定期的にアマゾントップセラーの情報を取得し、サーバー上にテキストファイルとして保存しているとする。 その情報をサイト(ページ)に表示する方法はいろいろあるが、私は PHP を使ってサイトを作っているので、基本的に PHP で処理してページに表示させている。 ただ、JavaScript で処理したい場合もたまにある。 普段あまり JavaScript を使わないので、ここでは自分のサイトで使ったコードをメモしておく。
JavaScript で何かしようと思ったら、まず思いつくのが jQuery の利用。 ここでは example.txt を読み取り、その中身を処理し、id="example" という要素にそれを追加している。 ファイルの中身は1行ごとに商品情報が書かれていて、それを配列に分解し、必要な数だけ抜き出してリストとして表示している。 何をどう処理するかは人それぞれなので、適宜自分のサイトに合わせて記述する。
$.ajax({ type: 'GET', dataType: 'text', scriptCharset: 'UTF-8', timeout: 10000, url: '/data/example.txt' }).done(function(data, status, xhr){ var data_list = data.split("\n"); var output = ''; for(let i=0;i<3;i++){ output += '<li>' + data_list[i] + '</li>'; } document.getElementById('example').insertAdjacentHTML('afterbegin', '<ul>' + output + '</ul>'); });
jQuery は便利だけど、まずそれを読み込まないといけない。 読み込めなかったら処理できないし、jQuery に依存したくないときもある。 そこで XMLHttpRequest を使う。
以下のコードは上記の例とやっていることは同じ。 意外とシンプルに書けるので良いかもしれない。
var xhr = new XMLHttpRequest(); xhr.open('GET', '/data/example.txt', true); xhr.onreadystatechange = function(){ if((xhr.readyState == 4) && (xhr.status == 200)){ var data_list = xhr.responseText.split("\n"); var output = ''; for(let i=0;i<3;i++){ output += '<li>' + data_list[i] + '</li>'; } document.getElementById('example').insertAdjacentHTML('afterbegin', '<ul>' + output + '</ul>'); } } xhr.send(null);
ここでは書いていないが、使う場合は即時関数 (function(){ ~ })(); などで囲んでおくと良い。
jQuery を使い始めると、すぐそれに頼ってしまうので反省したい。